Last Updated: September 30, 2022
·
16K
· data_me

Javascript Google Social Login Bootstrap Button for OAuth

Purpose

The simplest JavaScript step-by-step guide with full working code (< 15 lines) to create a Social Login Bootstrap Button for Google on any webpage with OAuth.io

Outcome

download.png

Fully Functional Code

To demonstrate the simplicity of this solution, let us look at the final code we create. You can try out the code instantly here: https://tome.oauth.io/providers/google/get-user-info

HTML

<a id="google-button" class="btn btn-block btn-social btn-google">
  <i class="fa fa-google"></i> Sign in with Google
</a>

CSS

None

JS

$('#google-button').on('click', function() {
  // Initialize with your OAuth.io app public key
  OAuth.initialize('YOUR_OAUTH_KEY');
  // Use popup for oauth
  OAuth.popup('google').then(google => {
    console.log('google:',google);
    // Retrieves user data from oauth provider
    // Prompts 'welcome' message with User's email on successful login
    // #me() is a convenient method to retrieve user data without requiring you
    // to know which OAuth provider url to call
    google.me().then(data => {
      console.log('me data:', data);
      alert('Google says your email is:' + data.email + ".\nView browser 'Console Log' for more details");
    });
    // Retrieves user data from OAuth provider by using #get() and
    // OAuth provider url
    google.get('/plus/v1/people/me').then(data => {
      console.log('self data:', data);
    })
  });
})

External Resources

*OAuth.io: https://oauth.io
* jQuery: https://code.jquery.com/jquery-3.2.1.min.js
* oauth.io JS: https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js
* Bootstrap: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
* Font-Aweseome: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
* Bootstrap-social: https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css

General Steps

  1. Create Google app
  2. Create OAuth.io account
  3. Link Google app keys to oauth.io account
  4. Create social login button in HTML/CSS/JS with oauth.io app key

1. Create Google app

Go to https://console.developers.google.com and sign in or create a new account.

Screen Shot 2017-12-20 at 6.02.45 PM.png

Click on ‘Create Project’ on top left.

Screen Shot 2017-12-20 at 6.19.19 PM.png

Name your project and click ‘Create’

Screen Shot 2017-12-20 at 6.27.34 PM.png

Check that you’re on the project you just created and then click on ‘Credentials’

Screen Shot 2017-12-20 at 6.34.13 PM.png

Select OAuth consent screen and enter email address and a product name. Click Save.

Screen Shot 2017-12-20 at 6.37.28 PM.png

Click on the Credentials tab and then click ‘Create credentials’ and select ‘OAuth client ID’ from the dropdown menu.

Screen Shot 2017-12-20 at 6.40.04 PM.png

Select ‘Web application’ and then enter https://oauth.io and https://oauth.io/auth for ‘Authorized JavaScript origins’ and Authorized redirect URLs, respectively. Click Create.

Screen Shot 2017-12-20 at 6.42.59 PM.png

You now have your client ID and client secret which you will add to your OAuth.io dashboard.

Screen Shot 2017-12-20 at 6.44.44 PM.png

2. Create oauth.io Account

Create an account on OAuth.io.

oauthio_signup.png

On the main dashboard, add the domain name of the webpage where you will the social login button into ‘Domain & URL whitelist’

oauthio_domain_whitelist.png

Click on 'Integrated APIs' on the left menu.

oauthio_general.png

On the 'Integration APIs' dashboard, click 'Add APIs'.

oauthio_api_integration.png

Select 'Google' as the OAuth provider that you want to add.

Screen Shot 2017-12-20 at 6.48.10 PM.png

3. Link Google app keys to oauth.io account

Set accesstype to ‘online’. From your Google app page, copy the Google ‘Client ID’ and 'Client Secret' that you noted earlier into 'clientid', and 'client_secret' fields, respectively, select your desired scope and then click 'Save'.

Screen Shot 2017-12-20 at 6.52.00 PM.png

Click on 'Try Auth' to see if you have configured oauth.io to access your Google app correctly.

4. Create social login button in HTML/CSS/JS with oauth.io app key

Host the code below on your server. If you have no server yet, you can test the code here: https://jsfiddle.net/a7Ljj18e/12/

<html>
  <header>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css">
  </header>

  <body>
    <a id="google-button" class="btn btn-block btn-social btn-google">
      <i class="fa fa-google"></i> Sign in with google
    </a>

    <script>
      $('#google-button').on('click', function() {
        // Initialize with your OAuth.io app public key
        OAuth.initialize('YOUR_OAUTH_KEY');
        // Use popup for OAuth
        OAuth.popup('google').then(google => {
          console.log('google:',google);
          // Retrieves user data from oauth provider
          // Prompts 'welcome' message with User's email on successful login
          // #me() is a convenient method to retrieve user data without requiring you
          // to know which OAuth provider url to call
          google.me().then(data => {
            console.log('me data:', data);
            alert('Google says your email is:' + data.email + ".\nView browser 'Console Log' for more details");
          });
          // Retrieves user data from OAuth provider by using #get() and
          // OAuth provider url
          google.get('/plus/v1/people/me').then(data => {
            console.log('self data:', data);
          })
        });
      })
    </script>
  </body>
</html>

1 Response
Add your response

I am getting Google says your email is:undefined error. How to over come this ?

over 1 year ago ·