详解Laravel5.6 Passport实现Api接口认证


Posted in PHP onJuly 27, 2018

很多企业做项目使用前后端分离,后端提供接口地址,前端使用接口地址拿数据,并渲染页面。那么,前端用户登录如何使用接口进行认证?网上各种教程写的不堪入目,完全看不懂,所以我根据自己的理解,写下此篇文章,希望能帮助到大家。

后端(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 $routeMiddleware = [
'client.credentials'=>\Laravel\Passport\Http\Middleware\CheckClientCredentials::class,
];

然后在需要认证接口路由文件 routes/api.php 前面加上这个中间件。

Route::group(['prefix' => 'cart', 'middleware' => ['client.credentials']], 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.prevent="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 接口认证的全部操作已完成。

总结:接口认证逻辑思想

1、安装passport后,生成client_id和 client_secret

2、使用username、password、client_id、client_secret、grant_type参数,调用/oauth/token接口,拿到access_token

3、需要认证的接口,加上中间件。这时候直接访问接口地址,会提示没有认证的。带上access_token后,才能拿到接口的数据。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
功能齐全的PHP发送邮件类代码附详细说明
Jul 10 PHP
PHP求最大子序列和的算法实现
Jun 24 PHP
php中将时间差转换为字符串提示的实现代码
Aug 08 PHP
使用JSON实现数据的跨域传输的php代码
Dec 20 PHP
PHP编码转换
Nov 05 PHP
PHP获取MSN好友列表类的实现代码
Jun 23 PHP
分享下PHP register_globals 值为on与off的理解
Sep 26 PHP
PHP+AJAX实现投票功能的方法
Sep 28 PHP
ucenter中词语过滤原理分析
Jul 13 PHP
PHP的curl函数的用法总结
Feb 14 PHP
PHP生成zip压缩包的常用方法示例
Aug 22 PHP
PHP正则表达式函数preg_replace用法实例分析
Jun 04 PHP
PHP实现的DES加密解密类定义与用法示例
Nov 02 #PHP
详解laravel安装使用Passport(Api认证)
Jul 27 #PHP
Ubuntu彻底删除PHP7.0的方法
Jul 27 #PHP
PHP实现的CURL非阻塞调用类
Jul 26 #PHP
PHP等比例压缩图片的实例代码
Jul 26 #PHP
PHP实现非阻塞模式的方法分析
Jul 26 #PHP
php实现等比例压缩图片
Jul 26 #PHP
You might like
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
python logging类库使用例子
2014/11/22 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
最新的大学生找工作自我评价
2013/09/29 职场文书
求职自荐信怎么写
2014/03/06 职场文书
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
文明社区申报材料
2014/08/21 职场文书
内科护士节演讲稿
2014/09/11 职场文书
擅自离岗检讨书
2014/09/12 职场文书
教育见习报告范文
2014/11/03 职场文书
期末复习计划
2015/01/19 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫