A autenticação com é 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 como servidor. Os serviços de identidade do Google fornecem o Login do Google Ruby on Rails 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 para adicionar em nosso , bem como . client_id cliente servidor Para criar um aplicativo, vá para o Console do desenvolvedor do Google Selecione . Antes de fazer isso, você precisa configurar seu . Criar credenciais > ID do cliente OAuth tela de consentimento Ao criar o client_id, certifique-se de incluir o e a porta na qual seu cliente está sendo executado na origem autorizada do Javascript para desenvolvimento e sua URL de produção. host local Feito isso, você terá seu no formato client_id 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 em seu se estiver usando ou se estiver usando <script src="https://accounts.google.com/gsi/client" async defer></script> index.html React.js _app.jsx 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", }); }, []); é adicionado para mostrar que google foi definido globalmente em nosso google global index.html o método cria uma instância de cliente Entrar com o Google com base em determinados campos. é um campo obrigatório que obtemos ao criar o aplicativo google, é a função JavaScript ( aqui ) que manipula o token de ID retornado do prompt do One Tap ou da janela pop-up. google.accounts.id.initialize client_id callback signInCallback 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 . Você pode dar uma olhada em mais configurações false aqui. O método renderiza um botão Entrar com o Google. Você pode brincar com as configurações google.accounts.id.renderButton aqui. é o elemento HTML. Ao adicionar o código abaixo ao HTML da sua página da Web, document.getElementById("signInDiv") 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 , signInCallback é nossa função de retorno de chamada que pode ser definida como Etapa 3 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, é uma URL de servidor que criaremos na próxima etapa localhost:3000/user/google O é uma resposta do Google quando clicamos no botão Sign In ou One Tap. resultado O compreende dois campos resultado : este campo é o token de ID como uma string JSON Web Token (JWT) codificada em base64 credencial : mostrando como a credencial é selecionada. mais sobre isso . select_by 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, , adicione um método . app/controllers/users/user_controller.rb google adicione a rota , em . users/user#google_oauth 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 , que é a joia oficial do Google para verificar os tokens de ID emitidos. google_auth Isso pode ser feito facilmente usando Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID" em que é o JWT recebido do cliente e é um ID de cliente do aplicativo do Google. access_token aud 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": "your-email@gmail.com", "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 : Certifique-se de ter instalado em seu servidor e adicione este PS rack-cors 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 : 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. PPS 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
