Laravel技巧库

发送邮件找回密码

此课程是收费课程,请先购买或加入会员后再访问。

这一集我们来实现,如果忘记了密码,通过发邮件重设密码的功能。https://laravel.com/docs/5.5/passwords
我这里的发件箱,以163的邮箱来演示。其他邮箱也都是差不多的。先去开启这些服务。

然后设置有个授权密码,注意下有的邮箱是没有授权密码的,直接就是用登录密码。

然后来到.env中,找到邮件部分,做如下的配置。

APP_NAME=Meetup


MAIL_DRIVER=smtp
MAIL_HOST=smtp.163.com
MAIL_PORT=25
MAIL_USERNAME=canonpd@163.com
MAIL_PASSWORD=itfun666
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=canonpd@163.com
MAIL_FROM_NAME=ITFun.tv

Tips:
以上配置只是范例,请修改为自己的配置。
我这里用到的密码,在制作完课程后就会修改掉。所以你不能用我的邮箱发邮件。
不同邮箱使用的服务器地址和端口也不同,你可以去网络上查一下自己所使用邮箱的具体信息。
有的刚注册的邮箱,会对发送邮件有限制。
改完.env后一定要记得重启serve

然后找到views/auth/passwords/email.blade.php,替换成符合我们项目样式的html

@extends('layouts.app')

@section('content')

    <div class="detail">
        <div class="am-g am-container">
            <div class="am-u-lg-12">
                <h1 class="detail-h1">Reset Password</h1>
            </div>
        </div>
    </div>

    <div class="am-g">
        <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">

            @if (session('status'))
                <div class="am-alert am-alert-success">
                    {{ session('status') }}
                </div>
            @endif

            <form method="post" class="am-form" action="{{ route('password.email') }}">
                {{ csrf_field() }}

                <div class="am-form-group am-form-icon am-form-feedback {{ $errors->has('email') ? ' am-form-error' : '' }}">
                    <label class="am-form-label" for="email">邮箱: </label>
                    <input type="text" id="email" name="email" class="am-form-field" placeholder="输入你的邮箱"  value="{{ old('email') }}" >

                    @if ($errors->has('email'))
                        <span class="am-icon-warning">{{$errors->first('email')}}</span>
                    @endif
                </div>

                <div class="am-cf">
                    <input type="submit" value="Send Password Reset Link" class="am-btn am-btn-secondary am-btn-sm am-fl">
                </div>
            </form>
            <br>
        </div>
    </div>
@endsection

现在就可以来发送邮件了。

收到邮件后,发现都是英文的,并且地址也不正确。那么到app/User.php中,添加一个自己的发送邮件的方法。

//...
use App\Notifications\ResetPasswordNotification;

class User extends Authenticatable
{
    //...

    public function sendPasswordResetNotification($token)
    {
        $this->notify(new ResetPasswordNotification($token));
    }
}

然后使用命令,来添加这么一个通知https://laravel.com/docs/5.5/notifications

php artisan make:notification ResetPasswordNotification

打开app/Notifications/ResetPasswordNotification

//...
class ResetPasswordNotification extends Notification
{
    //...
    public function __construct($token)
    {
        $this->token = $token;
    }

    //...

    public function toMail($notifiable)
    {
        return (new MailMessage)
            ->subject('找回Meetup的账户密码。')
            ->line('你收到这封信,是因为我们收到你账户的找回密码请求。')
            ->action('找回密码', url('/password/reset', $this->token))
            ->line('如果你没有请求找回密码,请忽略这条信息。');    
    }
}

现在收到的邮件,已经大部分都是中文了。但还有小部分是英文的,再来打下面这个命令

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

你会发现在 resources/views中多了个vendor目录,这里放的就是发送邮件的模板了,打开后我们进一步修改。

这里需要注意的是,不要使用编辑器去格式化代码。你会发现格式化后再发送,邮件会把html代码直接显示出来的。只需要修改两个小地方。

祝你生活愉快,<br>{{ config('app.name') }}

如果你无法点击 "{{ $actionText }}" 按钮, 复制并粘贴如下网址到你的浏览器地址栏: [{{ $actionUrl }}]({{ $actionUrl }})

再次发送,这样邮件就显示出我们满意的样子了。

好的,现在点击找回密码的链接地址,跳转回我们自己的项目中。哎呀,样式又乱了,那就用我这里提供的代码直接覆盖掉吧。

@extends('layouts.app')

@section('content')
    <div class="detail">
        <div class="am-g am-container">
            <div class="am-u-lg-12">
                <h1 class="detail-h1">Reset Password</h1>
            </div>
        </div>
    </div>

    <div class="am-g">
        <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">

            <form method="post" class="am-form" action="{{ route('password.request') }}">
                {{ csrf_field() }}

                <input type="hidden" name="token" value="{{ $token }}">

                <div class="am-form-group am-form-icon am-form-feedback {{ $errors->has('email') ? ' am-form-error' : '' }}">
                    <label class="am-form-label" for="email">邮箱: </label>
                    <input type="text" id="email" name="email" class="am-form-field" placeholder="输入你的邮箱" value="{{ old('email') }}">

                    @if ($errors->has('email'))
                        <span class="am-icon-warning">{{$errors->first('email')}}</span>
                    @endif
                </div>

                <div class="am-form-group am-form-icon am-form-feedback {{ $errors->has('password') ? ' am-form-error' : '' }}">
                    <label class="am-form-label" for="password">新密码: </label>
                    <input type="password" id="password" name="password" class="am-form-field" placeholder="输入你的新密码">

                    @if ($errors->has('password'))
                        <span class="am-icon-warning">{{$errors->first('password')}}</span>
                    @endif
                </div>

                <div class="am-form-group am-form-icon am-form-feedback {{ $errors->has('password_confirmation') ? ' am-form-error' : '' }}">
                    <label class="am-form-label" for="password_confirmation">重复新密码: </label>
                    <input type="password" id="password_confirmation" name="password_confirmation" class="am-form-field" placeholder="请重新输入你的新密码">

                    @if ($errors->has(' id="email"'))
                        <span class="am-icon-warning">{{$errors->first(' id="email"')}}</span>
                    @endif
                </div>

                <div class="am-cf">
                    <input type="submit" value="Reset Password" class="am-btn am-btn-secondary am-btn-sm am-fl">
                </div>
            </form>
            <br>
        </div>
    </div>
@endsection

还有一个地方要修改的,就是填完重置密码表单后,跳转的页面。找到app/Http/Controllers/ResetPasswordController

protected $redirectTo = '/';

好了,所有的步骤都已经完成了,来测试一下吧。


现在就注册ITFun.tv会员
持续关注IT界最新技术,随时更新相关课程。在线学习IT课程或直接报名参加线下武汉PHP、Web前端培训。

仅仅30秒钟就可以简单注册

会员注册(免费)
×