Objetivo

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

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/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

Nenhum

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

Fontes externas

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 Coinbase
Criar conta OAuth.io
Vincular as chaves do aplicativo Coinbase à conta OAuth.io
Crie um botão de login social em HTML / CSS / JS com a chave do aplicativo OAuth.io

1. Crie o aplicativo Coinbase

Vá para https://developers.coinbase.com/ e clique em ‘Meus aplicativos’ no canto superior direito.

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

Role para baixo na página até ‘Meus aplicativos OAuth2’ e clique em ‘+ Novo aplicativo OAuth2’.

Preencha o formulário com seus dados. Adicione https://oauth.io como site e insira https://oauth.io/auth em URIs de redirecionamento permitidos.

Clique em ‘Criar aplicativo’

Você criou seu aplicativo Coinbase com sucesso. Agora você tem seu ID de cliente e segredo do cliente, que precisa adicionar ao 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 ‘Coinbase’ como o provedor OAuth que deseja adicionar.

3. Vincule as chaves do aplicativo Coinbase à conta OAuth.io

Na página do aplicativo Coinbase, copie o ‘ID do cliente’ e o ‘segredo do cliente’ da Coinbase que você anotou anteriormente nos campos ‘ id do cliente ‘ e ‘ segredo do cliente ‘, respectivamente e, em seguida, escolha seus escopos. Clique em ‘Salvar alterações’.

Clique em ‘Try Auth’ para ver se você configurou OAuth.io para acessar seu aplicativo Coinbase 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/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>