Laravel 无密码登录,又名魔术登录链接

Laravel 无密码登录,又名魔术登录链接

Laravel passwordless login

Laravel 无密码登录、Magic Login Links 或简单地让用户在不提供密码的情况下登录都是一种登录机制的不同术语,其工作原理如下:

  1. 用户输入他的电子邮件/电话号码。
  2. 用户提交表单。
  3. 将向用户发送电子邮件/短信。
  4. 用户点击电子邮件/短信中发送的链接
  5. 用户已登录

简单而高效!

这种身份验证流程对双方都有好处:

  • 对于用户来说,体验会更好,因为他们只需要提供他们的电子邮件地址或电话号码来注册和登录,不需要记住密码,同时这样会增加安全性,因为我们都知道密码有多弱。
  • 对于开发人员和网站所有者来说,他们将不再担心管理密码这不是一项简单的任务。

在本文中,我们将在 Laravel 9 应用程序上实现这种身份验证方法,我们将从头开始,从创建新的 Laravel 应用程序到生成并通过电子邮件发送登录 URL。

让我们首先使用创建一个新的 Laravel 应用程序 作曲家

 作曲家创建项目 laravel/laravel 无密码登录应用程序

跳转到项目的文件夹中:

 cd 无密码登录应用程序

在您喜欢的 IDE 中打开项目,让我们从配置与数据库的连接开始 .env 文件:

 DB_CONNECTION=mysql  
 DB_HOST=127.0.0.1  
 DB_PORT=3306  
 DB_DATABASE=passwordless_login_app_db  
 DB_USERNAME=root  
 DB_PASSWORD=

在我们运行迁移之前,我们需要做一些编辑,首先如果您打开创建用户表的迁移:

数据库/迁移/2014_10_12_000000_create_users_table.php

你会发现它包含一个密码列,因为我们不需要密码,我们可以删除它:

 Schema::create('users', function (Blueprint $table) {  
 $table->id();  
 $table->string('name');  
 $table->string('email')->unique();  
 $table->timestamp('email_verified_at')->nullable();  
 // $table->string('密码'); <<删除这一行  
 $table->rememberToken();  
 $table->timestamps();  
 });

我们不要忘记从用户模型的 $fillable 数组中删除密码属性:

应用程序/模型/User.php

 受保护的 $fillable = [  
 '姓名''电子邮件',  
 // '密码', << 删除这一行  
 ];

接下来,让我们删除创建密码重置表的迁移:

数据库/迁移/2014_10_12_100000_create_password_resets_table.php

我们现在可以运行我们的迁移:

 php工匠迁移

由于我们将通过电子邮件发送登录 URL,我们需要配置我们的应用程序以能够发送电子邮件,我将使用 邮件陷阱 ,让我们打开我们的 .env 并开始编辑:

 MAIL_MAILER=smtp  
 MAIL_HOST=smtp.mailtrap.io  
 邮件端口=2525  
 MAIL_USERNAME=YOUR_MAIL_USERNAME  
 MAIL_PASSWORD=YOUR_MAIL_PASSWORD  
 MAIL_ENCRYPTION=tls

此时,我们可以开始处理流程本身,我们将使用一个名为 laravel-无密码登录 .

让我们安装它:

 作曲家需要 grosv/laravel-passwordless-login

现在我们需要两条路由,第一个用于用户可以输入电子邮件地址的页面,第二个用于处理表单提交。

让我们添加它们:

路线/web.php

 使用 App\Http\Controllers\AuthController;  
  
  
 Route::get('/login', [AuthController::class, 'loginForm'])->name('login');  
 Route::post('/login', [AuthController::class, 'sendLoginLink'])->name('loginPost');

让我们创建 授权控制器 我们在路线中使用的:

 php 工匠制作:控制器 AuthController

AuthController 将有两个功能,这是整个控制器:

 <?php  
  
 命名空间 App\Http\Controllers;  
  
 使用应用\模型\用户;  
 使用 Grosv\LaravelPasswordlessLogin\LoginUrl;  
 使用 Illuminate\Http\Request;  
 使用 Illuminate\Support\Facades\Mail;  
  
 类 AuthController 扩展控制器  
 {  
  
 函数登录表单()  
 {  
 返回视图('auth.login');  
 }  
  
 函数 sendLoginLink(请求 $request)  
 {  
 $user = User::whereEmail($request['email'])->first();  
  
 $generator = new LoginUrl($user);  
 $url = $generator->generate();  
  
 $内容=“ <a href=" . $url . ">”。 $网址。 "</a> ";  
 邮件::html($content, fn ($message) =>  
 $message->to($request['email'])  
 ->subject("你的神奇登录链接")  
 ->来自(“[[email protected]](/cdn-cgi/l/email-protection)”)  
 );  
  
 返回视图('auth.login', ['emailIsSent' => true]);  
 }  
 }

让我们谈谈里面有什么,首先,我们有 登录表单 函数只返回一个视图,用户可以在其中输入他的电子邮件,这是它的外观:

Sign in form with Email only

创建名为 登录 资源/视图/授权

资源/视图/auth/login.blade.php

这是它的代码:

 <!DOCTYPE html>  
 <html lang="en" class="h-full bg-gray-50">  
  
 <head>  
 <meta charset="UTF-8">  
 <meta http-equiv="X-UA-Compatible" content="IE=edge">  
 <meta name="viewport" content="width=device-width, initial-scale=1.0">  
 <script src="https://cdn.tailwindcss.com"></script>  
 <title>登录</title>  
 </head>  
  
 <body class="h-full">  
 <div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">  
 <div class="max-w-md w-full space-y-8">  
 @if (isset($emailIsSent))  
 <h2 class="mt-6 text-center text-3xl tracking-tight font-bold text-gray-900">神奇的登录链接已发送至您的邮箱!</h2>  
 @别的  
 <h2 class="mt-6 text-center text-3xl tracking-tight font-bold text-gray-900">登录到您的帐户</h2>  
 <form class="mt-8 space-y-6" action="{{ route('loginPost') }}" method="POST">  
 @csrf  
 <div class="rounded-md shadow-sm -space-y-px">  
 <div>  
 <label for="email-address" class="sr-only">电子邮件地址</label>  
 <input id="email-address" name="email" type="email" autocomplete="email" required  
 class="appearance-none rounded-none 相对块 w-full px-3 py-2 边框border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring- indigo-500 焦点:border-indigo-500 焦点:z-10 sm:text-sm"  
 placeholder="电子邮件地址">  
 </div>  
 </div>  
  
  
 <div>  
 <button type="submit"  
 class="group relative w-full flex justify-center py-2 px-4 边框边框透明文本-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-无 焦点:ring-2 焦点:ring-offset-2 焦点:ring-indigo-500">  
 <span class="absolute left-0 inset-y-0 flex items-center pl-3">  
 <!-- Heroicon name: solid/lock-closed -->  
 <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"  
 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"  
 aria-hidden="true">  
 <path fill-rule="evenodd"  
 d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"  
 剪辑规则=“偶数” />  
 </svg>  
 </span>  
 登入  
 </button>  
 </div>  
 </form>  
 @万一  
 </div>  
 </div>  
 </body>  
  
 </html>

很简单,这里我唯一要解释的是 $emailIsSent 变量,我使用它只是为了可以将一个视图用于两个目的,如果变量 $emailIsSent 未设置,页面将包含一个表单,用户可以在其中输入他的电子邮件,如果已设置,则页面将显示一条消息,说明已发送魔术登录链接( $emailIsSent 将设置在 发送登录链接 我们发送登录链接后的功能),我想你明白了。

在第二个函数中,即 发送登录链接 ,我们通过请求中的电子邮件找到用户:

 $user = User::whereEmail($request['email'])->first();

然后,使用我们安装的包(laravel-passwordless-login),我们生成一个神奇的登录链接:

 $generator = new LoginUrl($user);  
 $url = $generator->generate();

生成登录链接后,我们通过电子邮件将其发送给用户:

 $内容=“ <a href=" . $url . ">”。 $网址。 "</a> ";  
 邮件::html($content, fn ($message) =>  
 $message->to($request['email'])  
 ->subject("你的神奇登录链接")  
 ->来自(“[[email protected]](/cdn-cgi/l/email-protection)”)  
 );

最后,我们返回登录视图 电子邮件已发送 变量,这意味着视图将显示一条消息,说明已发送魔术登录链接:

 返回视图('auth.login', ['emailIsSent' => true]);

用户点击电子邮件中发送的链接,他将登录!

要尝试,请确保创建一个测试用户:

 php工匠修补匠  
 User::create(['name'=>'test user', 'email'=>'[[email protected]](/cdn-cgi/l/email-protection)'])

要编辑用户单击登录链接后重定向到的位置,请为 LPL_REDIRECT_ON_LOGIN .env ,其默认值为 / ( LPL_REDIRECT_ON_LOGIN=/ )。

有关更多配置和信息,请访问 Github 上的软件包页面: Laravel-无密码登录 .

谢谢你的阅读❤

您如何看待这种身份验证流程?
你已经在使用它了吗?
你会在你未来的项目中使用它吗?

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/1618/54243015

posted @   哈哈哈来了啊啊啊  阅读(251)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示