Third-party login and access with OAuth

By | 26 July, 2013

Nowadays It is increasingly common that many web applications take advantage of external services such as Facebook and Gmail API solutions, in an attempt to speed up and optimize the user experience, save oneself to accomplish the tedious task of  filling  the typical registration form.

Thus, for these purposes is often used OAuth protocol. OAuth (Open Authorization) is an open protocol, proposed by Blaine Cook and Chris Messina, which provides a method for clients to access server resources on behalf of a resource owner (such as a different client or an end-user). It also provides a process for end-users to authorize third-party access to their server resources without sharing their credentials (typically, a username and password pair), using user-agent redirections.

OAuth enables a website user to share information on the site A (service provider) to site B (called consumer) without sharing its identity. In this case, A means Facebook and B is the app that we will develop. Therefore, the current user will share with us some of his personal information on Facebook (including username and password) to access our application.

Thus  use your Facebook account and login to sign in other websites must take the following steps:

    • Create a Facebook app, which basically means that we must register in Facebook the application that will be created. So we can provide an AppID to be used lately. To do this you should visit the following link (you must be registered as a developer if you have not):


Make sure you got the required AppID as follows:

    • Then we have to indicate to which URL Facebook should return our requests (so we must  launch a request to sign in). As we are still developing locally, we can enter localhost as the URL.
    • Then we will start coding our application. Do create a file index.html in the root application, and paste the code you were provided in step 2 through this link: https://developers.facebook.com/docs/facebook-login/getting-started-web/

The resulting file will look similar to this:


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author"
content="Eugenia Pérez, eugenia_perez@cuatrovientos.org">
    <title>DW :: Client-side dev :: LoginExample with OAuth</title>
</head>
<body>
    <div id="fb-root"></div>
    <script>
        // Additional JS functions here
        window.fbAsyncInit = function () {
            FB.init({
                appId: 'YOUR_APP_ID', // App ID
                channelUrl: '//localhost/LoginExample/channel.html', // Channel File
                status: true, // check login status
                cookie: true, // enable cookies to allow the server to access the session
                xfbml: true  // parse XFBML
            });

            // Additional init code here

        };

        // Load the SDK asynchronously
        (function (d) {
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) { return; }
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
        }(document));
    </script>

</body>
</html>

      • Create a file called channel.html to be stored in the URL you’ve just mentioned. In this case, within the LoginExample directory of your local application server.

This file must have been simply written with the following content:

<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
      • Now you can add the code snippet that was provided in step 3,  in  the above link. Among other things,  you will have to add the Facebook login button so that you click on it, the login dialog box will be opened.

And… voilà… If you enter your credentials, the user will be logged into your application through Facebook.

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Leave a Reply

Your email address will not be published.