Laravel+Passport+Vue实现Oauth2登录认证
前情提要: 这里主要详诉一些细节和理论和部分代码，这里不讲
Oauth2 是什么
这里简单描述一下，Oauth主要是4方式
- 授权码（authorization code）方式，指的是第三方应用先申请一个授权码，然后再用该码获取令牌。
- 隐藏式: 有些 Web 应用是纯前端应用，没有后端, 允许直接向前端颁发令牌。这种方式没有授权码这个中间步骤，所以称为（授权码）"隐藏式"（implicit）。
- 密码式: 如果你高度信任某个应用，RFC 6749 也允许用户把用户名和密码，直接告诉该应用。该应用就使用你的密码，申请令牌，这种方式称为"密码式"（password）。
- 凭证式: 最后一种方式是凭证式（client credentials），适用于没有前端的命令行应用，即在命令行下请求令牌。
以上4中方式中，除了授权码模式都非常简单，也就是平常的登录 然后 发放 token，然后前端设置token 请求鉴权即可，这里不说这个，自行实践及理解（我认为和jwt的操作没什么区别）
所以主要描述授权码模式
授权码模式
使用场景
在平常的登录中，使用最多的第一为密码登录，第二的也就是授权码模式这种鉴权方式了
参考: 微信第三方应用使用微信授权登录 、 包括QQ授权微博登录 等等
明细
他么都有非常明显的特点， 例如微信公众号: 唤起微信用户登录
流程: 公众号登录 -> 微信请求授权 -> 确认 -> 返回原平台 -> 登录成功
公众号作为一个应用程序，
- 1、获取用户信息的时候，发现用户未登录，然后重定向授权中心（微信），
- 2、微信监测用户登录态，登录态正常（一般来说在公众号中打开都是登录的），用户确认，
- 3、确认后微信根据开发者配置的重定向地址，携带code 返回公众号。
- 4、公众号监测到用户已经授权成功，后端将获取到的code，向微信发起请求 asses_token
- 5、微信确认code可用，返回用户包含的权限(scope)和 token 已经 刷新 token
- 6、公众号确认用户信息可用，将token存储起来，并且返回数据给客户端
- 7、接下来的每次请求，客户端都将携带token向公众号后端发起请求，公众号后端会进行判断token是否过期，过期则重复如上步骤
可以参考阮一峰对于授权码模式的描述
在Laravel 中使用 Passport
推荐官方文档
https://laravel.com/docs/8.x/passport
安装
命令
// 1、请安装对应Laravel 版本的passport
// 2、可以忽略版本 composer require laravel/passport --ignore-platform-reqs -vvv
composer require laravel/passport -vvv
// artisan 运行
// 数据表创建
php artisan migrate
// 秘钥创建
php artisan passport:install
// 创建一个客户端
php artisan passport:client
// 创建完成后，可以从 database.oauth_clients 表中看到
// 注意一下， 一般来说你刚创建的client_id 是 3
// Personal Access Client : 个人访问客户端模式
// Password Grant Client : 密码访问模式
模型
// 这里我们同时配置了 jwt，因为我们用的是前后端分离，没有采用 基本的web鉴权登录
namespace App\Models\Module;
use Illuminate\Notifications\Notifiable;
use Laravel\Passport\HasApiTokens;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Tymon\JWTAuth\Contracts\JWTSubject;
class ModuleUsers extends Authenticatable implements JWTSubject
{
protected $table = 't_module_user';
use HasApiTokens, Notifiable;
public function getJWTIdentifier()
{
return $this->getKey();
}
public function getJWTCustomClaims()
{
return [];
}
}
设置一下自定义的Client模型
主要是因为，我想免授权，就是不需要确认授权直接跳转走
namespace App\Models\Passport;
use Laravel\Passport\Client as BaseClient;
class Client extends BaseClient
{
/**
* Determine if the client should skip the authorization prompt.
*
* @return bool
*/
public function skipsAuthorization()
{
return true;
}
}
-----
// app/Providers/AuthServiceProvider.php
class AuthServiceProvider extends ServiceProvider {
...
public function boot()
{
$this->registerPolicies();
// 覆盖原来的 model
Passport::useClientModel(Client::class);
}
}
配置Guard
这里我们不使用默认的 guard : guard 值得是维持登录态的东西
客户端我们采用 client guard
授权中心我们采用 oauth guard
oauth 授权中心我们采用jwt认证方式, 默认的话使用的 laravel 自带的登录
// config/auth.php
'guards' => [
...
'client' => [
'driver' => 'passport',
'provider' => 'moduleUsers',
'hash' => false,
],
'oauth' => [
'driver' => 'jwt',
'provider' => 'moduleUsers',
'hash' => false,
],
]
'providers' => [
...
'moduleUsers' => [
'driver' => 'eloquent',
'model' => App\Models\Module\ModuleUsers::class,
],
]
干掉原本的中间件
首先我们要确认，哪些路由需要权限认证的哪些不需要的
// 命令
php artisan route:ist
// 结果
// 我们找到核心的几个路由
方法 | 路由 | 中间件别名
POST | oauth/authorize | web,auth
GET | oauth/authorize | web,auth
POST | oauth/token | throttle
如上所示，我们需要使用自定义中间件 接管 web 和 auth 路由的鉴权
否则的话基本会弹出 Login 路由不存在
app/Http/Kernel.php
protected $middlewareGroups = [
'web' => [
...
// 注释如下路由
// \Illuminate\Session\Middleware\AuthenticateSession::class,
..
]
]
...
protected $routeMiddleware = [
...
// 将原来的路由修改为如下路由
'auth' => \App\Http\Middleware\OauthApiTokenMiddleware::class,
// client 为新增
'client' => ClientApiTokenMiddleware::class,
]
接下来我们处理一下，auth 中间件，这个中间件的作用主要是 授权中心的认证，也就是如上中说的 微信的作用
// \App\Http\Middleware\OauthApiTokenMiddleware
namespace App\Http\Middleware;
use App\Services\HttpResponse;
use Closure;
use Cyd622\LaravelApi\Response\ApiResponse;
use Tymon\JWTAuth\Http\Middleware\BaseMiddleware;
class OauthApiTokenMiddleware extends BaseMiddleware
{
use ApiResponse;
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
if (strtoupper($request->method()) === "options") {
HttpResponse::to();
}
$user = null;
// 获取cookie，将cookie放置到header 供jwt进行验证
if($token = $request->get('token')) {
$user = auth(env('MODULE_LOGIN_GUARD'))->setToken($token)->user();
// 设置解析器，否则passport获取不到module User 用户
$request->setUserResolver(function ($guard = null) {
return auth(env('MODULE_LOGIN_GUARD'))->user();
});
}
if($user) {
return $next($request);
}
HttpResponse::toHttp(401, ['redirect' => \env('MODULE_LOGIN')], '请登录', 200);
}
}
如上看到，我们会监测其是否拥有token，有的话则接管 $request 请求中的user，并设置 $request->user() 为我们对应guard的user
为什么要 setUserResolver ，因为 Passport 默认使用的 是 Auth:user() 的方式来获取user，这样会导致他拿到的是 guard 为 auth 的用户，所以重置解析器
HttpResponse 直接抛出响应，参考最底部方法详情
现在我们已经完成了授权中心的认证了，我们来编写一下login的代码
namespace App\Http\Controllers\Module;
use App\Http\Controllers\Controller;
use App\Http\Requests\Module\LoginRequest;
use App\Models\Module\ModuleUsers;
use App\Traits\AuthTrait;
use Cyd622\LaravelApi\Auth\LoginActionTrait;
use Illuminate\Http\Request;
use Illuminate\Support\Arr;
class AuthController extends Controller
{
use LoginActionTrait, AuthTrait;
protected $guard = '';
public function __construct()
{
$this->guard = "oauth";
}
public function login(LoginRequest $request)
{
$credentials = request(['account', 'password', 'app_id']);
if (!$token = $this->attempt($credentials)) {
return $this->error('账号或者密码错误', 200, 401);
}
return $this->respondWithToken($token);
}
public function logout()
{
auth($this->guard)->logout();
return $this->success('退出登陆成功');
}
public function refresh()
{
return $this->respondWithToken(auth($this->guard)->refresh());
}
protected function respondWithToken($token)
{
return $this->success([
'access_token' => $token,
'token_type' => 'bearer',
'expires_in' => 60*60*60,
'redirect' => $this->createRedirectUri()
]);
}
/**
* 创建授权uri
*/
protected function createRedirectUri()
{
$query = [
'client_id' => request()->get('client_id'),
'redirect_uri' => request()->get('redirect'),
'response_type' => 'code',
'scope' => '',
];
return route('passport.authorizations.authorize', $query);
}
public function attempt($credentials)
{
list($username, $password, $app_id) = array_values($credentials);
$account = 'username';
if(filter_var($username, FILTER_VALIDATE_EMAIL)) {
$account = 'email';
}
$user = ModuleUsers::query()->where($account, $username)->where(compact('app_id'))->first();
if (Arr::get($user, 'password') == $password) {
// 使guard 登录成功
$token = auth($this->guard)->login($user);
return $token;
}
return false;
}
}
如上所示， 主要看 login 方法和 attempt 方法，登录成功后，则返回数据，告知前端要进行重定向地址
回到前端
1、创建登录界面，并设置登录
2、创建请求拦截器
这里的登录界面是授权中心的登录界面，所以我们要知道登录的客户端是谁，所以我们携带 client_id 和 redirect_uri 来到登录界面
// login.vue
mounted() {
const { redirect_uri, client_id } = this.$route.query;
if (!redirect_uri) {
redirect_uri = '/document';
}
if (!client_id) {
client_id = 3;
}
this.client_id = client_id
this.redirect_uri = redirect_uri;
}
// login submit
await login(Object.assign(this.form, {client_id: this.client_id, redirect_uri: this.redirect_uri}))
.then(({ data }) => {
const token = data.access_token;
this.$store.dispatch('login', token);
this.loading = false;
this.$notify({
title: '提示',
message: '登录成功',
type: 'success'
});
// 登录成功后，重定向到授权客户端权限的地方，这里由于我们
// 在 client Model 中 app/Models/Passport/Client.php
// 设置了 skipsAuthorization 方法
// 所以它会直接重定向到，数据库中配置的地址，并且会带上code
setTimeout(() => {
window.location.href = data.redirect + "&token=" + token
}, 2000)
})
.catch(() => {
this.loading = false;
});
前端客户端
async mounted() {
// 设置当前 client id
await this.setClient();
// 检查是否包含code
// code 存在则表明现在登录阶段
await this.hasCode();
}
/**
* 设置当前的客户端
*/
setClient() {
this.$store.dispatch('client_id', this.client_id);
},
/**
* 监测到包含code的时候操作
*/
async hasCode() {
const { code } = this.$route.query;
if (!code) {
return;
}
let token = '';
// getToken 对应的
await getToken({ code: code, client_id: this.client_id })
.then(({ data }) => {
token = data.access_token;
if (!token) {
return false;
}
})
.catch(e => {
console.log(e);
});
await this.$store.dispatch('login', token);
window.location.href = 'document';
},
HttpResponse 方法
仅供参考