Last Updated: October 17, 2018
·
998
· data_me

Javascript Coinbase 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 Coinbase on any webpage.

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/4monb1nu/10/

HTML

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

CSS

None

JS

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

External Resources

General Steps

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

1. Create Coinbase app

Go to https://developers.coinbase.com/ and click 'My Apps' on the top right.

Screen Shot 2018-02-15 at 12.22.20 PM.png

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

Scroll down the page to 'My OAuth2 Applications' and click on ‘+ New OAuth2 Application’.

Screen Shot 2018-02-15 at 11.53.25 AM.png

Fill out the form with your details. Add https://oauth.io as Website and enter https://oauth.io/auth under Permitted Redirect URIs.

Screen Shot 2018-02-15 at 11.56.55 AM.png

Click 'Create Application'

Screen Shot 2018-02-15 at 11.57.09 AM.png

You have successfully created your Coinbase app. Now you have your Client ID and Client Secret which you need to add to your OAuth.io dashboard.

Screen Shot 2018-02-15 at 12.33.31 PM.png

2. Create oauth.io Account

Create an account at 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 'Coinbase' as the OAuth provider that you want to add.

Screen Shot 2018-02-15 at 12.40.39 PM.png

3. Link Coinbase app keys to OAuth.io account

From your Coinbase app page, copy the Coinbase ‘Client ID’ and 'Client Secret' that you noted earlier into 'clientid', and 'clientsecret' fields, respectively and then choose your scopes. Click 'Save changes'.

Screen Shot 2018-02-15 at 12.43.21 PM.png

Click on 'Try Auth' to see if you have configured OAuth.io to access your Coinbase 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/4monb1nu/10/

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

    <script>
      $('#coinbase-button').on('click', function() {
        // Initialize with your OAuth.io app public key
        OAuth.initialize('YOUR_OAUTH_KEY');
        // Use popup for oauth
        OAuth.popup('coinbase').then(coinbase => {
          console.log('coinbase:', coinbase);
          // 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
          coinbase.me().then(data => {
            console.log('me data:', data);
            alert('Coinbase 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
          coinbase.get('/api/v1/users').then(data => {
            console.log('self data:', data);
          })    
        });
      })
    </script>
  </body>
</html>