ログイン機能はlaravelではコマンドのみで簡単に実装できます。
しかし、そのままだと、たとえば存在しえないメールアドレスで登録できてしまいます。
ここでは、上記の仕様を改善し、メールアドレスの確認必須にし、また、初期の認証メールを自分流につくりなおすやり方をここに記します。
web.php
routeをつかさどるこのファイルに、本人確認(メール)済のuserしかそのURL先を参照できないようにするには、下記のように既存のrouteを囲もう。
// ↓メールアドレス確認済みユーザーのみログイン可能
Route::middleware(['verified'])->group(
function () {
// 既存のroute
}
);
// ↑メールアドレス確認済みユーザーのみログイン可能User.php
useでMustVerifyEmailクラスと、これからつくるCustomVerifyMailクラスを読み込もう
そして、Userクラスにimplements MustVerifyEmailしよう
sendEmailVerificationNotificationメソッドをoverrideしよう
verify-email.blade.php
このファイルは認証メールをおくって待機中の画面をだす。(resource/views/auth/verify-email.blade.php)
初期のまんまでもいいけど、自分は、自分流にした。(内容は非共有、デザインが似るとこまるため。)
CustomVerifyMail.phpとverify_mail.blade.phpの作成(コマンド)
このファイルはつくろう。
コマンドは、
php artisan make:notification CustomVerifyMail --markdown=mail.verify_mail意味的には、CustomVerifyMailクラスをつくる、そして、対応するVIEWファイルは、mailフォルダ直下のverify_email.blade.phpです的な意味で、別に、名前は自分がすきなものに変えても問題ない。
このコマンドをすると二つのファイルが作られる。
app/Notifications/CustomVerifyMail.php
resources/views/mail/verify_mail.blade.php
CustomVerifyMail.phpの編集
ファイルを下のように編集します。
<?php
namespace App\Notifications;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\MailMessage;
use Illuminate\Notifications\Notification;
use Illuminate\Auth\Notifications\VerifyEmail;
use Illuminate\Support\Facades\Lang;
class CustomVerifyMail extends VerifyEmail
{
use Queueable;
/**
* Create a new notification instance.
*
* @return void
*/
public function __construct()
{
//
}
/**
* Get the notification's delivery channels.
*
* @param mixed $notifiable
* @return array
*/
public function via($notifiable)
{
return ['mail'];
}
/**
* Get the mail representation of the notification.
*
* @param mixed $notifiable
* @return \Illuminate\Notifications\Messages\MailMessage
*/
public function toMail($notifiable)
{
$verificationUrl = $this->verificationUrl($notifiable);
return (new MailMessage)
->subject(Lang::get(__("メールアドレスの確認")))
->markdown('mail.verify_mail', [
'verify_url' => $verificationUrl
]);
}
/**
* Get the array representation of the notification.
*
* @param mixed $notifiable
* @return array
*/
public function toArray($notifiable)
{
return [
//
];
}
}
着目すべきことは、toMailメソッドで、作成するメールの題名は、subjectメソッド、
参照するviewファイルはmarkdownメソッド、その中で渡す引数は、今回の場合は、
verify_url
でわたっているので、VIEWファイル側では、
$verify_url
で利用する。
verify_mail.blade.phpの編集
ファイルを下のように編集します。
<x-for_mail-layout>
<x-slot name="header">
{{ __('メールアドレスの確認') }}
</x-slot>
{{-- ↓画像用 --}}
{{-- <x-slot name="image1">
{{ $message->embed(public_path('logo/002.png')) }}
</x-slot> --}}
{{-- ↑画像用 --}}
<p>{{ __('このメールは[犬田布岬の神秘体験Webアプリ]へのログイン認証メールになります。') }}</p>
<p>{{ __('このメールに心当たりがある場合には、下記のボタンをクリックすることでログイン認証が完了します。') }}</p>
@component('mail::button', ['url' => $verify_url])
{{ __('ログインする') }}
@endcomponent
<p>{{ __('このメールに心当たりがない場合には、ボタンを押さずにこのメールを無視してください。') }}</p>
{{-- {{ config('app.name') }} --}}
</x-for_mail-layout>
最後にメールのlayoutのファイルの全体をはっとこう
ちなみにメールのviewファイルにかんしては、tailwindcssがつかえないので、
style属性で直接デザインを書いていかないといけないし、タグもtable関係のタグで構成していかないと
きれいにデザインされない。また、自分の場合は、これでひとまずやっている
resources/views/layout/for_mail.blade.php
<html lang="ja">
<head>
<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,maximum-scale=1.0,user-scalable=yes" />
<meta http-equiv="Content-Language" content="ja" />
<meta charset="UTF-8" />
{{-- <title>タイトル</title> --}}
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
style="width: 100%;font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1">
<table class="body"
style="border-collapse: collapse;border-spacing: 0;border: 0 none;vertical-align: top;font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1;width: 100%;background-color: #ECEFF1">
<tr
style="font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1">
<td
style="font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1">
<table class="c-responsive_container"
style="border-collapse: collapse;border-spacing: 0;border: 0 none;vertical-align: top;font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1;width: 95%;max-width: 640px;margin: 0 auto;"
align="center">
<tr
style="font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1">
<td
style="font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1">
<span class="p-company_name"
style="margin: 14px 0;padding: 0;font-size: 11px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1;display: block">
{{ __('犬田布岬の神秘体験') }}</span>
</td>
</tr>
</table>
<table class="c-content_wrapper"
style="border-collapse: collapse;border-spacing: 0;border: 0 none;vertical-align: top;font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1;background-color: #FFF;max-width: 640px;margin: 0 auto;box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2)"
align="center">
<tr
style="font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1">
<td
style="padding: 56px 28px 28px;font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1">
<h1
style="text-align: center;margin: 0;padding: 0;font-size: 30px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #626b79;margin-bottom: 14px">
@if (isset($header))
{{ $header }}
@endif
</h1>
</td>
</tr>
<tr
style="font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1">
<td
style="font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1">
<table class="c-hero_image"
style="border-collapse: collapse;border-spacing: 0;border: 0 none;vertical-align: top;font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1;width: 100%;max-width: 640px;margin: 0 auto;"
align="center">
<tr
style="font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1">
<td
style="margin-top:0px;margin-bottom:20px;margin-left:auto;margin-right:auto; text-align: center; magin">
@php
if (!isset($image1)) {
$image1 = '存在する画像のアドレス';
}
@endphp
<img src='{{ $image1 }}' alt="{{ __('image1') }}"
style="display:block;margin-left:auto;margin-right:auto;object-fit:cover;" width="600"
height="400" />
</td>
</tr>
</table>
<table class="c-responsive_container"
style="text-align: center;border-collapse: collapse;border-spacing: 0;border: 0 none;vertical-align: top;font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1;width: 95%;max-width: 640px;margin: 0 auto;"
align="center">
<tr
style="font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1">
<td
style="padding: 0 28px 28px;font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1">
<p
style="margin: 0;padding: 0;font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #4b5360;display: block;margin-bottom: 14px">
{{ $slot }}
</p>
</td>
</tr>
<tr
style="font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1">
<td
style="padding: 0 28px 56px;font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1">
<p class="u-align--center"
style="margin: 0;padding: 0;font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1;display: block;margin-bottom: 14px;text-align: center">
<a class="c-btn" href="{{ route('存在するルート') }}"
style="margin: 0 1em;padding: 1em 1em;font-size: 1.2em;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #ffffff;text-decoration: none;background-color: #448AFF;border-radius: 10px;display: inline-block">
{{ __('犬田布岬の神秘体験') }}</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="footer" width="100%"
style="border-collapse: collapse;border-spacing: 0;border: 0 none;vertical-align: top;font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1;text-align: center">
<tr
style="font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1">
<td
style="font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1">
<table class="c-responsive_container"
style="margin: 0 auto;border-collapse: collapse;border-spacing: 0;border: 0 none;vertical-align: top;font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1;width: 95%;max-width: 640px">
<tr
style="font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1">
<td class="u-align--left u-text--small u-padding_double--top u-padding--bottom"
style="font-size: 12px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1;padding-bottom: 14px;padding-top: 28px;text-align: left">
@php
$info = [
__('サービス名') . '：' . __('犬田布岬の神秘体験'), //
__('代表責任者') . '：平山 健太 ／ Hirayama Kenta', //
__('代表住所') . '：121-0813', //
__('東京都足立区竹ノ塚1-17-5 サークルハウス竹ノ塚六番館201'), //
'HP：https://kindnesshumor.com/?p=1583', //
'E-mail：hirayamakenta0511@gmail.com', //
'©' . __('犬田布岬の神秘体験') . ', All Rights Reserved.', //
];
@endphp
@foreach ($info as $one)
<p class="u-align--center"
style="margin: 0;padding: 0;font-size: 14px;font-family: Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Osaka, sans-serif;color: #7889A1;display: block;margin-bottom: 14px;text-align: center">
{{ $one }}</p>
@endforeach
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
まあ、VIEWファイルのところはちょこちょこ参照するぐらいで、バックエンド処理のファイルは
大体そのまま利用する流れになるとおもう。
返信がありません