Providing an OAuth Javascript API

Question

I'm setting up a website to be an OAuth 2.0 provider, much like Facebook and Twitter. Both these sites enable you to "Login with Facebook/Twitter" via a button, which opens an auth dialog. Once the user signs in, the box is closed and the requesting page now has the access token. How are they doing this in a way that doesn't violate cross-domain policies?

It seems to be that the Facebook JS SDK is loaded from their server, is this intentional to get around x-domain restrictions?

Also, at what point is the access token received by the parent window? Is it sent by the child or fetched by the parent?

Thanks

Answer 1

This is done by passing value from child widow to parent window. Every child window which is opened by parent window has reference to his parent which is can be access by:

var parent = window.opener.document.document; // by this you have reference to parent DOM
var someParentElement = parent.getElementById("idOfParentDomElement"); // ex: accessing particular element on parent

So by this you can pass value to parent by accessing it parent:

var childDiv = document.getElemntById("SomeChildDiv").innerHTML;
someParentElement.innerHTML = childDiv // passing html text to parent div

Read more about this here

Receiving access token is part of OAuth flow . Through oauth token is received and passes to parent window by window.opener and then window.close called by parent window to close window. After this parent work with Access Token.

Edit: After comments:

Facebook use a postMessage, iframe or flash functionality to handle cross-domain messaging which depend on browser. It includes all.js which is a key file to handle messages between. You can read more about its mechanism here