FB Signin Website

FB Signin Website

Released: FB Signin Website

Touching presence on web

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.

    Preview

  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:

TECH
javascript mobile website

Dialogue & Discussion