Login with Facebook using javascript
Welcome to the In Pakainfo.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.For Login with Facebook using javascript Source code download
Login with Facebook using javascript Source code download
setting to javascript for login with Facebook Account
FB.init({ appId : '19101655989566548', // your facebook App ID channelUrl : 'https://www.pakainfo.com/facebook/channel.html', //your facebook Channel File status : true, // status check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML });
First of create a simple dev account in facebook.
Create Account
index.html
please set this your project name and set redirect url set and get the appId and secrate key.
<html> <body> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : '19101655989566548', // your facebook App ID channelUrl : 'https://www.pakainfo.com/facebook/channel.html', //your facebook Channel File status : true, // status check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); FB.Event.subscribe('auth.authmsgresultChange', function(msgresult) { if (msgresult.status === 'connected') { //display message document.getElementById("data_msgresult_result").innerHTML += "<br>facebook auth Connected to Facebook"; //display SUCCESS } else if (msgresult.status === 'not_authorized') { //display message document.getElementById("data_msgresult_result").innerHTML += "<br>facebook auth Failed to Connect"; //display FAILED } else { //display message document.getElementById("data_msgresult_result").innerHTML += "<br>facebook auth Logged Out"; //display UNKNOWN ERROR } }); }; //facebook auth login function call function Login() { FB.login(function(msgresult) { if (msgresult.authmsgresult) { getClientInfo(); } else { console.log('User cridentials cancelled login or all the data did not fully authorize.'); } },{scope: 'email,user_photos,user_videos'}); } function getClientInfo() { FB.api('/me', function(msgresult) { var fbexample="<b>client Name</b> : "+msgresult.name+"<br>"; fbexample +="<b>client Link: </b>"+msgresult.link+"<br>"; fbexample +="<b>client Username:</b> "+msgresult.username+"<br>"; fbexample +="<b>client id: </b>"+msgresult.id+"<br>"; fbexample +="<b>client Email:</b> "+msgresult.email+"<br>"; fbexample +="<input type='button' value='client Photo' onclick='getPhoto();'/>"; fbexample +="<input type='button' value='Logout' onclick='Logout();'/>"; document.getElementById("status").innerHTML=fbexample; }); } function getPhoto() { FB.api('/me/picture?type=normal', function(msgresult) { var fbexample="<br/><b>Pic</b> : <img src='"+msgresult.data.url+"'/>"; document.getElementById("status").innerHTML+=fbexample; }); } function Logout() { FB.logout(function(){document.location.reload();}); } // Load the all 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 with javascript OAuth Javascript Demo</h2> <div id="status"> Please Click on Below Button to start the demo: <br/> <buttononclick="Login()">Facebook Login </button> </div> <br/><br/><br/><br/><br/> <div id="data_msgresult_result"> Logs:<br/> </div> </div> </body> </html>
channel.html
<script src="//connect.facebook.net/en_US/all.js"></script>
We hope you get an idea about Login with Facebook using javascript
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.
We hope This Post can help you…….Good Luck!.