Personalizar correo de Confirmación de Laravel

Introducción

Las notificaciones por correo electrónico son una parte esencial de cualquier aplicación web, y Laravel facilita su implementación mediante notificaciones por defecto. Sin embargo, personalizar estas notificaciones puede marcar la diferencia en la experiencia del usuario y fortalecer la identidad de tu aplicación. En este post, Personalizar correo de Confirmación de Email de Laravel, exploraremos paso a paso cómo personalizar las notificaciones de email en Laravel para adaptarlas a las necesidades específicas de tu proyecto.

Modificando nuestro Código

Antes que todo necesitamos tener corriendo una aplicación en Laravel con registro de usuario y confirmación de correo de email. Si no sabes por donde empezar te dejo un link de un post que te guiará paso a paso.

https://tenocode.com/confirmar-correo-con-api-en-laravel/

Teniendo ya todo listo, lo primero que debemos hacer es crear nuestro template de email:

php artisan vendor:publish --tag=laravel-notifications

Este comando es parte de la funcionalidad de Laravel que permite personalizar y ajustar diversos aspectos de la aplicación.

Cuando ejecutas este comando, Laravel copiará los archivos necesarios desde el proveedor de notificaciones (que es parte del propio framework) al directorio de tu aplicación. Estos archivos pueden incluir plantillas de correo electrónico, vistas, configuraciones, y otros recursos que Laravel utiliza para generar y enviar notificaciones por correo electrónico.

El comando tendra una salida parecida a esta:

Si revisamos la ruta resources/views/vendor/notifications, encontraremos un archivo llamado email.blade.php. Al abrir el archivo, nos encontraremos con algo así:

<x-mail::message> 
{{-- Greeting --}}
@if (! empty($greeting))
# {{ $greeting }}
@else
@if ($level === 'error')
# @lang('Whoops!')
@else
# @lang('Hello!')
@endif
@endif

{{-- Intro Lines --}}
@foreach ($introLines as $line)
{{ $line }}

@endforeach

{{-- Action Button --}}
@isset($actionText)
<?php
    $color = match ($level) {
        'success', 'error' => $level,
        default => 'primary',
    };
?>
<x-mail::button :url="$actionUrl" :color="$color">
{{ $actionText }}
</x-mail::button>
@endisset

{{-- Outro Lines --}}
@foreach ($outroLines as $line)
{{ $line }}

@endforeach

{{-- Salutation --}}
@if (! empty($salutation))
{{ $salutation }}
@else
@lang('Regards'),<br>
{{ config('app.name') }}
@endif

{{-- Subcopy --}}
@isset($actionText)
<x-slot:subcopy>
@lang(
    "If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\n".
    'into your web browser:',
    [
        'actionText' => $actionText,
    ]
) <span class="break-all">[{{ $displayableActionUrl }}]({{ $actionUrl }})</span>
</x-slot:subcopy>
@endisset
</x-mail::message>

Si ya lo sé, no es muy amigable el código que vemos, pero si ponemos un poco de atención nos daremos cuenta que en los comentarios nos dice a qué sección del email pertenece cada comentario del código, entonces:

Con esto podemos empezar a personalizar nuestro email, agregando o quitando código, pero si quieres modificar los datos programaticamente, deberemos modificar un archivo.

Nos dirigimos a App\Providers\AuthServiceProvider.php

<?php

namespace App\Providers;

// use Illuminate\Support\Facades\Gate;
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;

class AuthServiceProvider extends ServiceProvider
{
    /**
     * The model to policy mappings for the application.
     *
     * @var array<class-string, class-string>
     */
    protected $policies = [
        //
    ];

    /**
     * Register any authentication / authorization services.
     */
    public function boot(): void
    {
        //
    }
}

Dentro de la función boot debemos agregar nuestro código para personalizar nuestro email de confirmación.

Primero lo que yo hago es preguntas si estamos en producción o en ambiente de desarrollo:

 $env =  "http://localhost:8000";

 if(env('APP_ENV')!="local")
      $env = "https://tenocode.com";

Luego debemos llamar al trait VerifyEmail, y ponemos la lógica interna si queremos cambiar la url o algún otro dato, en nuestro caso, cambiaremos la url y el mensaje.

VerifyEmail::toMailUsing(function ($notifiable, $url) {

            //url generada por defecto
            //http://localhost:8000/api/register?expires=1670880604&hash=79080b54b70607b04d613389eed03c5a55669058&signature=f5321265a90301060d7101ae70e042b0f1767912d6020e9986039ad777c48c26
            
            //cambiamos la url a , auth/verifyEmail 
            //y luego le agregamos los datos de la url
        
            $site = $this->env."/auth/verifyEmail";
        
            $urlPieces = explode("/", $url);
            $data = $urlPieces[count($urlPieces)-1];
            $data = str_replace('?','_',$data);
            $data = str_replace('=','@',$data);
            $finalUrl = $site."/".$data;
        
            //cambiamos los datos del mensaje y el nombre del botón
            return (new MailMessage)
                ->subject(Lang::get('Verificación de Email - tenocode.com'))
                ->line(Lang::get('Favor verifica tu email visitando el siguiente link:'))
                ->action(Lang::get('Verifica tu Email'), $finalUrl)
                ->line(Lang::get('Este email ha sido enviado de forma automática, favor no responder.'));
        });

Nuestra clase completa quedaría así:

<?php

namespace App\Providers;

// use Illuminate\Support\Facades\Gate;
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
use Illuminate\Auth\Notifications\VerifyEmail;
use Illuminate\Notifications\Messages\MailMessage;
use Illuminate\Support\Facades\Lang;

class AuthServiceProvider extends ServiceProvider
{
    /**
     * The model to policy mappings for the application.
     *
     * @var array<class-string, class-string>
     */
    protected $policies = [
        //
    ];

    /**
     * Register any authentication / authorization services.
     */
    public function boot(): void
    {
 
       $this->env =  "http://localhost:8000";

       if(env('APP_ENV')!="local")
            $this->env = "https://tenocode.com";

        VerifyEmail::toMailUsing(function ($notifiable, $url) {

            //url generada por defecto
            //http://localhost:8000/api/register?expires=1670880604&hash=79080b54b70607b04d613389eed03c5a55669058&signature=f5321265a90301060d7101ae70e042b0f1767912d6020e9986039ad777c48c26
            
            //cambiamos la url a , auth/verifyEmail 
            //y luego le agregamos los datos de la url
        
            $site = $this->env."/auth/verifyEmail";
        
            $urlPieces = explode("/", $url);
            $data = $urlPieces[count($urlPieces)-1];
            $data = str_replace('?','_',$data);
            $data = str_replace('=','@',$data);
            $finalUrl = $site."/".$data;
        
            //cambiamos los datos del mensaje y el nombre del botón
            return (new MailMessage)
                ->subject(Lang::get('Verificación de Email - tenocode.com'))
                ->line(Lang::get('Favor verifica tu email visitando el siguiente link:'))
                ->action(Lang::get('Verifica tu Email'), $finalUrl)
                ->line(Lang::get('Este email ha sido enviado de forma automática, favor no responder.'));
        });

    }
}

Si enviamos el mail, veremos que ha cambiado el subject:

Ahora si revisamos el contenido:

Felicidades ahora ya sabes como Personalizar el correo de Confirmación de Laravel!!, Si quieres personalizar el saludo, lo puedes hacer directamente en el template o por otro lado necesitas personalizar el logo te dejo este link:

https://tenocode.com/cambiar-el-logo-de-laravel-en-los-email/