ch2wug
Last Updated: January 17, 2018
·
220
· Khor

Javascript Facebook Social Login Button for OAuth

Purpose

The simplest Javascript step-by-step guide with full working code (< 15 lines) to create a Social Login Button for Facebook on any webpage

Outcome

スクリーンショット 2017-12-14 15.43.24.png

Fully Functional Code

To demonstrate the simplicity of this solution, let us look at the final code we create. You can try out the code instantly here: https://jsfiddle.net/s3egg5h7/1/

HTML

<a id="facebook-button" class="btn btn-block btn-social btn-facebook">
  <i class="fa fa-facebook"></i> Sign in with Facebook
</a>

CSS

None

JS

$('#facebook-button').on('click', function() {
  // Initialize with your OAuth.io app public key
  OAuth.initialize('HwAr2OtSxRgEEnO2-JnYjsuA3tc');
  // Use popup for OAuth
  OAuth.popup('facebook').then(facebook => {
    console.log(facebook);
    // Retrieves user data from oauth provider
    console.log(facebook.me());
  });
})

External Resources

General Steps

  1. Create Facebook app
  2. Create oauth.io account
  3. Link Facebook app keys to oauth.io account
  4. Create social login button in HTML/CSS/JS with oauth.io app key

1. Create Facebook app

Goto https://developers.facebook.com, and click 'Log In' on the top right.

developers_facebook.png

If you are not yet logged in to Facebook, you will be prompted to.

facebook_login.png

If you are not taken directly to the create app page. click on the 'Get Started' on the top right.

facebook_get_started.png

Facebook has many developer 'Products', but the one we want is 'Facebook Login'

facebook_login_select.png

Fill in the app 'Display Name' and 'Contact Email'.

facebook_create_app.png

Click on 'WWW' to create a web app

facebook_oauth_www.png

For "Site Url', enter https://oauth.io, click 'Save', and click 'Continue'. You can click 'Next' till the end as the other steps shows you Javascripts snippets that you do not need.

facebook_oauth_www_config_1.png

You should now see 'Settings' on the left menu, please click on it.

facebook_login_0a.png

Fill in the 'Valid OAuth redirect URIs' with https://oauth.io/auth.

facebook_login_1a.png

Toggle the switch to make your app public.

facebook_login_2a.png

In 'App Domains', fill in oauth.io. Note the 'App ID' and 'Secret Key'.

facebook_login_3a.png

2. Create oauth.io Account

Create an account at https://oauth.io/signup.

oauthio_signup.png

On the main dashboard, click on 'Integrated APIs' on the left menu.

oauthio_general.png

On the 'Integration APIs' dashboard, click 'Add APIs'.

oauthio_api_integration.png

Select 'Facebook' as the OAuth provider that you want to add.

oauthio_add_provider.png

3. Link Facebook app keys to oauth.io account

Select the latest 'apiversion', copy the Facebook 'App ID' and 'Secret Key' that you noted earlier into 'clientid', and 'client_secret' fields respectively, and click 'Save'.

oauthio_facebook_config.png

Click on 'Try Auth' to see if you have configured oauth.io to access your Facebook app correctly.

oauthio_api_try.png

4. Create social login button in HTML/CSS/JS with oauth.io app key

Host the code below on your server. If you have no server yet, you can test the code here: https://jsfiddle.net/s3egg5h7/1/

<html>
  <header>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css">
  </header>

  <body>
    <a id="facebook-button" class="btn btn-block btn-social btn-facebook">
      <i class="fa fa-facebook"></i> Sign in with Facebook
    </a>

    <script>
      $('#facebook-button').on('click', function() {
        // Initialize with your OAuth.io app public key
        OAuth.initialize('YOUR_OAUTH_KEY');
        // Use popup for OAuth
        OAuth.popup('facebook').then(facebook => {
          console.log(facebook);
          // Retrieves user data from oauth provider
          console.log(facebook.me());
        });
      })
    </script>
  </body>
</html>
Say Thanks
Respond