In this tutorial,I have covered how to use Facebook Javascript SDK.
Using this SDK, you can get the full functionality of Facebook OAuth at client-side.
i.e., Getting User Information/Posting to Wall/Reading Messages can be done with pure JavaScript, It doesn’t require any server-side programming.
List of Core APIs in Facebook Javascript SDK
FB.init – Initialize the SDK with your APP ID
FB.api – For making API calls to Graph API
FB.ui – For triggering Facebook Dialogs like OAuth Dialog, Feed Dialog, Friends Dialog, Request Dialog, Send Dialog, Pay Dialog, Add Page Tab Dialog
FB.login – Login to Facebook using OAuth Dialog
FB.logout – Logout the user from Facebook
FB.getLoginStatus – For checking whether user is logged in and authenticated App
FB.getAuthResponse – Similar to FB.getLoginStatus, but it is synchronous and returns authResponse Object.
FB.Event.subscribe – Subscribe for events (auth.login, auth.authResponseChange, auth.statusChange) and get callbacks to your function when event is fired.
FB.Event.unsubscribe – Unsubscribe the specified events
Follow the below steps to make your first JavaScript App:
1) You need a Facebook App ID to use Facebook Javascript SDK,
Check “Creating Facebook App” section in https://hayageek.com/facebook-dialog-oauth/
2). Add a Channel file in your website. Channel file is optional but it improves the Facebook Javascript SDK performance by addressing cross-domain issues in certain browsers.
content of channel file is
<script src="//connect.facebook.net/en_US/all.js"></script>
3) Facebook SDK initialization. Add the below code to your HTML file.
<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : 'YOUR_APP_ID', // App ID channelUrl : 'YOUR_WEBSITE_CHANNEL_URL', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); }; (function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref); }(document)); </script>
4) Write a Method for Login
Use Fb.login() method for asking user authorization.If you want extra information from user, you need to provide the necessary scope list.
for email : – {scope: ’email’}
for Friends List – {scope: ‘read_friendlists’}
For Photos,Videos – {scope: ‘user_photos,user_videos’}
function Login() { FB.login(function(response) { if (response.authResponse) { getUserInfo(); // Get User Information. } else { console.log('Authorization failed.'); } },{scope: 'email'}); }
5) Get User Information by making API call to Graph API
function getUserInfo() { FB.api('/me', function(response) { //response.name - User Full name //response.link - User Facebook URL //response.username - User name //response.id - id //response.email - User email }); }
6) Add callback handler for authResponseChange events. This is optional.
FB.Event.subscribe('auth.authResponseChange', function(response) { if (response.status === 'connected') { //SUCCESS } else if (response.status === 'not_authorized') { //FAILED } else { //UNKNOWN ERROR. Logged Out } });
6) Write a Method for Logout
function Logout() { FB.logout(function(){document.location.reload();}); }
Working Facebook Javascript SDK Example
<html> <body> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : '113455642165175', // Set YOUR APP ID channelUrl : 'https://hayageek.com/examples/oauth/facebook/oauth-javascript/channel.html', // Channel File status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); FB.Event.subscribe('auth.authResponseChange', function(response) { if (response.status === 'connected') { document.getElementById("message").innerHTML += "<br>Connected to Facebook"; //SUCCESS } else if (response.status === 'not_authorized') { document.getElementById("message").innerHTML += "<br>Failed to Connect"; //FAILED } else { document.getElementById("message").innerHTML += "<br>Logged Out"; //UNKNOWN ERROR } }); }; function Login() { FB.login(function(response) { if (response.authResponse) { getUserInfo(); } else { console.log('User cancelled login or did not fully authorize.'); } },{scope: 'email,user_photos,user_videos'}); } function getUserInfo() { FB.api('/me', function(response) { var str="<b>Name</b> : "+response.name+"<br>"; str +="<b>Link: </b>"+response.link+"<br>"; str +="<b>Username:</b> "+response.username+"<br>"; str +="<b>id: </b>"+response.id+"<br>"; str +="<b>Email:</b> "+response.email+"<br>"; str +="<input type='button' value='Get Photo' onclick='getPhoto();'/>"; str +="<input type='button' value='Logout' onclick='Logout();'/>"; document.getElementById("status").innerHTML=str; }); } function getPhoto() { FB.api('/me/picture?type=normal', function(response) { var str="<br/><b>Pic</b> : <img src='"+response.data.url+"'/>"; document.getElementById("status").innerHTML+=str; }); } function Logout() { FB.logout(function(){document.location.reload();}); } // Load the SDK asynchronously (function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref); }(document)); </script> <div align="center"> <h2>Facebook OAuth Javascript Demo</h2> <div id="status"> Click on Below Image to start the demo: <br/> <img src="https://hayageek.com/examples/oauth/facebook/oauth-javascript/LoginWithFacebook.png" style="cursor:pointer;" onclick="Login()"/> </div> <br/><br/><br/><br/><br/> <div id="message"> Logs:<br/> </div> </div> </body> </html>
Reference:https://developers.facebook.com/docs/reference/javascript/