Last Updated: September 30, 2021

· Khor

Javascript Facebook Social Login Bootstrap Button for OAuth

#javascript

#oauth

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

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, add the domain name, e.g., abc.com, of where you will be creating the social login button.

oauthio_domain_whitelist.png

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>