adicionando o login do google ao seu webapp – pt 1

Danny Perez Seg. 23 de jul · 5 min ler

Ficou preso em uma toca de coelho descobrindo como adicionar "Login com o Google" ao seu aplicativo da web? Nesta série, cobrirei:

  • por que você pode querer usar a biblioteca Sign-In for Website JS e começar a usá-la
  • Adicionando a biblioteca via javascript
  • adicionando-o a um projeto existente (angular e reagir)

Seus docs lhe dão um lugar decente para começar, se você sabe o que está procurando, mas há algumas áreas onde seus documentos e outros guias on-line podem ser confusos. Há também uma orientação mínima sobre como usá-lo nos projetos existentes.

  • Eu deveria estar seguindo os documentos do Google Identity ou preciso do Google Sign-in para a Web? ?
  • Espere, por que esses dois guias são tão diferentes? Eles até carregam bibliotecas diferentes!
  • Isso deve ser simples! Eu só estou tentando carregar um avatar de usuários !!

A resposta para "Como faço para adicionar login com o Google?" Resume-se a 1 pergunta que você precisa ser capaz de responder: o que exatamente você está tentando fazer?

  • Você quer apenas ver o nome e a foto dos usuários, talvez o e-mail deles? Use a biblioteca Sign-In for Websites (guia completo abaixo).
  • Você tem seu próprio banco de dados de usuários e deseja oferecer o login do Google como uma opção extra? Este é o Login federado e você deseja usar o protocolo OpenID Connect . Isso é usado por plataformas como auth0, firebase e oneidentity.
  • Você quer interagir com a conta do Google dos usuários e fazer coisas como ver a agenda ou criar um documento do Google? Você precisará usar o fluxo de trabalho do OAuth .

Para os fins desta série, vou explorar quando você deve usar a biblioteca Sign-In for Websites, que usa o protocolo OpenID Connect (também usado por sistemas de Login Federado) – essa biblioteca pode ser facilmente mal entendida, mas ainda é incrivelmente útil. O objetivo desta biblioteca de autenticação é permitir que você identifique um usuário com a conta do Google. É isso aí.

Então, quando devo usá-lo?

Boas razões para usá-lo:

  • você tem algum conteúdo armazenado em um serviço de back-end que você entrega por meio de uma API somente depois que o usuário fez login
  • você só precisa oferecer suporte aos usuários do Google / G-Suite
  • você não precisa autorizar usuários (por exemplo, permitir que alguns usuários sejam administradores)
  • seu site é público
  • você tem um aplicativo de uma única página

Use casos em que vale a pena considerar o login federado:

  • você tem conteúdo de usuário pré-existente armazenado em um serviço de back-end
  • você tem um site interno que deseja restringir aos usuários de um domínio específico. (por exemplo, apenas usuários de @ example.com devem ver)
  • você quer impedir que as pessoas vejam sua página, a menos que tenham efetuado login. O melhor que você pode fazer com essa biblioteca é mostrar / ocultar elementos na página se o usuário estiver conectado, mas isso é suficiente se você carregar dados de uma API depois um usuário efetuou login.

A biblioteca foi projetada para ser usada com HTML / JS e interage apenas com sua página por meio do botão "Fazer login com o Google". Você pode integrar isso com outros frameworks, como o Angular / React, que abordarei na próxima parte desta série.

Adicionando o login do Google passo a passo

1. Hello World HTML

Para começar, tudo que você precisa é de um arquivo index.html.

2. Adicione o botão de login do Google

Antes de adicionar o botão, você primeiro precisa criar um ID / segredo de cliente, que é uma maneira de identificar que você, o desenvolvedor, está permitindo que os usuários obtenham as informações de identidade do Google e as entreguem no seu site.

Criando credenciais para o Login

Aqui está o que eu coloquei para esta demonstração:

Nome: google-auth-demo
Origens de Javascript autorizadas: http: // localhost: 8080
URIs de redirecionamento autorizados: vazio

* Uma nota sobre as origens do Javascript: se você tem um arquivo HTML simples que você carrega no seu navegador usando um caminho de arquivo como /home/dperez/index.html, isso não funcionará. Você precisará "veicular" seu site em seu computador para ter um URL, mesmo que seja apenas localhost. Você pode usar python -m SimpleHTTPServer 8080 (que é comumente disponível) para servir seu diretório atual ou você pode usar um pacote npm como http-server .

Você receberá um ID de cliente e um segredo de cliente. Estes são 2 identificadores para o seu Oauth Client. Neste ponto, você autorizou esse ID de cliente a aceitar logins e retornar as informações dos usuários. Copie-os. Se você acidentalmente clicar fora da tela, poderá copiá-los novamente mais tarde.

Adicione o botão + biblioteca + credenciais ao seu HTML

Na sua página index.html, adicione o seguinte à sua página HTML:

A tag de script pega a biblioteca do Google que lê sua tag <meta> para usar como o ID do cliente e, em seguida, reformula automaticamente o botão com a classe CSS .g-signin2 .

Nesse ponto, se você atualizar sua página, deverá ver um botão de login. Se você clicar nele, passará pelo fluxo do Login do Google em um pop-up e, finalmente, voltará ao site e o botão dirá "Conectado".

Ótimo, estamos a maior parte do caminho! Mas na sua forma atual, isso ainda é inútil.

3. Identifique o usuário

Atualize o g-signin2 div para incluir o atributo data-onsuccess :

 <div class = "g-signin2" data-onsuccess = "onSignIn"> </ div> 

Esse atributo contém o nome da função que será chamada assim que um usuário fizer login com o Google.

Crie uma função chamada onSignIn

Sua função onSignIn será chamada com um argumento contendo as informações fornecidas pelo Google. Se você atualizar a página, você notará que

  1. Você está automaticamente conectado
  2. O botão é atualizado logo após a atualização (atraso de 1 s)

Se você abrir seu console de javascript, verá as informações dos usuários impressas:

Esse é o perfil básico que contém uma série de valores que me identificam como usuário. Em qualquer circunstância normal, esse objeto teria campos como name ou emailemail , mas por alguma razão desconhecida (eu gostaria de ter a resposta, mas eles também não deram uma resposta ), sua tagarelice – mas pelo menos é consistente e não mudou.

Você pode obter os dados diretamente fazendo googleUser.getBasicProfile()['U3'] ou usar a abordagem mais legível usando as funções como googleUser.getBasicProfile().getName() googleUser.getBasicProfile().getEmail() ou googleUser.getBasicProfile().getEmail() . ( Veja aqui os documentos de referência da API do cliente javascript )

4. Sair

Adicione um botão de logout após o usuário ter feito login adicionando um botão em seu index.html e o manipulador de cliques em seu javascript.

Ótimo! Neste momento, adicionamos um botão Login com o Google e podemos identificar o usuário por nome / e-mail. Além disso, é isso. Isso é tudo que esta biblioteca pode ajudá-lo a fazer.

… Mas e as coisas básicas, como salvar os dados dos usuários no backend? ou mostrando uma página de administração? Por que isso não está nos docs ?!

Isso será abordado na próxima postagem usando a biblioteca js para adicioná-la ao seu site sem HTML

Se você gostou do post, dê um pouco e me siga aqui no Medium para não perder o próximo post da série.