Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

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).

About

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

Topics

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.