Skip to main content

How to Integrate Instagram Login in IOS - Objective C

Introduction to Instagram integration in iOS



Instagram is the popular app that allows user to share pictures and small videos with their followers and people around the world. In iOS app, developers  can utilise Instagram Api in two ways

1) Login to the app using Instagram credentials
2) Share picture from the app to Instagram

Instagram is a popular social network and most IOS developers integrate Instagram API in their apps. In this post we will look at the steps of integrating and authenticating user's (both signed authentication or unsigned authentication) with Instagram in IOS.

Note: For swift3 tutorial on Instagram login, please visit Integrate Instagram login using Swift3 Tutorial

Register app with Instagram

First register your app with Instagram and get CLIENT ID and CLIENT SECRET. To register your app with Instagram click below link

http://instagram.com/developer/

Log in to the portal and click Manage Client

Register app on Instagram
Manage Clients
Click Register New Client, and register your app by filling necessary fields as mentioned below

1. Application Name
2. Description about application
3. Website
4. OAUTH redirect uri : Required if user denied access to your application then Instagram will redirect user to this uri filled by you in this field. You can enter same URL as entered in website field.

Next you have to select authentication options

1. Disable implicit OAuth : By enabling or checking this option you are telling that your app use Signed authentication that use server side OAUTH flow. If you want client side authentication that is unsigned calls then you can do it by unchecking the checkbox.

2. Enforce signed header:  This option provide your app with better security as access token can be stolen and  reused elsewhere. 

To make a signed request you have to tick mark both checkboxes and if you want unsigned request then you can keep both of these checkboxes unchecked. Click register to create an application on Instagram.

Jump to code

Now at this point you have your client id  and client secret with you.

Code in ViewController.h file

Open your viewController.h file and create IBOutlet for  UIWebView, UIActivityIndicatorView,
UILabel. We need property to differentiate weather we are going to use unsigned authentication or signed authentication.
@interface LoginViewController : UIViewController<UIWebViewDelegate>
{


    IBOutlet UIWebView *loginWebView;
    IBOutlet UIActivityIndicatorView* loginIndicator;
    IBOutlet UILabel *loadingLabel;
}
@property(strong,nonatomic)NSString *typeOfAuthentication;

@end

Designing Interface

Open .xib, drag all controls declared in viewController.h file and connect outlets with them. Set UIWebView delegates as we need to implement delegates.

Code in ViewController.m file


TypeOfAuthentication is to be set when you are navigating to viewController or you can set it in viewDidLoad method as

self.typeOfAuthentication = @"UNSIGNED"

Open your viewController.m file and in its viewDidAppear method load your loginWebView with authorisation url, 
- (void) viewDidAppear:(BOOL)animated
{
    [super viewDidAppear: animated];
    
    [[UIApplication sharedApplication] setStatusBarHidden:YES];
    
    NSString* authURL = nil;
    
    if ([typeOfAuthentication isEqualToString:@"UNSIGNED"])
    {
         authURL = [NSString stringWithFormat: @"%@?client_id=%@&redirect_uri=%@&response_type=token&scope=%@&DEBUG=True",
         INSTAGRAM_AUTHURL,
         INSTAGRAM_CLIENT_ID,
         INSTAGRAM_REDIRECT_URI,
         INSTAGRAM_SCOPE];

    }
    else
    {
         authURL = [NSString stringWithFormat: @"%@?client_id=%@&redirect_uri=%@&response_type=code&scope=%@&DEBUG=True",
                             INSTAGRAM_AUTHURL,
                             INSTAGRAM_CLIENT_ID,
                             INSTAGRAM_REDIRECT_URI,
                             INSTAGRAM_SCOPE];
    }
    
    
    [loginWebView loadRequest: [NSURLRequest requestWithURL: [NSURL URLWithString: authURL]]];
    [loginWebView setDelegate:self];
}

Constants used

#define INSTAGRAM_AUTHURL                               @"https://api.instagram.com/oauth/authorize/"
#define INSTAGRAM_APIURl                                @"https://api.instagram.com/v1/users/"
#define INSTAGRAM_CLIENT_ID                             @"your client id"
#define INSTAGRAM_CLIENTSERCRET                         @"your client secret"
#define INSTAGRAM_REDIRECT_URI                          @"http://www.iostutorialjunction.com"
#define INSTAGRAM_ACCESS_TOKEN                          @"access_token"
#define INSTAGRAM_SCOPE                                 @"likes+comments+relationships"

Below are the UIWebView delegate methods that we need to implement. 

shouldStartLoadRequest : This is needed as we need to cross check our authentication with Instagram and here we get our access Token (in case of unsigned call ) and code (in case of signed call)

webViewDidStartLoad: To show activity indicator animated

webViewFinishLoad: To hide activity indicator.

failWithError: In case we are not able to load webView then stop activity indicator.  


- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
 navigationType:(UIWebViewNavigationType)navigationType
{


    return [self checkRequestForCallbackURL: request];
}

- (void) webViewDidStartLoad:(UIWebView *)webView
{
    [loginIndicator startAnimating];
    loadingLabel.hidden = NO;
    [loginWebView.layer removeAllAnimations];
    loginWebView.userInteractionEnabled = NO;
    [UIView animateWithDuration: 0.1 animations:^{
      //  loginWebView.alpha = 0.2;
    }];
}

- (void) webViewDidFinishLoad:(UIWebView *)webView
{
    [loginIndicator stopAnimating];
    loadingLabel.hidden = YES;
    [loginWebView.layer removeAllAnimations];
    loginWebView.userInteractionEnabled = YES;
    [UIView animateWithDuration: 0.1 animations:^{
        //loginWebView.alpha = 1.0;
    }];
}

- (void) webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
{
    [self webViewDidFinishLoad: webView];
}


In shouldStartLoadRequest method we will check for callBackUrl we get from Instagram. Below is the implementation code for callback url check. Here if we get our redirect url that we gave while creating client on Instagram in the callback url request then, we will fetch token in our handleAuth method(in case of unsigned call) or we will extract code from url and make a post request to Instagram server(in case of signed call)

- (BOOL) checkRequestForCallbackURL: (NSURLRequest*) request
{
    NSString* urlString = [[request URL] absoluteString];
    
    if ([typeOfAuthentication isEqualToString:@"UNSIGNED"])
    {
        // check, if auth was succesfull (check for redirect URL)
          if([urlString hasPrefix: INSTAGRAM_REDIRECT_URI])
         {
             // extract and handle access token
             NSRange range = [urlString rangeOfString: @"#access_token="];
             [self handleAuth: [urlString substringFromIndex: range.location+range.length]];
             return NO;
         }
    }
    else
    {
        if([urlString hasPrefix: INSTAGRAM_REDIRECT_URI])
        {
            // extract and handle code
            NSRange range = [urlString rangeOfString: @"code="];
            [self makePostRequest:[urlString substringFromIndex: range.location+range.length]];
            return NO;
        }
    }
    
    return YES;

}



Below is the code for  both makePostRequest and handleAuth methods

-(void)makePostRequest:(NSString *)code
{
    
    NSString *post = [NSStringstringWithFormat:@"client_id=%@&client_secret=%@&grant_type=authorization_code&redirect_uri=%@&code=%@",INSTAGRAM_CLIENT_ID,INSTAGRAM_CLIENTSERCRET,INSTAGRAM_REDIRECT_URI,code];
    NSData *postData = [post dataUsingEncoding:NSASCIIStringEncoding allowLossyConversion:YES];
    NSString *postLength = [NSString stringWithFormat:@"%lu", (unsigned long)[postData length]];
    
    NSMutableURLRequest *requestData = [NSMutableURLRequest requestWithURL:
                                        [NSURL URLWithString:@"https://api.instagram.com/oauth/access_token"]];
    [requestData setHTTPMethod:@"POST"];
    [requestData setValue:postLength forHTTPHeaderField:@"Content-Length"];
    [requestData setValue:@"application/x-www-form-urlencoded" forHTTPHeaderField:@"Content-Type"];
    [requestData setHTTPBody:postData];
    
    NSURLResponse *response = NULL;
    NSError *requestError = NULL;
    NSData *responseData = [NSURLConnection sendSynchronousRequest:requestData returningResponse:&response error:&requestError];
    NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:responseData options:NSJSONReadingAllowFragmentserror:nil];
    [self handleAuth:[dict valueForKey:@"access_token"]];
    
}

- (void) handleAuth: (NSString*) authToken
{
    NSLog(@"successfully logged in with Tocken == %@",authToken);
  
}

 If everything goes fine then you will get your auth token. In handleAuth you can dismiss the controller so that it take you back to your application and store the token in user defaults.

Now you can make request to Instagram server. If error persists then track back above steps.


Comments

Post a Comment

Thank You.

Popular Posts

How I Reduced the Size of My React Native App by 85%

How and Why You Should Do It I borrowed 25$ from my friend to start a Play Store Developer account to put up my first app. I had already created the app, created the assets and published it in the store. Nobody wants to download a todo list app that costs 25mb of bandwidth and another 25 MB of storage space. So today I am going to share with you how I reduced the size of Tet from 25 MB to around 3.5 MB. Size Matters Like any beginner, I wrote my app using Expo, the awesome React Native platform that makes creating native apps a breeze. There is no native setup, you write javascript and Expo builds the binaries for you. I love everything about Expo except the size of the binaries. Each binary weighs around 25 MB regardless of your app. So the first thing I did was to migrate my existing Expo app to React Native. Migrating to React Native react-native init  a new project with the same name Copy the  source  files over from Expo project Install all de...
Post a Comment
Read more

How to recover data of your Android KeyStore?

These methods can save you by recovering Key Alias and Key Password and KeyStore Password. This dialog becomes trouble to you? You should always keep the keystore file safe as you will not be able to update your previously uploaded APKs on PlayStore. It always need same keystore file for every version releases. But it’s even worse when you have KeyStore file and you forget any credentials shown in above box. But Good thing is you can recover them with certain tricks [Yes, there are always ways]. So let’s get straight to those ways. 1. Check your log files → For  windows  users, Go to windows file explorer C://Users/your PC name/.AndroidStudio1.4 ( your android studio version )\system\log\idea.log.1 ( or any old log number ) Open your log file in Notepad++ or Any text editor, and search for: android.injected.signing and if you are lucky enough then you will start seeing these. Pandroid.injected.signing.store.file = This is  file path where t...
Post a Comment
Read more

React Native - Text Input

In this chapter, we will show you how to work with  TextInput  elements in React Native. The Home component will import and render inputs. App.js import React from 'react' ; import Inputs from './inputs.js' const App = () => { return ( < Inputs /> ) } export default App Inputs We will define the initial state. After defining the initial state, we will create the  handleEmail  and the  handlePassword  functions. These functions are used for updating state. The  login()  function will just alert the current value of the state. We will also add some other properties to text inputs to disable auto capitalisation, remove the bottom border on Android devices and set a placeholder. inputs.js import React , { Component } from 'react' import { View , Text , TouchableOpacity , TextInput , StyleSheet } from 'react-native' class Inputs extends Component { state = { ...
Post a Comment
Read more