Como implementar o login com um toque do Google com Ruby on Rails

A autenticação com o Login do Google é uma prática comum em aplicativos modernos. Nesta postagem do blog, discutiremos como integrar os serviços de identidade do Google em qualquer um dos seus aplicativos front-end que usam Ruby on Rails como servidor. Os serviços de identidade do Google fornecem

1. Botão de login/cadastro personalizado

   

Entrar com um toque

Vamos mergulhar!!

Etapa 1: crie um aplicativo no Google Developer Console.

Para usar o Google Sign In ou One Tap, precisamos de um client_id para adicionar em nosso cliente , bem como servidor .

• Para criar um aplicativo, vá para o Console do desenvolvedor do Google

• Selecione Criar credenciais > ID do cliente OAuth . Antes de fazer isso, você precisa configurar seu tela de consentimento .

• Ao criar o client_id, certifique-se de incluir o host local e a porta na qual seu cliente está sendo executado na origem autorizada do Javascript para desenvolvimento e sua URL de produção.

  
  

• Feito isso, você terá seu client_id no formato 1234567890-abcdefg.apps.googleusercontent.com

  
  

Para obter mais detalhes sobre como configurar o aplicativo, você pode ler aqui .

Passo 2: Configurando a Biblioteca no Cliente

Para carregar a biblioteca cliente, adicione <script src="https://accounts.google.com/gsi/client" async defer></script> em seu index.html se estiver usando React.js ou _app.jsx se estiver usando Next.js.

Etapa 3: exibir o botão de login personalizado

 useEffect(() => { /* global google */ google.accounts.id.initialize({ client_id: "YOUR_GOOGLE_CLIENT_ID", callback: signInCallback, cancel_on_tap_outside: false, }); google.accounts.id.renderButton(document.getElementById("signInDiv"), { theme: "outline", size: "large", }); }, []);

• google global é adicionado para mostrar que google foi definido globalmente em nosso index.html

  
  

• google.accounts.id.initialize o método cria uma instância de cliente Entrar com o Google com base em determinados campos. client_id é um campo obrigatório que obtemos ao criar o aplicativo google, callback é a função JavaScript ( aqui signInCallback ) que manipula o token de ID retornado do prompt do One Tap ou da janela pop-up.

  
  

• Por padrão, se um usuário clicar em qualquer lugar da tela, um resfriamento exponencial será aplicado ao prompt One Tap. Caso deseje que o prompt esteja sempre visível, defina esse valor como false . Você pode dar uma olhada em mais configurações aqui.

  
  

• O método google.accounts.id.renderButton renderiza um botão Entrar com o Google. Você pode brincar com as configurações aqui.

  
  

• document.getElementById("signInDiv") é o elemento HTML. Ao adicionar o código abaixo ao HTML da sua página da Web,

 return ( <div className="App"> <div id="signInDiv" /> </div> );

você poderá ver um botão personalizado como este

Etapa 4: Exibindo o prompt de um toque

• Para mostrar o prompt, adicione isso no useEffect google.accounts.id.prompt();

Etapa 5: Definindo a função de retorno de chamada

• Conforme mencionado na Etapa 3 , signInCallback é nossa função de retorno de chamada que pode ser definida como

 const signInCallback = (result) => { if (result.credential) { const params = { token: result.credential }; axios .post("http://localhost:3000/user/google", params) .then((res) => { const { authToken, ...userInfo } = res.data.data; // set token in local storage/cookies based on your authentication method // redirect to the authenticated page }) .catch((err) => console.log(err)); } };

Onde,

• localhost:3000/user/google é uma URL de servidor que criaremos na próxima etapa

  
  

• O resultado é uma resposta do Google quando clicamos no botão Sign In ou One Tap.

  
  

• O resultado compreende dois campos

  • credencial : este campo é o token de ID como uma string JSON Web Token (JWT) codificada em base64

  • select_by : mostrando como a credencial é selecionada. mais sobre isso aqui .

    
    

• Pegamos a credencial do resultado e a passamos como um parâmetro para o nosso servidor.

Etapa 6: Adicionando o controlador e a rota ao servidor

Vamos criar uma rota no servidor para atender a requisição do cliente. Antes de fazermos isso, precisamos criar um controlador que aceite o JWT do cliente.

• Crie um arquivo, app/controllers/users/user_controller.rb , adicione um método google .

  
  

• adicione a rota users/user#google_oauth , em config/routes.rb .

  
  

• Depois que a rota recebe o JWT, a primeira e mais importante etapa é verificar se o JWT foi validado. Para isso, podemos usar a gema google_auth , que é a joia oficial do Google para verificar os tokens de ID emitidos.

  
  

• Isso pode ser feito facilmente usando

 Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID"

em que access_token é o JWT recebido do cliente e aud é um ID de cliente do aplicativo do Google.

• Se o token for válido, ele retornará um hash como este ou lançará uma exceção

 { "iss": "https://accounts.google.com", "nbf": 12345678, "aud": "YOUR_GOOGLE_CLIENT_ID, "sub": "1112223333444", "email": "[email protected]", "email_verified": true, "azp": "YOUR_GOOGLE_CLIENT_ID", "name": "First Last", "picture": "https://lh3.googleusercontent.com/a/AItbvmnvsIQFJw", "given_name": "First", "family_name": "Last", "iat": 1653797115, "exp": 1653805725, "jti": "8ffa19190gngd46745ff558821f953802" }

• Se o token for válido, você pode verificar em seu banco de dados se o usuário existe ou não e, consequentemente, criar um usuário. Feito isso, você pode conectar o usuário ou redirecioná-lo com base no seu método de autenticação.

  
  

 # users/user_controller.rb def google begin data = Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID" // find the user in the data // if the user does not exist, create a user using data // sign the user (based on your authentication method) rescue StandardError => e end end

 # config/routes.rb scope :user do post 'google' => 'users#user_controller.rb' end

PS : Certifique-se de ter rack-cors instalado em seu servidor e adicione este aplicativo.rb

 config.middleware.insert_before 0, Rack::Cors do allow do origins '*' resource( '*', headers: :any, expose: ['Authorization'], methods: %i[get patch put delete post options show] ) end end

para evitar enfrentar erros como este

PPS : se o seu aplicativo usa a biblioteca da plataforma JavaScript de login do Google para a web, certifique-se de migrá-la para o serviço de identidade do Google, pois a anterior será descontinuada. Link

Espero que este artigo ajude você a integrar o One Tap Login em seus projetos. Para informações mais detalhadas, você pode conferir o oficial documentos .

Também publicado aqui