Neste mundo digital, é importante que 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 de seus aplicativos.

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 significa que eles não precisam se lembrar de mais um nome de usuário e senha.

Integrar o Google OAuth em sua aplicação Laravel simplifica o processo de login, incentiva o engajamento do usuário e aumenta a credibilidade de sua plataforma. Neste tutorial, vou guiá-lo 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.

Sumário

Pré-requisitos

Antes de começar, certifique-se de ter 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 você 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 interrupções

  • Melhoria na segurança

  • Fluxo de usuário personalizável

  • Melhoria na escalabilidade

  • 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, seguindo esses passos você conseguirá integrar a Autenticação do Google de forma tranquila. Vamos começar.

Passo 1: Configurar um projeto no Google Cloud

Para usar a Autenticação do Google em sua aplicação 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 pop-up, clique em “Novo Projeto” para criar um novo projeto e forneça os detalhes solicitados. Em seguida, clique em Criar projeto.

  3. Após criar o projeto, abra o menu lateral 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, será solicitado que você configure 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 for para uso público, ou Interno se for limitado a usuários dentro da sua organização do Google Workspace.

    • Preencha os detalhes necessários, como o nome do aplicativo, email de suporte ao usuário e quaisquer informações 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. Em URI de Redirecionamento Autorizado, adicione a URL de retorno para 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 serão necessárias nos próximos passos.

Passo 2: Crie um novo projeto Laravel e instale 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 oficial do Laravel 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: Configure as variáveis de ambiente

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

Localize 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: A URL para a qual o Google redireciona os usuários após o login. Isso deve corresponder ao URI de redirecionamento que você especificou ao criar as credenciais na Etapa 1.

Etapa 4: Atualizar os arquivos de configuração

Para permitir que o Laravel Socialite use as credenciais 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 Google:

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

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

Nesta etapa, criaremos um controlador para lidar com a redireção 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 com o 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 de OAuth do Google.
     */
    public function redirect()
    {
        return Socialite::driver('google')->redirect();
    }

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

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

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

        // Redirecionar 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 de OAuth do Google.

  2. Retorno: Manipula o retorno do Google e redireciona o usuário para o painel ou qualquer outra página segura.

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

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

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

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

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

Nós 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, vamos adicionar 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 esta 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 fazer login.

Agora, vamos tentar fazer login.

Esta é a página de login:

Ao clicar no botão, você será redirecionado para a tela de consentimento do Google:

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

É isso! Você implementou e testou com sucesso a Autenticação do Google no seu projeto Laravel. Agora seus usuários podem fazer login usando suas contas do Google, melhorando 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 o Laravel – Repositório do GitHub

Conclusão

Agora você 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 no arquivo config/services.php.

A integração do OAuth do Google é um recurso comum para aplicações web modernas, e o Laravel Socialite torna isso fácil de implementar.

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

A maioria dos modelos prontos do Laravel SaaS oferecem integração perfeita com plataformas populares como Google, GitHub, Facebook e Twitter. Por exemplo, existem alguns recursos premium e de código aberto como:

  • Kit de Inicialização do Laravel (Premium)

    • Baseado no Tailwind CSS

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

    • Suporta vários métodos de autenticação, incluindo o login tradicional por email/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 nas 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

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

Agradecimentos especiais a Deep Kumbhare, um desenvolvedor Laravel experiente e entusiasta, que me ajudou a preparar este artigo.

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