Last Updated: September 30, 2021

· Khor

Javascript Facebook Social Login Bootstrap Button for OAuth

#javascript

#social login bootstrap

#oauth2

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/44/

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:',facebook);
    // Prompts 'welcome' message with User's email on successful login
    // #me() is a convenient method to retrieve user data without requiring you
    // to know which OAuth provider url to call
    facebook.me().then(data => {
      console.log('me data:', data);
      alert('Facebook says your email is:' + data.email + ".\nView browser 'Console Log' for more details");
    })
    // Retrieves user data from OAuth provider by using #get() and
    // OAuth provider url
    facebook.get('/v2.5/me?fields=name,first_name,last_name,email,gender,location,locale,work,languages,birthday,relationship_status,hometown,picture').then(data => {
      console.log('self data:', data);
    })
  });
})

External Resources

jQuery: https://code.jquery.com/jquery-3.2.1.min.js
oauth.io JS: https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js
Bootstrap: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
Font-Aweseome: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Bootstrap-social: https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css

General Steps

Create Facebook app
Create oauth.io account
Link Facebook app keys to oauth.io account
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.

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

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

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

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

Click on 'WWW' to create a web app

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.

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

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

Toggle the switch to make your app public.

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

2. Create oauth.io Account

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

On the main dashboard, add the domain name, e.g., abc.com, of where you will be creating the social login button.

Click on 'Integrated APIs' on the left menu.

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

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

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'.

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

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/44/

<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:',facebook);
          // Prompts 'welcome' message with User's email on successful login
          // #me() is a convenient method to retrieve user data without requiring you
          // to know which OAuth provider url to call
          facebook.me().then(data => {
            console.log('me data:', data);
            alert('Facebook says your email is:' + data.email + ".\nView browser 'Console Log' for more details");
          })
          // Retrieves user data from OAuth provider by using #get() and
          // OAuth provider url
          facebook.get('/v2.5/me?fields=name,first_name,last_name,email,gender,location,locale,work,languages,birthday,relationship_status,hometown,picture').then(data => {
            console.log('self data:', data);
          })
        });
      })
    </script>
  </body>
</html>