javascriptapioauthoauth-2.0oauth-provider

Providing an OAuth Javascript API


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


Solution

  • 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