Verification: a143cc29221c9be0

Php code for login with facebook

Php code for login with facebook

Содержание

Purpose

The simplest Javascript step-by-step guide with full working code (

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


   Sign in with Facebook

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