Laravel5.6 + Passport 實現 API 介面認證

huangdj 發表於 2019-09-11

很多企業做專案使用前後端分離,後端提供介面地址,前端使用介面地址拿資料,並渲染頁面。那麼,前端使用者登入如何使用介面進行認證?網上各種教程寫的不堪入目,完全看不懂,所以我根據自己的理解,寫下此篇文章,希望能幫助到大家。

後端(Laravel5.6框架)

1、使用composer安裝Passport,開啟終端,執行命令:

composer require laravel/passport   #安裝完成後,在composer.json檔案中會看到檔案版本資訊

2、接下來,將Passport的服務提供者註冊到配置檔案config/app.phpproviders陣列中

Laravel\Passport\PassportServiceProvider::class,

3、執行資料庫遷移

php artisan migrate  #資料庫中會生成介面認證所需的5張表

4、建立密碼授權客戶端

php artisan passport:client --password
#建立了client_id和client_secret,前端登入驗證的時候必須把這兩個玩意兒帶著

5、獲取keys

php artisan passport:keys

6、配置路由
開啟服務提供者AuthServiceProvider, 在boot方法中加入如下程式碼:

use Laravel\Passport\Passport;
public function boot() { 
    $this->registerPolicies();  
    Passport::routes(); //介面認證的路由
}

然後將配置檔案config/auth.php中授權看守器guardsapidriver選項改為passport
我這裡的customer表是前端使用者表,但是laravel預設的是user表,所以這裡需要做如下配置:

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],

    'api' => [
        'driver' => 'passport',
        'provider' => 'customers',
    ],
],
'providers' => [
    'users' => [
        'driver' => 'eloquent',
        'model' => App\User::class,
    ],
    'customers' => [
        'driver' => 'eloquent',
        'model' => App\Models\Shop\Customer::class,
    ],
],

7、註冊中介軟體,在app/Http/Kernel.php檔案中的$routeMiddleware陣列中新增如下中介軟體

protected $middleware = [
    \App\Http\Middleware\CheckForMaintenanceMode::class,
    \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
    \App\Http\Middleware\TrimStrings::class,
    \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    \App\Http\Middleware\TrustProxies::class,
    \Barryvdh\Cors\HandleCors::class,
];

**********************************************************************

protected $routeMiddleware = [
'client.credentials'=>\Laravel\Passport\Http\Middleware\CheckClientCredentials::class,
];

然後在需要認證介面路由檔案routes/api.php前面加上這個中介軟體。

Route::prefix('cart')->middleware('client.credentials')->group(function(){
    ...
});

8、前端使用者表customer模型裡面做如下配置:

use Illuminate\Foundation\Auth\User as Authenticatable;
use Laravel\Passport\HasApiTokens;

class Customer extends Authenticatable
{
    use HasApiTokens;
     ....   
}

至此,後端的所有配置已完成。

接下來,開啟介面測試工具(postman),輸入介面地址:wechat.test/oauth/token,請求型別 POST,填上如下引數,點選 send 你會看到後臺返回了前端所需的access_token
Laravel5.6 + Passport 實現 API 介面認證

前端(vue.js)

首先去載入使用者登入元件,即使用者登入頁面。

  1. 配置路由,在index.js檔案中寫入如下程式碼
import Login from '@/components/customer/Login'
export default new Router({
  routes: [
        ....
    {
      path: '/customer/login',
      name: 'Login',
      component: Login
    },
  ]
})

2、載入元件,在customer資料夾的Login.vue檔案中寫入如下程式碼:

<template>
  <div>
    <input type="email" v-model="customer.email" placeholder="請輸入郵箱">
    <input type="password" v-model="customer.password" placeholder="請輸入密碼">
    <button @click="submit">登 錄</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        customer: {
          email: '',
          password: ''
        }
      }
    },
    methods: {
      submit() {
        //將資料配置好
        const data = {
          grant_type: 'password', //oauth的模式
          client_id: 1,   //上面所說的client_id
          client_secret: 'CO331cA1mqiKgGvvgiDzPxh4CUu19vSEiqxM7LHD',//同上
          username: this.customer.email,
          password: this.customer.password,
        }
        this.axios.post('/oauth/token', data)
          .then(res => {
            if (res.status == 200) { //如果成功了,就把access_token存入localStorage
              localStorage.token_type = res.data.token_type
              localStorage.access_token = res.data.access_token
              this.$router.push({name:'Index'})
            }
          })
      }
    }
  }
</script>

客戶端檢視localStorage,如圖:
Laravel5.6 + Passport 實現 API 介面認證

3、在http.js檔案中設定攔截器,用於判斷使用者是否登入,若沒有登入跳轉到登入頁面。程式碼如下:

//#建立http.js檔案
import axios from 'axios'
import router from '@/router'

// axios 配置
axios.defaults.timeout = 5000;
axios.defaults.baseURL = 'http://wechat.test/';

// http request 攔截器
axios.interceptors.request.use(
  config => { //將所有的axios的header里加上token_type和access_token
    config.headers.Authorization = `${localStorage.token_type} ${localStorage.access_token}`;
    return config;
  },
  err => {
    return Promise.reject(err);
  });

// http response 攔截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    // 401 清除token資訊並跳轉到登入頁面
    if (error.response.status == 401) {
      alert('您還沒有登入,請先登入')
      router.replace({    //如果失敗,跳轉到登入頁面
        name: 'Login'
      })
    }
    return Promise.reject(error.response.data)
  });

export default axios;

重新訪問專案,在商品詳情頁面點選加入購物車,你會發覺奇蹟已經出現,當你沒有登入時,提示跳轉到登入頁面。輸入賬號密碼,登入成功,此時就能拿到使用者id。接下來,繼續測試。

4、去Cart控制器中,找到購物車首頁方法,獲取使用者的id,獲取方式如下:

$customer_id = auth('api')->user()->id;
return $customer_id;

5、在postman中輸入購物車首頁介面地址,並傳入所需引數,引數參考地址:http://laravelacademy.org/post/8909.html,如圖:

Laravel5.6 + Passport 實現 API 介面認證

Laravel5.6 + Passport 實現 API 介面認證

拿到使用者id後,把後端之前定義的customer_id全部改為通過介面方法獲取。至此,Passport介面認證的全部操作已完成。

Tips:如果你在專案中跑passport命令執行報錯的話,可參考這篇文章來解決問題:https://laravel-china.org/topics/16245

總結:介面認證邏輯思想

1、安裝passport後,生成client_idclient_secret
2、使用usernamepasswordclient_idclient_secretgrant_type引數,呼叫/oauth/token介面,拿到access_token
3、需要認證的介面,加上中介軟體。這時候直接訪問介面地址,會提示沒有認證的。帶上access_token後,才能拿到介面的資料。


相關文章

Laravel 多鍵路由繫結 Laravel

Laravel 多鍵路由繫結

Laravel 可以通過兩種方式進行路由模型繫結。在模型中指定路由的鍵/** * 獲取該模型的路由的自定義鍵名。 * * @return string */public function getRou
Elasticsearch 7.2 在 Laravel 中實踐  --經緯度及距離查詢 Laravel|ElasticSearch

Elasticsearch 7.2 在 Laravel 中實踐 --經緯度及距離查詢

上一篇文件中選擇的擴充套件&lt;babenkoivan/scout-elasticsearch-driver&gt;,該擴充套件已有方法whereGeoDistance查詢指定經緯度範圍內的資料,但
老王帶你看原始碼|Laravel 的路由匹配的過程都幹了些什麼? Laravel

老王帶你看原始碼|Laravel 的路由匹配的過程都幹了些什麼?

Laravel 的路由配置有很多,可以設定域名,設定請求協議,設定請求方式,請求路徑。那麼,Laravel在獲取到請求之後,去匹配路由都做了些什麼呢?本文以Laravel5.8原始碼講解,帶你一步步看
『輕鬆部署 Laravel 應用』系列文章快捷連結 Laravel

『輕鬆部署 Laravel 應用』系列文章快捷連結

Wi1dcard 同學的『輕鬆部署 Laravel 應用』系列文章快捷連結《開篇》《00. 登入伺服器》 《01. 寶塔皮膚》《02. 一鍵指令碼》 《03. 探尋一鍵指令碼》《04. 手動部署 -
Laravel passport 多端使用者使用 Laravel

Laravel passport 多端使用者使用

說明使用 passport 進行 admin 端和 customer 端的使用者認證。雖然教程很多,但是我並沒有參照其他教程完整的走下來,所以記錄了自己的開發流程,希望能對其他人有所幫助。github
Laravel/Homestead box v8.2.1 分享 Laravel

Laravel/Homestead box v8.2.1 分享

百度雲:https://pan.baidu.com/s/1oj9g9nAORLswYSvKr...密碼:kvf4
Windows 下 Laravel Mix 資源編譯過程以及產生的錯誤解決 Laravel

Windows 下 Laravel Mix 資源編譯過程以及產生的錯誤解決

環境說明虛擬機器 : Homestead ;物理機 : Windows 10 x64 系統 ;編輯器 : Sublime Text 3 ;終端 : git bash ;說明:以上環境不必完全保持一致
Laravel Vue 下拉框聯動小技巧 Vue|Laravel

Laravel Vue 下拉框聯動小技巧

最近在做一個後臺管理相關的東西,有一個關於下拉框聯動的小技巧可以分享給大家,寫好後不用更改前端程式碼,只需更改後端相應的配置,即可增加相對應的聯動。比如有兩個下拉框一個省和一個市的下拉框,這裡只是拿省
Laravel 資料庫裡的資料刪除 資料庫|Laravel

Laravel 資料庫裡的資料刪除

想請問Laravel資料庫裡的資料如何刪除讓id重新編號,單純刪除資料庫的資料,在重新增加id會從被刪掉的id後開始新增,而不會從刪掉的id開始編號,我該使用什麼artisan command去刪除來
Laravel 模型關聯 「 預載入 」中 with () 方法的功能的示例及說明 Laravel

Laravel 模型關聯 「 預載入 」中 with () 方法的功能的示例及說明

laravel 模型關聯 「 預載入 」 -&gt;with()功能的示例1 模型關聯說明:在動態模型 Status中,指明一條微博動態屬於一個使用者 User&lt;?php..// 動態模型st
關於 Laravel 的一些個人見解 Laravel

關於 Laravel 的一些個人見解

Laravel 是一個全棧框架;我們使用 Laravel 開發業務常見有 3 個方向;1、前端頁面和後端邏輯混合的應用主要是面向對 SEO 有需求的專案;比如說新聞資訊部落格文章等;一般在控制器中 r
分享連結:序言《Laravel 之道》 Laravel

分享連結:序言《Laravel 之道》

分享連結:序言《Laravel 之道》