Propósito

O guia Javascript passo a passo mais simples com códigos que funcionam (<15 linhas) para criar um Botão Social Bootstrap de Login com Google em qualquer página usando Oauth.io

Resultado

Código totalmente funcionando

Para demonstrar a simplicidade dessa solução vamos ver o código final criado. Você pode testar o código automaticamente aqui.

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('HwAr2OtSxRgEEnO2-JnYjsuA3tc');
  // 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);
    })
	});
})

Confira todo o código: https://jsfiddle.net/dg9h7dse/30/

Fontes Externas

Passos gerais:

  1. Criar aplicativo Google
  2. Criar conta OAuth.io
  3. Conectar as chaves do aplicativo Google com a conta da oauth.io
  4. Criar botão social de login em HTML/CSS/JS com a app key do oauth.io

1. Criar aplicativo Google

Acesse https://console.developers.google.com, faça o login ou crie uma nova conta

Clique em ‘Criar Projeto’ no canto superior esquerdo

Dê um nome ao seu projeto e clique “Criar”

Veja se você está no projeto que acabou de criar e então clique em “Credentials”

Selecione a tela de consentimento do OAuth e coloque seu email e nome do produto. Clique em salvar.

Clique na aba de credenciais e então clique em “Create credentials’ e selecione ‘OAuth client ID’ no menu suspenso.

Selecione 'Web application' e então adicione https://oauth.io e https://oauth.io/authPara 'Authorized JavaScript origins' e 'Authorized redirect URLs', respectivamente. Clique em criar.

Agora você tem sua client ID e client secret que você adicionará em seu painel OAuth.io.

2. Criar conta OAuth.io

Crie uma conta em OAuth.io

No painel principal, adicione o nome do domínio da página onde o botão social será adicionado em ‘Domain & URL whitelist’

Clique em 'Integrated APIs' no menu esquerdo.

No painel 'Integration APIs' clique em 'Add APIs'

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

3. Conectar as app keys do Google com a conta da oauth.io

Da sua página Google, copie o 'client ID' e "Client Secret" que você anotou antes nos campos 'clientid' e 'clientsecret', respectivamente, selecione o escopo e então clique em 'Salvar'.

Clique em 'Try Auth' para ver se você configurou  corretamente o oauth.io para acessar seu app Google corretamente.

4. Criar botão social de login em HTML/CSS/JS com a app key do oauth.io

Hospede o código abaixo em seu servidor. Se você ainda não tem um servidor, pode testar o código aqui:

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

    <script>
      $('#google-button').on('click', function() {
        // Initialize with your OAuth.io app public key
        OAuth.initialize('YOUR_OAUTH_KEY');
        // Use popup for OAuth
        OAuth.popup('google').then(google => {
          console.log('google:',google);
          // 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
          google.me().then(data => {
            console.log('me data:', data);
            alert('Google 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
          google.get('/plus/v1/people/me').then(data => {
            console.log('self data:', data);
          })
        });
      })
    </script>
  </body>
</html>