difz1q
Last Updated: October 17, 2018
·
3.561K
· donaltobin

JavaScript Instagram 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 Instagram on any webpage using OAuth.io

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/9b9enpwe/74/

HTML

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

CSS

None

JS

$('#instagram-button').on('click', function() {
  // Initialize with your OAuth.io app public key
  OAuth.initialize('YOUR_OAUTH_KEY');
  // Use popup for OAuth
  OAuth.popup('instagram').then(instagram => {
    console.log('instagram:', instagram);
    // Prompts 'welcome' message with User's name on successful login
    // #me() is a convenient method to retrieve user data without requiring you
    // to know which OAuth provider url to call
    instagram.me().then(data => {
      console.log('me data:', data);
      alert('Instagram says your name is ' + data.name + ".\nView browser 'Console Log' for more details");
    });
    // Retrieves user data from OAuth provider by using #get() and
    // OAuth provider url
    instagram.get('/v1/users/self').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 Instagram app
  2. Create oauth.io account
  3. Link Instagram app keys to oauth.io account
  4. Create social login button in HTML/CSS/JS with oauth.io app key

1. Create Instagram app

Goto https://www.instagram.com/developer/ and click 'Log in' on the top right.

Screen Shot 2017-12-21 at 5.59.21 PM.png

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

Click on ‘Manage Clients’ on top right.

Screen Shot 2017-12-21 at 6.01.39 PM.png

Then click on ‘Register a New Client’

Screen Shot 2017-12-21 at 6.21.39 PM.png

Fill out the form with your details. Make sure to fill in Valid redirect URIs exactly as shown in form below: https://oauth.io/auth

Screen Shot 2017-12-21 at 6.27.37 PM.png

Click on the ‘Security’ tab and uncheck ‘Disable implicit OAuth:’ since you will be using Javascript snippet on client side.

Screen Shot 2017-12-21 at 6.30.37 PM.png

Hit ‘Register’ and your Instagram will be created. You can see it in your ‘Manage Clients’ dashboard. Click on ‘Manage’ on the top right of your app.

Screen Shot 2017-12-21 at 6.32.40 PM.png

Click on 'Manage'. Here you have the Client ID and Client Secret which you need to add to your OAuth.io dashboard.

Screen Shot 2017-12-21 at 6.37.19 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 'Instagram' as the OAuth provider that you want to add.

Screen Shot 2017-12-21 at 6.41.37 PM.png

3. Link Instagram app keys to oauth.io account

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

Screen Shot 2017-12-21 at 6.44.23 PM.png

Click on 'Try Auth' to see if you have configured OAuth.io to access your Instagram 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/9b9enpwe/74/

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

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