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

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

An introduction to Size Classes for Xcode 8

Introduction to Size Classes for Xcode In iOS 8, Apple introduced  size classes , a way to describe any device in any orientation. Size classes rely heavily on auto layout. Until iOS 8, you could escape auto layout. IN iOS8, Apple changed several UIKit classes to depend on size classes. Modal views, popovers, split views, and image assets directly use size classes to determine how to display an image. Identical code to present a popover on an iPad  causes a iPhone to present a modal view. Different Size Classes There are two sizes for size classes:  compact , and  regular . Sometime you’ll hear about any.  Any  is the generic size that works with anything. The default Xcode layout, is  width:any height:any . This layout is for all cases. The Horizontal and vertical dimensions are called  traits , and can be accessed in code from an instance of  UITraitCollection . The  compact  size descr...
Post a Comment
Read more

What are the Alternatives of device UDID in iOS? - iOS7 / iOS 6 / iOS 5 – Get Device Unique Identifier UDID

Get Device Unique Identifier UDID Following code will help you to get the unique-device-identifier known as UDID. No matter what iOS user is using, you can get the UDID of the current iOS device by following code. - ( NSString *)UDID { NSString *uuidString = nil ; // get os version NSUInteger currentOSVersion = [[[[[UIDevice currentDevice ] systemVersion ] componentsSeparatedByString: @" . " ] objectAtIndex: 0 ] integerValue ]; if (currentOSVersion <= 5 ) { if ([[ NSUserDefaults standardUserDefaults ] valueForKey: @" udid " ]) { uuidString = [[ NSUserDefaults standardDefaults ] valueForKey: @" udid " ]; } else { CFUUIDRef uuidRef = CFUUIDCreate ( kCFAllocatorDefault ); uuidString = ( NSString *) CFBridgingRelease ( CFUUIDCreateString ( NULL ,uuidRef)); CFRelease (uuidRef); [[ NSUserDefaults standardUserDefaults ] setObject: uuidString ForKey: @" udid " ]; [[ NSUserDefaults standardUserDefaults ] synchro...
Post a Comment
Read more