[Laravel] laravel jetstream 이메일 인증 커스터마이징

laravel 8버전으로 넘어오면서 이메일 인증이 jetstream을 설치해서 하기를 권장하고 있다

이에 따라 라라벨 블로그를 만들던중 이메일 인증을 구현하는데 메일이랑 페이지 등을 한글로 커스텀하고 문구도 수정을 하고싶어서 알아봤는데 구글링을 통해서도 정보를 찾아보기란 쉽지않아서 직접 뒤져보면서 알게된 정보를 메모할 겸 포스팅한다

 

먼저 메일 테스트를 위해 mailtrap을 사용할것이다 회원가입 해두자

https://mailtrap.io/

Mailtrap - Email Testing Tool #1

회원가입 후 .env에 이메일 부분에 수정해야할 코드를 얻는다

이와 같이 라라벨 7+로 설정하고 밑에부분을 복사해서

수정해준다 없는부분은 추가하고 값부분만 변경해주면된다 mail_from_address부분이 보내는 사람을 설정하는 부분이다

이외에는 .env는 건들지 않는다

 

이후 이메일 인증기능을 활성화하기 위해 config\fortify.php부분에 

이와같이 emailverification부분에 주석을 해제한다 이러면 jetstream에서 제공하는 이메일 인증기능이 활성화된다

 

그리고 jetstream에서 제공하는 user테이블이 아닌 다른 user테이블을 사용한다면

해당 모델에서 use MustVerifyEmail;을 해주고 implements MustVerifyEmail을 통해 인터페이스를 적용해준다

그리고 해당 DB에 반드시 'email_verified_at'이라는 컬럼이 존재해야한다 타임 스탬스로 설정하고 이름도 같아야 작동한다

 

여기까지 했다면 일단 jetstream의 이메일 인증기능은 본인의 회원DB로 작동하는것을 확인할 수 있다

 

이제 이메일 전송알림 페이지와 이메일 문구를 입맛대로 커스텀해볼 차례이다

먼저 내 프로젝트 같은 경우 로그인하고 내정보에서 추가로 이메일 인증이 가능하게 해놨기때문에 내가 만든 이메일 인증버튼에 이메일기능을 작동하게 해야한다

              @if (!Auth::user()->email_verified_at)
                <a href="{{ URL::route('verification.notice') }}" class="-mt-2 text-md font-bold text-white bg-gray-700 rounded-full px-5 py-2 hover:bg-gray-800">이메일 인증</a>
              @endif

a태그에 href속성에 {{ URL::route('verification.notice') }}를 넣으면 이메일 전송알림 페이지로 이동하게된다

나는 이렇게 커스텀했고 해당 소스파일은 jetstream을 설치했다는 가정하에 views\auth\verify-email.blade.php이다

<x-guest-layout>
    <x-jet-authentication-card>
        <x-slot name="logo">
            {{-- <x-jet-authentication-card-logo /> --}}
        </x-slot>

        <div class="mb-4 text-sm text-gray-600">
            {{ __('이 기능은 이메일 인증이 완료된 회원만 사용할 수 있습니다 이메일 인증을 완료해 주십시요.') }}
        </div>

        @if (session('status') == 'verification-link-sent')
            <div class="mb-4 font-medium text-sm text-green-600">
                {{ __('가입시 등록한 이메일로 인증메일을 보냈습니다 :)') }}
            </div>
        @endif

        <div class="mt-4 flex items-center justify-between">
            <form method="POST" action="{{ route('verification.send') }}">
                @csrf

                <div>
                    <x-jet-button type="submit">
                        {{ __('이메일 인증하기') }}
                    </x-jet-button>
                </div>
            </form>

            <form method="POST" action="{{ route('logout') }}">
                @csrf

                <button type="submit" class="underline text-sm text-gray-600 hover:text-gray-900">
                    {{ __('로그아웃') }}
                </button>
            </form>
        </div>
    </x-jet-authentication-card>
</x-guest-layout>

원래는 위에 로고도있지만 난 그냥 제거하는 선택을 했다

이후 메일을 보내면 영어로된 메일이 오는데 난 이걸 한국어로 변경하고자했고 

이렇게 변경을 완료했다 이 메일의 원본소스는 vendor\laravel\framework\src\Illuminate\Auth\Notifications\VerifyEmail.php 이다

해당 파일에서 아래와 같이 buildMailMessage($url)만 수정해주면된다 저기서 추가로 ->line()을 더 입력할수도 있다

하지만 이걸 수정해도 메일에 '환영합니다' 부분과 밑에 '작동하지 않는경우' 문구는 수정되지 않는다

이부분은 메일의 header / footer부분으로 따로 소스파일이 나뉘여있는데

@component('mail::message')
{{-- Greeting --}}
@if (! empty($greeting))
# {{ $greeting }}
@else
@if ($level === 'error')
# @lang('Whoops!')
@else
# @lang('환영합니다!')
@endif
@endif

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

@endforeach

{{-- Action Button --}}
@isset($actionText)
<?php
    switch ($level) {
        case 'success':
        case 'error':
            $color = $level;
            break;
        default:
            $color = 'primary';
    }
?>
@component('mail::button', ['url' => $actionUrl, 'color' => $color])
{{ $actionText }}
@endcomponent
@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)
@slot('subcopy')
@lang(
    "위에 \":actionText\" 버튼이 작동하지 않는다면 \n".
    '이 URL을 복사해서 브라우저 URL창에 붙여넣기하십시요:',
    [
        'actionText' => $actionText,
    ]
) <span class="break-all">[{{ $displayableActionUrl }}]({{ $actionUrl }})</span>
@endslot
@endisset
@endcomponent

이것이 해당 소스고 위에 올린 메일 사진을 보면 어느부분이 해당하는 문구인지 감이 올것이다

위치는 vendor\laravel\framework\src\Illuminate\Notifications\resources\views\email.blade.php 에 있다

이렇게 다 커스텀을 마치고 메일에 인증하기를 누르면 DB에 email_verified_at 컬럼에 인증한 날짜와 시간이 insert되면서 인증이 완료된다

 

p.s

그냥 따로 Controller를 만들어서 jetstream이메일 기능을 오버라이드해서 사용하는 방법도 있지만 jetstream에서 제공하는 기능을 커스텀하는 방법이 더 간단하고 안정적이라 생각해서 이악물고 온갖 디렉토리를 다 뒤져서 찾아냈는데

제가 구글링이 실력이 약한건지 정보를 못찾아서 이런 고생을 했네요 8ㅅ8