How To Add Coinbase Social Login Button
Purpose
Hi there! In this post, we’ll show you how easy it is to add a Coinbase login button to your app or website 🙂
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/1/
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('gZeK0rjdjMpH70JACRM_kaKLUIc');
// Use popup for OAuth
OAuth.popup('coinbase').then(coinbase => {
console.log(coinbase);
// Retrieves user data from oauth provider
console.log(coinbase.me());
});
})
External Resources
- 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
- Create Coinbase app
- Create OAuth.io[https://oauth.io/?utm_source=oauthio_blog&utm_medium=blog_post&utm_campaign=javascript_oauth_github] account
- Link Coinbase app keys to OAuth.io account
- 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.
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’.
Fill out the form with your details. Add https://oauth.io as Website and enter https://oauth.io/auth under Permitted Redirect URIs.
Click ‘Create Application’
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.
2. Create oauth.io Account
Create an account at https://oauth.io/signup.
On the main dashboard, click on ‘Integrated APIs’ on the left menu.
On the ‘Integration APIs’ dashboard, click ‘Add APIs’.
Select ‘Coinbase’ as the OAuth provider that you want to add.
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 ‘client_id’, and ‘client_secret’ fields, respectively and then choose your scopes. Click ‘Save changes’.
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/1/
<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);
// Retrieves user data from oauth provider
console.log(coinbase.me());
});
})
</script>
</body>
</html>
Should you have any further questions, just ask our team on our [live chat][https://oauth.io/?utm_source=oauthio_blog&utm_medium=blog_post&utm_campaign=javascript_oauth_github].
