sjbwcq
Last Updated: June 12, 2018
·
950
· donaltobin

Javascript Github Social Login Button for OAuth

Purpose

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

Outcome

github.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://jsfiddle.net/dg9h7dse/30/

HTML

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

CSS

None

JS

$('#github-button').on('click', function() {
  // Initialize with your OAuth.io app public key
  OAuth.initialize('YOUR_OAUTH_KEY');
  // Use popup for oauth
  // Alternative is redirect
  OAuth.popup('github').then(github => {
    console.log('github:', github);
    // 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
    github.me().then(data => {
      console.log('me data:', data);
      alert('GitHub 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
    github.get('/user').then(data => {
      console.log('self data:', data);
    })
  });
})

External Resources

General Steps

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

1. Create Github app

Go to https://github.com/settings/developers

If you are not yet logged in to Github, you will be prompted to.

Click on ‘Register a new application’.

github1.png

Fill out the form with your details. The Homepage URL should be https://oauth.io and the Authorization callback URL should be https://oauth.io/auth

github2.png

Click ‘Register application’

You have successfully created your Github app. Here you have the Client ID and Client Secret which you need to add to your OAuth.io dashboard.

github3.png

2. Create oauth.io Account

Create an account at OAuth.io

oauthio_signup.png

On the main dashboard, click on 'Integrated APIs' on the left menu.

oauthio_general.png

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

oauthio_api_integration.png

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

github4.png

3. Link Github app keys to oauth.io account

From your Github app page, copy the Github ‘Client ID’ and 'Client Secret' that you noted earlier into 'clientid', and 'clientsecret' fields, respectively, select your desired scope and then click 'Save'.

github5.png

Click on 'Try Auth' to see if you have configured oauth.io to access your Github 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/dg9h7dse/30/

<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="github-button" class="btn btn-block btn-social btn-github">
      <i class="fa fa-github"></i> Sign in with Github
    </a>

    <script>
      $('#github-button').on('click', function() {
        // Initialize with your OAuth.io app public key
        OAuth.initialize('YOUR_OAUTH_KEY');
        // Use popup for oauth
        // Alternative is redirect
        OAuth.popup('github').then(github => {
          console.log('github:', github);
          // 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
          github.me().then(data => {
            console.log('me data:', data);
            alert('GitHub 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
          github.get('/user').then(data => {
            console.log('self data:', data);
          })
        });
      })
    </script>
  </body>
</html>
Say Thanks
Respond
Awesome Job

7ef87ac6 676e 11e8 9287 dbaaf6bd436a
Full Stack Engineer
·
Boston, San Francisco, Remote
·
Full Time