Objetivo

O guia passo a passo mais simples de Javascript com código de trabalho completo (<15 linhas) para criar um botão de inicialização de login social para Instagram em qualquer página da web usando OAuth.io

Código Totalmente Funcional

Para demonstrar a simplicidade desta solução, vamos dar uma olhada no código final que criamos. Você pode experimentar o código instantaneamente aqui: 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

Nenhum

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);
    })
  });
})

Fontes externas

* 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

Passos Gerais

Criar aplicativo Instagram
Crie uma conta oauth.io
Vincule as chaves do aplicativo Instagram à conta oauth.io
Crie um botão de login social em HTML / CSS / JS com a chave de aplicativo oauth.io

1. Crie um aplicativo Instagram

Vá para https://www.instagram.com/developer/ e clique em ‘Log in’ no canto superior direito.

Se você ainda não estiver conectado ao Instagram, será solicitado.

Clique em ‘Gerenciar clientes’ no canto superior direito.

Em seguida, clique em ‘Registrar um novo cliente’

Preencha o formulário com seus dados. Certifique-se de preencher URIs de redirecionamento válidos exatamente como mostrado no formulário abaixo: https://oauth.io/auth

Clique na guia ‘Segurança’ e desmarque ‘Desativar OAuth implícito:’, pois você usará o snippet Javascript no cliente.

Clique em ‘Registrar’ e seu Instagram será criado. Você pode vê-lo no painel ‘Gerenciar clientes’. Clique em ‘Gerenciar’ no canto superior direito do seu aplicativo.

Clique em ‘Gerenciar’. Aqui você tem o ID do cliente e a chave secreta do cliente que você precisa adicionar ao seu painel OAuth.io.

2. Crie uma conta oauth.io

Crie uma conta em OAuth.io .

No painel principal, adicione o nome de domínio da página da web onde você colocará o botão de login social em ‘Domain & URL whitelist’

Clique em ‘APIs integradas’ no menu à esquerda.

No painel ‘APIs de integração’, clique em ‘Adicionar APIs’.

Selecione ‘Instagram’ como o provedor OAuth que você deseja adicionar.

3. Vincule as chaves do aplicativo Instagram à conta oauth.io

Na página do aplicativo Instagram, copie o Instagram ‘ID do cliente’ e ‘Segredo do cliente’ que você anotou anteriormente nos campos ‘ ID do cliente ‘ e ‘ segredo do cliente ‘, respectivamente, selecione o escopo desejado e clique em ‘Salvar’.

Clique em ‘Try Auth’ para ver se você configurou OAuth.io para acessar seu aplicativo Instagram corretamente.

4. Crie um botão de login social em HTML / CSS / JS com a chave de aplicativo oauth.io

Hospede o código abaixo em seu servidor. Se você ainda não tem um servidor, pode testar o código aqui: 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>