Neste mundo digital, é importante que as suas aplicações tenham um processo de autenticação suave e seguro. Isso ajuda a melhorar a experiência do usuário e a segurança geral das suas apps.

A Autenticação do Google está entre as formas mais confiáveis e convenientes para os usuários acessarem um site usando sua conta do Google. E isso significa que eles não precisam se lembrar de mais um nome de usuário e senha.

Integrar o Google OAuth na sua aplicação Laravel simplifica o processo de login, incentiva o envolvimento do usuário e aumenta a credibilidade da sua plataforma. Neste tutorial, vou guiá-lo(a) pelos passos de implementação da Autenticação do Google em uma aplicação Laravel. Vamos desde a configuração das credenciais da API do Google até a configuração do pacote Socialite do Laravel.

Tabela de Conteúdos

Pré-requisitos

Antes de começar, certifique-se de que possui os seguintes pré-requisitos:

  1. Laravel 11

  2. Uma conta de desenvolvedor do Google.

  3. Conhecimento básico de Laravel e autenticação.

  4. Composer para gerenciar pacotes

Uma vez que tenha esses pré-requisitos prontos, você está pronto para integrar a Autenticação do Google em seu aplicativo Laravel.

Benefícios de Usar a Autenticação do Google em um Aplicativo Laravel

Há muitos benefícios nessa configuração. Alguns deles são:

  • Integração simplificada com o Socialite

  • Autenticação de usuário sem falhas

  • Segurança aprimorada

  • Fluxo de usuário personalizável

  • Escala aprimorada

  • Suporte sólido do ecossistema

  • Manutenção mais fácil

Como Configurar o Login do Google no Laravel

Esteja trabalhando em um projeto pessoal ou em um aplicativo pronto para produção, seguir esses passos ajudará você a integrar suavemente a Autenticação do Google. Vamos começar.

Passo 1: Configurar um projeto no Google Cloud

Para usar a Autenticação do Google em seu aplicativo Laravel, primeiro você precisa configurar um projeto no Google Cloud. Siga estes passos para configurar seu projeto:

  1. Acesse o console do Google Cloud e faça login com sua conta do Google.

  2. Clique em “Selecionar um Projeto” no menu de navegação superior. Na janela que aparece, clique em “Novo Projeto” para criar um novo projeto e forneça as informações solicitadas. Em seguida, clique em Criar projeto.

  3. Uma vez que você cria o projeto, abra o menu do lado esquerdo do console e selecione APIs e Serviços > Credenciais.

  4. Na página de Credenciais, clique em Criar Credenciais > ID do Cliente OAuth.

  5. Se esta é a primeira vez que você está criando um ID de cliente, ele pedirá para configurar a tela de consentimento. Você pode configurar sua tela de consentimento clicando em Configurar Tela de Consentimento. Se você já configurou a tela de consentimento, pode pular esta etapa.

    • Selecione Externo se o seu aplicativo é para uso público, ou Interno se for limitado a usuários dentro da sua organização Google Workspace.

    • Preencha os detalhes necessários, como o nome do aplicativo, email de suporte ao usuário, e qualquer informação de marca. Clique em Salvar e Continuar.

Após configurar a tela de consentimento, retorne para a página de Credenciais e selecione ID do Cliente OAuth novamente.

  1. Escolha o Tipo de Aplicativo como Aplicativo da Web e forneça um nome para as credenciais do cliente (por exemplo, Laravel Social Login).

  2. Sob URI de Redirecionamento Autorizado, adicione o URL de retorno para a sua aplicação:

  3. Clique em Criar, e o Google irá gerar um ID do Cliente e Segredo do Cliente para o seu projeto. Salve essas credenciais, pois elas serão necessárias nos próximos passos.

Passo 2: Criar um novo projeto Laravel e Instalar o pacote Laravel Socialite

Se você não tiver um pronto, pode criar um novo projeto Laravel usando o comando abaixo:

composer create-project --prefer-dist laravel/laravel social-auth-example

Para integrar a Autenticação do Google em um projeto Laravel, vamos usar o Laravel Socialite. O Socialite é um pacote Laravel de primeira parte que simplifica a autenticação OAuth com serviços populares como Google, Facebook, Twitter e outros.

Para instalar o Socialite, abra seu terminal no diretório raiz do seu projeto Laravel e execute o seguinte comando:

composer require laravel/socialite

Passo 3: Configurar variáveis de ambiente

Neste passo, configuraremos nossa aplicação Laravel para usar as credenciais de OAuth do Google que coletamos no Passo 1.

Localize o seu arquivo .env no diretório raiz do seu projeto e adicione as seguintes variáveis de ambiente:

GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
GOOGLE_REDIRECT_URL=http://your-domain.com/auth/google/callback

Vá em frente e substitua todos os espaços reservados por segredos.

Vamos entender cada variável de ambiente uma por uma:

  • GOOGLE_CLIENT_ID: Um identificador único para o seu aplicativo, fornecido pelo Google.

  • GOOGLE_CLIENT_SECRET: Uma chave privada usada pelo seu aplicativo para se autenticar de forma segura com a API do Google.

  • GOOGLE_REDIRECT_URL: O URL para onde o Google redireciona os usuários depois que eles fazem login. Isso deve corresponder ao URI de redirecionamento que você especificou ao criar as credenciais na Etapa 1.

Etapa 4: Atualize os arquivos de configuração

Para permitir que o Laravel Socialite use as credenciais de autenticação do Google OAuth, precisamos configurar os detalhes do provedor no arquivo config/services.php.

No arquivo services.php, adicione a seguinte configuração para o provedor do Google:

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),        // Seu ID de Cliente do Google
    'client_secret' => env('GOOGLE_CLIENT_SECRET'), // Sua Chave Secreta do Google
    'redirect' => env('GOOGLE_REDIRECT_URL'),      // Seu URL de Redirecionamento do Google
]

Etapa 5: Crie controladores e rotas para autenticação.

Nesta etapa, vamos criar um controlador para lidar com o redirecionamento e callbacks do Google OAuth e configurar as rotas necessárias para acionar esses métodos.

Execute o seguinte comando Artisan para gerar o controlador GoogleAuthController:

php artisan make:controller GoogleAuthController

Isso criará um controlador em app/Http/Controllers/GoogleAuthController.php.

Substitua o conteúdo do recém-criado GoogleAuthController.php pelo seguinte código:

<?php

namespace App\\Http\\Controllers;

use App\\Http\\Controllers\\Controller;
use App\\Models\\User;
use Laravel\\Socialite\\Facades\\Socialite;
use Illuminate\\Support\\Facades\\Auth;
use Illuminate\\Support\\Str;
use Throwable;

class GoogleAuthController extends Controller
{
    /**
     * Redireciona o usuário para a página OAuth do Google.
     */
    public function redirect()
    {
        return Socialite::driver('google')->redirect();
    }

    /**
     * Trata o callback do Google.
     */
    public function callback()
    {
        try {
            // Obtém as informações do usuário do Google
            $user = Socialite::driver('google')->user();
        } catch (Throwable $e) {
            return redirect('/')->with('error', 'Google authentication failed.');
        }

        // Verifica se o usuário já existe no banco de dados
        $existingUser = User::where('email', $user->email)->first();

        if ($existingUser) {
            // Faz login no usuário se ele já existir
            Auth::login($existingUser);
        } else {
            // Caso contrário, cria um novo usuário e faz login
            $newUser = User::updateOrCreate([
                'email' => $user->email
            ], [
                'name' => $user->name,
                'password' => bcrypt(Str::random(16)), // Define uma senha aleatória
                'email_verified_at' => now()
            ]);
            Auth::login($newUser);
        }

        // Redireciona o usuário para o painel ou qualquer outra página segura
        return redirect('/dashboard');
    }
}

Este controlador contém duas funções:

  1. Redirecionar: Redireciona o usuário para a página OAuth do Google.

  2. Callback: Trata o callback do Google e redireciona o usuário para o painel ou qualquer outra página segura.

Vamos definir as rotas de redirecionar e callback no arquivo routes/web.php:

use App\\Http\\Controllers\\GoogleAuthController;

// Rota para redirecionar para a página OAuth do Google
Route::get('/auth/google/redirect', [GoogleAuthController::class, 'redirect'])->name('auth.google.redirect');

// Rota para tratar o callback do Google
Route::get('/auth/google/callback', [GoogleAuthController::class, 'callback'])->name('auth.google.callback');

Passo 6: Teste a autenticação do Google no Laravel em seu projeto.

Configuramos a autenticação do Google, então agora é hora de testá-la para garantir que funcione perfeitamente. Neste passo, usaremos um botão de login que redireciona o usuário para a página de autenticação do Google e os retorna a uma rota protegida após o login bem-sucedido.

Primeiro, adicionaremos o seguinte botão que dá aos usuários a opção de Fazer Login com o Google:

<a href="{{ route('auth.google.redirect') }}" class="btn bg-blue-100 p-3 shadow-sm border rounded-md text-blue-900">
    Login with Google 
</a>

Para fins de teste, defini uma rota protegida e um dashboard. Esta rota só será acessível para usuários autenticados. Após o login, redirecionaremos os usuários para esta página. Vamos definir essa rota em web.php:

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware('auth')->name('dashboard');

Em seguida, crie um arquivo de visualização blade para o dashboard em resources/views/dashboard.blade.php. Aqui estão os conteúdos do dashboard:

<html>
    <head>
        <title>Dashboard</title>
    </head>

    <body>
        <h1>Dashboard</h1>
        <p>Welcome to the dashboard, {{ auth()->user()->name }}!</p>
    </body>

</html>

Aqui, estamos usando o helper auth()->user() para exibir o nome do usuário logado, que é obtido da conta do Google que eles usaram para entrar.

Agora, vamos tentar fazer login.

Esta é a página de login:

Clicar no botão redirecionará você para a tela de consentimento do Google:

Clique em continuar, e você deve estar logado no aplicativo. Você será redirecionado para uma tela como abaixo. Você pode ver a mensagem de boas-vindas com o nome do usuário.

É isso! Você implementou e testou com sucesso a autenticação do Google em seu projeto Laravel. Agora seus usuários podem fazer login usando suas contas do Google, aumentando tanto a segurança quanto a conveniência.

Para se referir à implementação completa, você pode encontrar o código-fonte completo deste projeto no GitHub aqui: Integração de Login do Google para Laravel – Repositório do GitHub

Conclusão

Você agora configurou a autenticação do Google em sua aplicação Laravel usando o Socialite! Você pode estender este método para incluir outros provedores OAuth como Facebook, Twitter ou GitHub, adicionando configurações adicionais ao arquivo config/services.php.

A integração do Google OAuth é um recurso comum para aplicações web modernas, e o Laravel Socialite facilita a implementação.

Caso você precise de mais opções de login social como GitHub, Twitter e Facebook, então você pode considerar boilerplates de SaaS Laravel prontos para uso.

A maioria dos boilerplates de SaaS Laravel pré-construídos oferece integração perfeita com plataformas populares como Google, GitHub, Facebook e Twitter. Por exemplo, existem alguns recursos premium e de código aberto como:

  • Laravel Starter Kit (Premium)

    • Baseado em Tailwind CSS

    • Vem com Configuração de Link Mágico de Um Clique

    • Suporta vários métodos de autenticação, incluindo o login tradicional por e-mail/senha

    • Autenticação 2FA

  • Boilerplate de SaaS (Código Aberto)

    • Multilocação em um Único Banco de Dados

    • Painel do Desenvolvedor

    • Gerenciar Tokens de Acesso Pessoal

  • Laranuxt (Código Aberto)

    • Nuxt UI, uma coleção de componentes construídos pela equipe NuxtJS, alimentados pelo Tailwind CSS

    • Biblioteca de autenticação para auxiliar com sessões de usuário e login/logout

    • Exemplo de Middleware de Autenticação

  • Laravel Vue Boilerplate (Código Aberto)

    • WebSockets com Laravel Echo e Pusher.

    • Workbox para um melhor desenvolvimento de PWA.

    • Laravel GraphQL

Usar um desses boilerplates SaaS do Laravel pode acelerar seus fluxos de trabalho, pois você não precisa configurar tudo do zero.

Um agradecimento especial a Deep Kumbhare, um experiente desenvolvedor e entusiasta do Laravel, que me ajudou a preparar este artigo.

Espero que este artigo ajude você a configurar o login do Google com o Laravel.