OAuth2 tricks

Published: Oct 18, 2017 by nemanjan00

My friend was quite confused about OAuth 2 today (facebook specifically) so I decided to write a couple of tricks for facebook and instagram authentication.

Types of authentication on Instagram/Facebook

There are two types of authentification.

With backend callback
With frontend callback (facebook specific implementation)

Backend callback

On your redirect url you are getting code GET argument and that code is what you use to get token.

Frontend callback (facebook implementation)

When you trigger authentication from javascript, facebook sdk opens popup for authentication and when popup authentification is finished, window will get closed and you will get token back.

It is all OAuth 2, why is facebook different?

Most modern applications today are modern and it is just not natural experience to have redirect and to reaload page.

A lot of people would like to use same style of authentification for Instagram as for facebook.

What is the actual difference between facebook auth and normal OAuth2?

What facebook did is build one more layer on top of OAuth.

They developed backend that just returns token to your frontend application.

How do I do same thing for instagram?

Before we implement the same thing for instagram, we need to get familiar with couple of concepts.

Opening window

var window = window.open(url, windowName, [windowFeatures]);

When you open popup window, you are getting window object back and now, you can reference it.

In window you opened you can reference parent using opener

Cross window communication

Sending data

window.postMessage(message, targetOrigin, [transfer]);

In this case, you are sending message which is data object to window if target origin matches with origin of that window.

Transfer is optional object that will be removed from your scope and added to that message. It can also contain stuff that is not data.

Listening for data

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  if (event.origin !== "http://example.org:8080")
    return;

  // ...
}

What we now need is backend script that will grab token from code and send it to window that called it.

opener.postMessage("put token here", "origin"); // To make sure noone steals token, use origin

In window that needs to login, we are opening instagram login in popup and put link to that backend script in redirect.

window.open("https://api.instagram.com/oauth/authorize/?client_id=APPLICATION_ID&redirect_uri="+window.location + "auth/instagram"+"&response_type=code");

Now, we need to wait for token response

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event){
	$window.removeEventListener("message", receiveMessage, false);
	// Token is in event.data
}