Implement Instagram’s login feature inside your iOS app.

Dejan Atanasov
Sep 14, 2017 · 5 min read

This tutorial will introduce you to the Instagram API and teach you how to authenticate an Instagram account and retrieve the ACCESS_TOKEN required for accessing the other endpoints such as fetching media, likes, comments, relationships, etc. This whole tutorial is done from scratch, and no 3rd party library has been used.

The boring stuff

1In order to use the API, we need to register an application on the Instagram API Platform and receive a CLIENT ID. The below form shows you how that screen looks like. I have filled it with some dummy details, so please use your own when registering your app. All the fields are mandatory.

For the redirect_uri field please enter a valid domain, and write it down, because you will need it later. Also, if you have difficulties with the privacy policy, you can find an example template here.

Details Tab

2 After you enter all the required details, click on the Security tab right next to the Details tab and uncheck Disable implicit OAuth. It should be checked by default, as shown below. When you are done just click the Register button.

Security Tab

3 If your app was successfully registered you will be redirected to the Manage Clients screen where you can find your Client Info. Instagram defaults your API to Sandbox Mode. That means that you can only use 500 requests per hour per access token. If you want to read more about the limits you can find it under Rate Limits.

That limit will be sufficient for testing, but if you want to go live then you need to submit for Production Mode. To do that, Instagram wants you to finish your app, then record a video that shows how you use their API’s, and submit for review. You also need to select which permissions you will need. The submission process is similar to the Facebook API. You can find the submission form under Manage -> Permissions.

We are done with the Instagram API Platform. Now let’s do some coding! 🤓

The Code

Instagram doesn’t provide us with an app login like Facebook does. Instead, we need to call a specific URL directly into UIWebView which will open the Instagram login form. Then, the user should enter his credentials and our job will be to intercept the response from the callback. This is the only way of implementing Instagram’s authentication.

I won’t show you how to add a UIWebView component in the interface builder, as I assume you already know. I will focus only on the code. Please create a separate controller with UIWebView component and an IBOutlet before proceeding further.

Add the constants

First of all, we are gonna store the constants under a struct named API. I prefer to keep all the constants under a separate file named Constants.swift.

struct API{static let INSTAGRAM_AUTHURL = ""static let INSTAGRAM_CLIENT_ID = “YOUR_CLIENT_ID”static let INSTAGRAM_CLIENTSERCRET = “YOUR_CLIENT_SECRET”static let INSTAGRAM_REDIRECT_URI = “ENTER_REDIRECT_URI"static let INSTAGRAM_ACCESS_TOKEN = “access_token”static let INSTAGRAM_SCOPE = “follower_list+public_content” /* add whatever scope you need */}

Load the URL

Enter the following code inside viewDidLoad() which will call the login form from Instagram.

let authURL = String(format: “%@?client_id=%@&redirect_uri=%@&response_type=token&scope=%@&DEBUG=True”, arguments: [API.INSTAGRAM_AUTHURL,API.INSTAGRAM_CLIENT_ID,API.INSTAGRAM_REDIRECT_URI, API.INSTAGRAM_SCOPE])let urlRequest = URLRequest.init(url: URL.init(string: authURL)!)

Get the token

We need to implement the shouldStartLoadWith() UIWebViewDelegate method, where we are going to intercept the access_token.

extension ViewController: UIWebViewDelegate{func webView(_ webView: UIWebView, shouldStartLoadWith request:URLRequest, navigationType: UIWebViewNavigationType) -> Bool{return checkRequestForCallbackURL(request: request)}}

Created some helper functions for better code organization:

func checkRequestForCallbackURL(request: URLRequest) -> Bool {let requestURLString = (request.url?.absoluteString)! as Stringif requestURLString.hasPrefix(API.INSTAGRAM_REDIRECT_URI) {let range: Range<String.Index> = requestURLString.range(of: “#access_token=”)!handleAuth(authToken: requestURLString.substring(from: range.upperBound))return false;}return true}func handleAuth(authToken: String) {print(“Instagram authentication token ==”, authToken)}

The checkRequestForCallbackURL() function will check if the URL contains a prefix with your REDIRECT_URI and then retrieve the access_token. I have also created another clean function where you can handle your own logic for the access token.

Just copy and paste the above code, and you are good to go! 🚀🚀🚀

We Talk IT

A bunch of techies who educate each other by sharing ideas and experiences that make a difference in our cool nerdy lives.

Dejan Atanasov

Written by

iOS Developer | Creator of Swift2Go | @hackernoon writer | Hire Me:

We Talk IT

A bunch of techies who educate each other by sharing ideas and experiences that make a difference in our cool nerdy lives.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade