Javascript Twitter 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 Twitter on any webpage using OAuth.io
Outcome
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/s3egg5h7/43/
HTML
<a id="twitter-button" class="btn btn-block btn-social btn-twitter">
<i class="fa fa-twitter"></i> Sign in with Twitter
</a>CSS
None
JS
$('#twitter-button').on('click', function() {
// Initialize with your OAuth.io app public key
OAuth.initialize('YOUR_OAUTH_KEY');
// Use popup for OAuth
OAuth.popup('twitter').then(twitter => {
console.log('twitter:', twitter);
// 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
twitter.me().then(data => {
console.log('data:', data);
alert('Twitter 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
twitter.get('/1.1/account/verify_credentials.json?include_email=true').then(data => {
console.log('self data:', data);
})
});
})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
- CreateTwitter app
- Create OAuth.io account
- Link Twitter app keys to oauth.io account
- Create social login button in HTML/CSS/JS with oauth.io app key
1. Create Twitter app
Goto https://apps.twitter.com/ and click 'Sign in' on the top right.
If you are not yet logged in to Twitter, you will be prompted to.
Click on ‘Create App’.
Fill out the form with your details. The website should be https://oauth.io and the Callback URL should be https://oauth.io/auth
Click to agree to the Developer Agreement and then click ‘Create your Twitter application’
You have successfully created your Twitter app. Click on ‘manage keys and access tokens’.
Here you have the Consumer Key and Consumer 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, add the domain name of the webpage where you will the social login button into ‘Domain & URL whitelist’
Click on 'Integrated APIs' on the left menu.
On the 'Integration APIs' dashboard, click 'Add APIs'.
Select 'Twitter' as the OAuth provider that you want to add.
3. Link Twitter app keys to oauth.io account
From your Twitter app page, copy the Twitter ‘Consumer Key’ and 'Consumer Secret' that you noted earlier into 'clientid', and 'clientsecret' fields, respectively and then click 'Save'.
Click on 'Try Auth' to see if you have configured oauth.io to access your Twitter 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/s3egg5h7/43/
<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="twitter-button" class="btn btn-block btn-social btn-twitter">
<i class="fa fa-twitter"></i> Sign in with Twitter
</a>
<script>
$('#twitter-button').on('click', function() {
// Initialize with your OAuth.io app public key
OAuth.initialize('YOUR_OAUTH_KEY');
// Use popup for OAuth
OAuth.popup('twitter').then(twitter => {
console.log('twitter:', twitter);
// 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
twitter.me().then(data => {
console.log('data:', data);
alert('Twitter 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
twitter.get('/1.1/account/verify_credentials.json?include_email=true').then(data => {
console.log('self data:', data);
})
});
})
</script>
</body>
</html>Written by data_me
Related protips
Have a fresh tip? Share with Coderwall community!
