使用 Laravel-passport 構建 OAuth2

RayFong_Chan發表於2020-06-11
LaravelPassportOAuth

寫這篇部落格是因為在社群瞎逛很久了，好像沒有找到這型別的部落格，好像大多都是利用createToken方法生成token就結束教程了，文件又看不太懂，經過摸索，我是終於知道一丟丟新知識，趁著公司目前沒什麼事做，就像寫一篇部落格，這是我人生第一篇部落格，有不好的地方請輕噴，多多指教，謝謝各位大佬。

不廢話了，直接進入正題。

1、安裝laravel

因為我是學習，就安裝最新版的就好了
直接執行命令：

composer create-project laravel/laravel --prefer-dist passport-server

等待命令執行完成就可以了,安裝之後我的習慣是先配置資料庫，就在env檔案裡面配置。

使用laravel-passport構建oauth2
這個根據自己的環境去配置

2、安裝laravel/passport

直接執行命令

composer require laravel/passport

也是等命令執行完成就好了，由於我們需要用到前端vue的內容，所以我們也要安裝一下前端腳手架

composer require laravel/ui --dev

等待安裝好了之後，執行一下

php artisan ui vue --auth

生成一下登入註冊的介面,生成之後我們直接點選登入介面時，發現是沒有樣式的，所以要執行

npm install
npm run dev

等待執行完成之後，再點選登入註冊頁面時，就可以正常顯示了。
這時候你可能會說了，md搞這麼久只弄了介面？稍安勿躁，這個真的急不了，接下來就是配置passport的內容了。
首先先遷移一下資料庫

php artisan migrate

生成 passport key

php artisan passport:install

配置
使用laravel-passport構建oauth2
配置 Passport 相關路由資訊

# App\Providers\AuthServiceProvider
...
use Laravel\Passport\Passport;

class AuthServiceProvider extends ServiceProvider
{
     ...
    public function boot()
    {
        $this->registerPolicies();

        Passport::routes();

        Passport::tokensExpireIn(now()->addDays(15));

        Passport::refreshTokensExpireIn(now()->addDays(30));

        Passport::personalAccessTokensExpireIn(now()->addDays(7));
    }
}

然後修改User模型，讓User模型使用Password 提供的 Trait

使用laravel-passport構建oauth2
接著執行命令，生成Passport的vue元件

php artisan vendor:publish --tag=passport-components

生成之後在app.js裡面註冊元件

使用laravel-passport構建oauth2

Vue.component('passport-clients', require('./components/passport/Clients.vue').default);

Vue.component('passport-authorized-clients', require('./components/passport/AuthorizedClients.vue').default);

Vue.component('passport-personal-access-tokens', require('./components/passport/PersonalAccessTokens.vue').default);

重新編譯，生成新的js和css檔案

npm run dev

然後我們在web.php路由檔案中定義一個路由

Route::get('/passport','HomeController@passport')->name('passport');

在一開始就有的HomeController裡建立一個方法

public function passport()
{
  return view('passport');
}

在views下新建一個檔案passport.blade.php

@extends('layouts.app')

@section('content')
    <div id="app" class="container">
        <passport-clients></passport-clients>
        <passport-authorized-clients></passport-authorized-clients>
        <passport-personal-access-tokens></passport-personal-access-tokens>
    </div>
@endsection

這樣我們就可以訪問到passport的介面了。
不過要先登入，所以要先去註冊賬號，或者在資料庫直接新增賬號密碼，這裡就不弄了。
ps：沒登陸會報這樣的錯誤，登入就好了

使用laravel-passport構建oauth2
以下時沒有任何報錯的介面

使用laravel-passport構建oauth2

3.建立一個client

點選create new client建立一個新的客戶端
使用laravel-passport構建oauth2
建立好之後使用瀏覽器訪問一下

http://server.test/oauth/authorize?client_id=your_client_id&redirect_uri=your_redirect_uri&response_type=code&scope=*

使用laravel-passport構建oauth2

點選授權，會回撥到你填的回撥地址
把code複製去請求獲取token

http://laravel.test/auth?code=def50200ae8e8d2d218d2a3eec275bd0b32dad3ce4346656600ff9320715fea7210ab36630774ef37d1f565dd6a19963d955f601b20299be9d4729b1237702182e2da24e35d6a3d5c122bbec4cc057dd5cd95b84479ec56f158d1b15a2e0bd0cce4123d45d49bbf5b8ffca4a965380447477f4d33570360cbe1d9a014efaa5dd9a92150ea24270a2ad389cd0b0771c32d74b402ec57c8ce0de7bd19a6e5515e3eda55e2a8cd9fef205e2234b409724913ac0f231d9b2f815e84a1a3b5a95581edddac0af9c6cb019dc44460f81ed1e3318d33adf47f0de20b2cb7f52fa796f83a52f777316a5b1643b5ff8f8a3e0e3f978fe2a9b5abbeaf7873c7b6902dae9f662257a58159e9614725c9c5872f0aca6c23473a4b5c7e6add9bfc82a85ff0b482586a56d15511ad2553fed3e96a40c045e7068881daf8bf460d3758260f5a71cf259bde24792f968ea2b20f3bb655ee4f854ea7b7b469eaa3a9cee

這時候可以開啟apipost

使用laravel-passport構建oauth2

到這裡，獲取token成功，之後就可以拿這個token去訪問伺服器上的資源了，本教程到此結束。
ps：我自己也就研究到這裡，我看其他教程時透過createToken自己建立一個token，這樣的話也可以，就是沒有涉及到oauth2的流程。有不足的地方請多多指教，謝謝。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章