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 Github em qualquer página da web usando OAuth.io

Resultado

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

HTML

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

CSS

Nenhum

JS

$('#github-button').on('click', function() {
  // Initialize with your OAuth.io app public key
  OAuth.initialize('YOUR_OAUTH_KEY');
  // Use popup for oauth
  // Alternative is redirect
  OAuth.popup('github').then(github => {
    console.log('github:', github);
    // Retrieves user data from oauth provider
    // 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
    github.me().then(data => {
      console.log('me data:', data);
      alert('GitHub 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
    github.get('/user').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 Github
Criar conta OAuth.io
Vincular as chaves do aplicativo Github à conta oauth.io
Crie um botão de login social em HTML / CSS / JS com a chave de aplicativo oauth.io

1. Crie o aplicativo Github

Acesse https://github.com/settings/developers

Se você ainda não está logado no Github, será solicitado.

Clique em ‘Registrar um novo aplicativo’.

Preencha o formulário com seus dados. O URL da página inicial deve ser https://oauth.io e o URL de retorno de chamada de autorização deve ser https://oauth.io/auth

Clique em ‘Registrar aplicativo’

Você criou seu aplicativo Github com sucesso. 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 ‘Github’ como o provedor OAuth que deseja adicionar.

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

A partir da página do aplicativo Github, copie o Github ‘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 Github 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/dg9h7dse/30/

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

    <script>
      $('#github-button').on('click', function() {
        // Initialize with your OAuth.io app public key
        OAuth.initialize('YOUR_OAUTH_KEY');
        // Use popup for oauth
        // Alternative is redirect
        OAuth.popup('github').then(github => {
          console.log('github:', github);
          // Retrieves user data from oauth provider
          // 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
          github.me().then(data => {
            console.log('me data:', data);
            alert('GitHub 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
          github.get('/user').then(data => {
            console.log('self data:', data);
          })
        });
      })
    </script>
  </body>
</html>