Facebook login on website with Java Script Code

Facebook is a popular social media. Most of the website provide login with facebook feature, why because each and every user over internet have facebook account. So login with facebook feature avoid filling a new signup form on a new website.

Login with facebook is simple and secure as the api is given by facebook only.

1. Go to facebook and create an App, follow below steps:


Go to https://developers.facebook.com/ , in My Apps click on Create New App, then select Website from below screen.



Now type App name and click on "Create New Facebook App ID"




You can see App id in below screen. Also you must enter your website url in order to allow user to login to your website.

Now write below code for facebook login:

*Remember only public features will be access by facebook api. Public features like user name, emailid, gender, location

Create a JS file and write below code in that file:



window.fbAsyncInit = function () {
    FB.init({
        appId: 'APPID', // Set YOUR APP ID
        channelUrl: 'http://www.sharepointcafe.net/fhchannel.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', { fields: 'name,email' }, function (response) {

        var profilepic = "https://graph.facebook.com/" + response.id + "/picture?type=normal";
       //Do your action here, call a java script or a web method/service to do more.
       
    });
}
function getPhoto() {
    FB.api('/me/picture?type=large', 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));






In HTML put a reference of this JS file and write below code:

<a href="#" id="fb-login" onclick="Login();">
                             <img src="../Images/fb-login-btn.png" /></a>

Comments

Popular