ch2wug
Last Updated: March 20, 2018
·
654
· 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/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

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/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>
Say Thanks
Respond