o-auth-google-dbc-1 v1.0.7
Como Usar a API de Login do Google para Autenticação e Cadastro
Introdução
Esta documentação fornece instruções para integrar o login do Google ao seu sistema, permitindo que os usuários façam login ou se cadastrem com suas contas do Google. Usamos a biblioteca @react-oauth/google no React para realizar a autenticação.
Requisitos
Antes de começar, você precisará:
- Uma conta no Google Cloud Console.
- Um Client ID da API OAuth 2.0 do Google.
- Um projeto React configurado.
Passos para Obter o Client ID
- Acesse o Google Cloud Console.
- Crie um novo projeto ou selecione um projeto existente.
- No menu, vá para APIs e Serviços > Credenciais.
- Clique em Criar credencial > ID do cliente OAuth 2.0.
- Configure a tela de consentimento OAuth se ainda não tiver feito isso.
- No tipo de aplicativo, selecione Aplicativo da Web.
- Defina as URIs de redirecionamento autorizados para o seu ambiente (por exemplo,
http://localhost:3000). - Salve e copie o Client ID gerado.
Instalação da Biblioteca
Instale a biblioteca @react-oauth/google no seu projeto React:
npm install @react-oauth/google
Caso não saiba a versão exata, você pode consultar o npm com o seguinte comando para verificar as versões disponíveis: npm view @react-oauth/google versions
Implementação do Componente de Login
Passo 1: Utilizar o Componente de Login com o Google Você não precisa criar o componente manualmente, pois já disponibilizamos uma versão pronta do componente no npm. O exemplo abaixo é apenas ilustrativo, mostrando como o componente foi implementado e como você pode utilizá-lo.
Basta instalar a biblioteca publicada no npm e utilizá-la diretamente no seu projeto.
Exemplo do componente de login com Google:
import React from 'react';
import { GoogleOAuthProvider, GoogleLogin, CredentialResponse } from '@react-oauth/google';
interface GoogleLoginComponentProps {
clientId: string;
onSuccess: (response: CredentialResponse) => void;
onError?: () => void;
}
const GoogleLoginComponent: React.FC<GoogleLoginComponentProps> = ({ clientId, onSuccess, onError }) => {
return (
<GoogleOAuthProvider clientId={clientId}>
<GoogleLogin
onSuccess={(response) => onSuccess(response)}
onError={() => {
if (onError) {
onError();
} else {
console.error('Erro ao fazer login com o Google');
}
}}
/>
</GoogleOAuthProvider>
);
};
export default GoogleLoginComponent;Passo 2: Utilizando o Componente no App Agora, no componente principal (ou onde for necessário), você pode usar este componente para lidar com o login.
import React from 'react';
import GoogleLoginComponent from './GoogleLoginComponent';
const App: React.FC = () => {
const handleSuccess = (response: any) => {
console.log('Login com sucesso:', response);
// Aqui você pode tratar o token e as informações do usuário
};
const handleError = () => {
console.error('Erro no login com o Google');
};
return (
<div>
<h1>Login com Google</h1>
<GoogleLoginComponent
clientId="SUA_GOOGLE_CLIENT_ID"
onSuccess={handleSuccess}
onError={handleError}
/>
</div>
);
};
export default App;Passo 3: Tratamento do Token Após o login bem-sucedido, o Google retorna um token JWT. Você pode usá-lo para autenticar o usuário no seu sistema, enviando-o ao seu servidor para validação e/ou criação de conta.
const handleSuccess = (response: any) => {
const token = response.credential;
console.log('Token JWT recebido:', token);
// Envie o token para o seu backend para autenticar ou registrar o usuário
fetch('https://seuservidor.com/api/login-google', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ token }),
})
.then(res => res.json())
.then(data => {
console.log('Usuário autenticado ou registrado com sucesso:', data);
})
.catch(error => {
console.error('Erro ao autenticar:', error);
});
};Fluxo de Autenticação 1. O usuário clica no botão de login do Google. 2. O Google autentica o usuário e retorna um token JWT. 3. O token JWT é enviado para o seu backend. 4. O backend valida o token e retorna as informações do usuário ou registra o usuário se for um novo cadastro. Segurança Validação do Token No backend, é fundamental validar o token JWT recebido. Isso pode ser feito usando bibliotecas como google-auth-library no Node.js. Abaixo está um exemplo de como fazer isso:
const { OAuth2Client } = require('google-auth-library');
const client = new OAuth2Client(CLIENT_ID);
async function verify(token) {
const ticket = await client.verifyIdToken({
idToken: token,
audience: CLIENT_ID, // Especifique o CLIENT_ID do seu projeto
});
const payload = ticket.getPayload();
return payload;
}Após validar o token, você pode usar as informações do payload para autenticar o usuário em sua aplicação.
Conclusão Essa integração permite que você adicione uma forma simples e segura de autenticação e registro de usuários usando o Google. Lembre-se de sempre validar o token no backend para garantir a segurança do processo de autenticação.
Referências Google Identity Platform OAuth 2.0 Documentation @react-oauth/google
Um breve exemplo usando o login do google em um formulario
Passo 1: Criar o Componente do Formulário de Login
import React, { useState } from 'react';
import { GoogleOAuthProvider, GoogleLogin, CredentialResponse } from '@react-oauth/google';
const LoginForm: React.FC = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
// Função para tratar o sucesso do login via Google
const handleGoogleSuccess = (response: CredentialResponse) => {
const token = response.credential;
console.log('Login com Google bem-sucedido. Token JWT:', token);
// Aqui você enviaria o token para o backend para autenticação
fetch('https://seuservidor.com/api/login-google', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ token }),
})
.then(res => res.json())
.then(data => {
console.log('Usuário autenticado com sucesso via Google:', data);
})
.catch(error => {
console.error('Erro ao autenticar com o Google:', error);
});
};
const handleGoogleError = () => {
console.error('Erro no login com Google');
};
// Função para tratar o login tradicional
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log('Tentando login com email e senha:', { email, password });
// Envie os dados para o backend para autenticação
fetch('https://seuservidor.com/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email, password }),
})
.then(res => res.json())
.then(data => {
console.log('Usuário autenticado com sucesso:', data);
})
.catch(error => {
console.error('Erro ao autenticar:', error);
});
};
return (
<GoogleOAuthProvider clientId="SUA_GOOGLE_CLIENT_ID">
<div>
<h2>Login</h2>
<form onSubmit={handleSubmit}>
<div>
<label>Email:</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div>
<label>Senha:</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<button type="submit">Login</button>
</form>
<h3>Ou faça login com o Google</h3>
<GoogleLogin
onSuccess={handleGoogleSuccess}
onError={handleGoogleError}
/>
</div>
</GoogleOAuthProvider>
);
};
export default LoginForm;Passo 2: Utilizar o Formulário no App Agora, basta usar o LoginForm no seu componente principal:
import React from 'react';
import LoginForm from './LoginForm';
const App: React.FC = () => {
return (
<div>
<h1>Sistema de Login</h1>
<LoginForm />
</div>
);
};
export default App;Conclusão:
Este guia fornece um exemplo de como implementar autenticação com o Google usando Next.js e a biblioteca @react-oauth/google. Certifique-se de sempre validar o token no backend para garantir a segurança do processo de autenticação.
Se estiver utilizando React puro ou outro framework, basta remover a diretiva 'use client' e ajustar a implementação para o seu ambiente.