HTML JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE
README.md
index.css
index.html
index.js

README.md

Social Login Demos

Demonstrating Facebook and Google sign-in on websites via client-side JavaScript APIs.

This code is provided alongside my blog article on social logins. This code is live online at http://eusebius.tech/social-login-demos (permalink).

Basics:

  1. Load social SDKs
  2. Request user details
  3. Update HTML page (through id's) with details received.

HTML simplified overview:

<head>
  <!-- CSS for Bootstrap, Font Awesome and customisation -->
  <link rel="stylesheet">
  
  <meta property="fb:app_id" content="..." />
  <meta name="google-signin-client_id" content="..." />

  <!-- Google Analytics -->
  <script></script>
</head>

<body>
  <header>...</header>

  <div class="container">
    <div class="row">
      <article>
        <!-- Facebook login button -->
        <fb:login-button scope="public_profile,email,user_friends" onlogin="facebookCheckLoginState();"></fb:login-button>

        <!-- Facebook info card -->
        <div class="row">
          <div class="jumbotron">
            <!-- id is important in index.js -->
            <h3 class="text-center" id="facebook-card-title">Facebook's minimum</h3>
            <div class="row" id="facebook-cover"></div>
            ...
          </div>
        </div>

        <!-- Google login button -->
        <div class="g-signin2" data-onsuccess="GoogleOnSignIn"></div>

        <!-- Google info card -->
        <div class="row">
          ...
        </div>

      </article>
    </div>
  </div>

  <footer>...</footer>

  <script src="index.js"></script>

  <!-- Disqus comments -->
  <script></script>
</body>

Cloning and playing with this

App domains/ JavaScript origins that work with my Facebook App/ Google Web Client:

You might need to check localhost is in your hosts file, usually this is /etc/hosts on UNIX-like machines (Linux, Mac OS X 10.2 and newer); something like the following line:

127.0.0.1       localhost

Production

You should include your own Facebook App ID in window.fbAsyncInit function of index.js and your own google-signin-client_id meta content in the head of index.html. Also, either remove or update the script elements for Disqus comments (end of index.html) and Google Analytics (in head).

For my website, JavaScript code is minified using Google's Closure Compiler (docs and API).