Social Media Authentication – Instagram login in Xamarin Forms

This is the second article of the series about Social Media Authentication. In the previous one, I showed how to integrate Facebook authentication. In this one, we will be integrating Instagram login in a Xamarin Forms application.

Here the order of the series:

• Article 1: Facebook
• Article 2: Instagram
• Article 3: Google
• Article 4: Twitter
• Article 5: Microsoft
• Article 6: LinkedIn

Instagram authentication

Instagram has two APIs:

Instagram API Platform: This is the Instagram traditional API for accessing information related to any Instagram user account. More information here: https://www.instagram.com/developer/

Instagram Graph API: This is the Instagram new API for handling and accessing business or content creator accounts. More information here: https://developers.facebook.com/docs/instagram-api

This article will be based on using the Instagram API Platform since we want to do authentication based on Instagram user accounts,

To do this integration we will be using Xamarin.Auth which is a library that handles authentication via the protocols OAuth 1.0 and 2.0.

The result will look like this:

Let’s start:

1-Instagram portal setup

The first step is to register an Instagram client, we can do that at this link. (Make sure you are logged to your Instagram account before accessing this link).

After filling the form you will get the Client ID (you will need it in a further step).

Add all users that will be testing the app to sandbox if not authentication will fail for them.

Must uncheck disable implicit OAuth since we are not using Server-Side OAuth flow for this sample. For more information check here: https://www.instagram.com/developer/authentication/

2-Install the Xamatin.Auth package in Android and iOS projects

3-In your Forms project add this IOAuth2Service interface

4-In your iOS project add the OAuth2Service service implementation

5-In your Android project add the OAuth2Service service implementation

6-In your ViewModel use the service OAuth2Service to do the authentication

You will need to pass the following values to the OAuthService:

```cs
 const string InstagramApiUrl = "https://api.instagram.com";
 const string InstagramScope = "basic";
 const string InstagramAuthorizationUrl = "https://api.instagram.com/oauth/authorize/";
 const string InstagramRedirectUrl = "<YOUR REDIRECT URI>";
 const string InstagramClientId = "<YOUR INSTAGRAM CLIENT ID>";
```

As you can see above in the authentication successful event we are doing an HTTP request to Instagram API to gather the user information.

To do this request I used Refit.

Used Acr.UserDialog to display an alert while is doing the login.

7-Submit your Instagram client

Once you have validated the Instagram authentication is working properly you can start the submission process by going to the permissions section and clicking on Start a submission button. They will require a description of how and why your app uses Instagram login, also a recorded video of the Instagram authentication flow in your application. Instagram doesn’t notify via email when the Instagram client is live or rejected so be aware of checking the portal for a few days until getting a status change.

Note: Be aware his Instagram API Platform will be deprecated in 2020. As mentioned in the top of docs home page: https://www.instagram.com/developer/, not sure if they will still provide a way to do login using users account since the new Instagram Graph API is just for Business/Creators accounts, not users accounts.

That’s it, keep posted to the Google article next week 🙂

Check the full source code here.

Happy Instagram integration!