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

1. Acesse o Google Cloud Console.
2. Crie um novo projeto ou selecione um projeto existente.
3. No menu, vá para APIs e Serviços > Credenciais.
4. Clique em Criar credencial > ID do cliente OAuth 2.0.
5. Configure a tela de consentimento OAuth se ainda não tiver feito isso.
6. No tipo de aplicativo, selecione Aplicativo da Web.
7. Defina as URIs de redirecionamento autorizados para o seu ambiente (por exemplo, http://localhost:3000).
8. 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.