Facebook Python social auth Not Logged in You Are Not Logged in Please Login and Try Again

Purpose

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

Outcome

Fully Functional Code

To demonstrate the simplicity of this solution, let us wait at the last lawmaking nosotros create. You can attempt out the code instantly hither: 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 primal   OAuth.initialize('HwAr2OtSxRgEEnO2-JnYjsuA3tc');   // Use popup for oauth   OAuth.popup('facebook').so(facebook => {     console.log('facebook:',facebook);     // Prompts 'welcome' message with User's e-mail on successful login     // #me() is a convenient method to think user data without requiring you     // to know which OAuth provider url to phone call     facebook.me().and so(data => {       console.log('me information:', data);       alert('Facebook says your email is:' + data.email + ".\nView browser 'Console Log' for more details");     })     // Retrieves user information 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,piece of work,languages,altogether,relationship_status,hometown,picture').then(data => {       console.log('self data:', data);     })   }); })        

External Resource

• jQuery: https://code.jquery.com/jquery-3.two.i.min.js
• oauth.io JS: https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js
• Bootstrap: https://maxcdn.bootstrapcdn.com/bootstrap/3.three.6/css/bootstrap.min.css
• Font-Aweseome: https://maxcdn.bootstrapcdn.com/font-awesome/4.vii.0/css/font-awesome.min.css
• Bootstrap-social: https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/iv.12.0/bootstrap-social.min.css

General Steps

1. Create Facebook app
2. Create oauth.io account
3. Link Facebook app keys to oauth.io account
4. Create social login push 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 non nevertheless logged in to Facebook, you will be prompted to.

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

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

Fill up 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 every bit the other steps shows you Javascripts snippets that y'all do not demand.

You should now run into 'Settings' on the left card, 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 up in oauth.io. Note the 'App ID' and 'Secret Central'.

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

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

Select 'Facebook' equally the OAuth provider that yous want to add.

3. Link Facebook app keys to oauth.io account

Select the latest 'apiversion', re-create the Facebook 'App ID' and 'Secret Primal' that you noted earlier into 'clientid', and 'client_secret' fields respectively, and click 'Save'.

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

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

Host the code below on your server. If y'all have no server yet, yous can test the code here: https://jsfiddle.net/s3egg5h7/44/

          <html>   <header>     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.three.vi/css/bootstrap.min.css"></script>     <script src="https://lawmaking.jquery.com/jquery-3.two.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/iv.7.0/css/font-awesome.min.css">     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/iv.12.0/bootstrap-social.min.css">   </header>    <body>     <a id="facebook-push" class="btn btn-block btn-social btn-facebook">       <i course="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'due south 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().and then(data => {             panel.log('me data:', information);             warning('Facebook says your e-mail is:' + data.electronic mail + ".\nView browser 'Console Log' for more details");           })           // Retrieves user information from OAuth provider by using #become() and           // OAuth provider url           facebook.get('/v2.5/me?fields=proper noun,first_name,last_name,email,gender,location,locale,piece of work,languages,birthday,relationship_status,hometown,picture').and so(data => {             console.log('self data:', data);           })         });       })     </script>   </trunk> </html>        

sextonsibiler.blogspot.com

Source: https://coderwall.com/p/ch2wug/javascript-facebook-social-login-button-for-oauth-example

Share this post