Released: FB Signin Website

I got to replicate my earlier work for Google Signin for FB Sign in. I had done it before so I went super fast at it and also skipping many features. As I already wrote before it’s pointless to pull redundant details from internet and paste on my blogs and anyways not many people read my website, LOL.

Goals

1. Have a website to pull User’s email, name and some ID upon sign in

2. Have a callback upon sign in and sign out where a custom task can be coded

Flow

As POC, I made a simple website to solve this problem, this one: FBWebSignin. I had observed that I need to follow only two tiny details:

• Have a FB Developers App to have FB handle Auth

• Have code pointers to call FB from Website

1. Have a FB Developers App to have FB handle Auth:

   I headed to FB Developer App page page and then to Basic Settings where I whitelisted my domains for oAuth.

   

2. Have code pointers to call FB from Website:

   This is documented on FB Dev Docs along with the code sample:

   
    // Include the JavaScript SDK on your page once, ideally right after the opening body tag
   <div id="fb-root"></div>
    <script async="" defer="" crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&amp;version=v9.0&amp;appId=2020399148181142&amp;autoLogAppEvents=1" nonce="wp1vl1u9"></script>
    

   
    // Place this code wherever you want the plugin to appear on your page.
   <div class="fb-login-button" data-width="" data-size="large" data-button-type="continue_with" data-layout="default" data-auto-logout-link="false" data-use-continue-as="false"></div>
    

   In the Scripts:

   
    <script>
        // executes for login
        FB.login(function(response) {
            if (response.status === 'connected') {
                // Logged into your webpage and Facebook.
            } else {
                // The person is not logged into your webpage or we are unable to tell. 
            }
        });
        // executes for logout
        FB.logout(function(response) {
            // Person is now logged out
        });
    </script>
    

I felt it was straightforward to implement and does not have many dependencies to slow me down. Having a simple website to call FB Sign-in is very satisfying. I tested it on my Chrome browser by going to the URL. For my demo, the source is hosted on GitHub repo: FBWebSignin repo, quick sneak peek is below: