Integrate Instagram in IOS

1 Comment / authentication, Instagram, signed authentication, unsigned authentication / By
Integrate instagram Tutorial IOS

Tags: #Instagramintegration #IOS #Tutorial #login via instagram

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 utilize Instagram Api in two ways
1) Login to the app using Instagram credentials
2) Share picture from the app to Instagram
For 2nd option you can check share pictures to Instagram programmatically from iOS app  as in this post we are only going to cover login via Instagram in objective c language.

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 authorization 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                          @“https://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 = [NSString stringWithFormat:@”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:NSJSONReadingAllowFragments error: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 authtoken. In handleAuth you can dismiss the controller so that it take you back to your application and store the token in userdefaults.
Now you can make request to Instagram server. If error persists then track back above steps.

%d bloggers like this: