Laravel5.6 + Passport实现Api接口认证

最新推荐文章于 2021-10-04 21:04:44 发布

Holyzq

最新推荐文章于 2021-10-04 21:04:44 发布

阅读量571

点赞数 1

分类专栏： Laravel PHP

本文链接：https://blog.csdn.net/huangdj321/article/details/104955012

版权

PHP 同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

Laravel

16 篇文章 0 订阅

订阅专栏

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

后端(Laravel5.6框架)

1、使用composer安装Passport，打开终端，执行命令：

composer require laravel/passport   #安装完成后，在composer.json文件中会看到文件版本信息

2、接下来，将Passport的服务提供者注册到配置文件config/app.php的providers数组中

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中授权看守器guards的api的driver选项改为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::group(['prefix' => 'cart', ['middleware' => 'client.credentials']], function () {  // laravel6.0以数组形式定义

// Route::prefix('cart')->middleware('client.credentials')->group(function(){   // laravel5.6以对象形式定义
    ...
});

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：

前端(vue.js)

首先去加载用户登录组件，即用户登录页面。

配置路由，在index.js文件中写入如下代码

const routes = [
    .
    .
    {
        path: '/customer/login',
        name: 'login',
        component: () => import('../views/customer/Login.vue')
    },
    {
        path: '/customer/register',
        name: 'register',
        component: () => import('../views/customer/Register.vue')
    },
    .
    .
  ]
})

2、加载组件，在customer文件夹的Login.vue文件中写入如下代码：

<template>
    <div class="servicelogin">
        <div class="wrap">
            <div class="title" align="center" style="font-size: 20px;font-weight: bold">
                长乐账号登陆
            </div>
            <div class="main" align="center">
                <div class="login">
                    <div>
                        <input type="text" placeholder="请输入邮箱" class="email" v-model="customer.email">
                    </div>
                    <div>
                        <input type="password" placeholder="请输入密码" class="password" v-model="customer.password">
                    </div>
                </div>
                <div class="button">
                    <input type="submit" value="登录" class="button" @click="submit">
                </div>
            </div>

            <div class="other" align="center">
                <div class="_register">
                    <router-link :to="{name: 'register'}"  class="registe">
                        立即注册
                    </router-link>
                    | <a href="" class="registe">忘记密码？</a>
                </div>

                <div>
                    <p class="icon">其他登录方式</p>
                </div>

                <div class="i">
                    <i class="fa fa-qq" aria-hidden="true"></i>
                    <i class="fa fa-weibo" aria-hidden="true"></i>
                    <i class="fa fa-weixin" aria-hidden="true"></i>
                </div>

            </div>

            <div class="footmsg" align="center">
                <div class="zi">
                    <a href="">简体</a> | <a href="">繁体</a> | <a href="">English</a> | <a href="">常见问题</a>
                </div>
                <div class="di">
                    长乐公司版权所有-京ICP备10046444
                    <br>
                    -京ICP证110507号
                </div>
            </div>
        </div>
    </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: '9ibbfYbPknQYnzqytdY1w8oMCdHiSboxlcQe0kzm',//同上
                    username: this.customer.email,
                    password: this.customer.password,
                }
               
                this.axios.post('/oauth/token', data)
                    .then(res => {
                        // console.log(res);
                        // return;
                        if (res.status == 200) { //如果成功了，就把access_token存入localStorage
                            localStorage.token_type = res.data.token_type
                            localStorage.access_token = res.data.access_token
                            this.$router.go(-1);
                        }
                    })
            }
        }
    }
</script>

<style scoped>
    .wrap {
        margin-top: 30px;
    }

    .login input {
        margin-top: 26px;
        width: 275px;
        height: 41px;
        line-height: 41px;
    }

    .button input {
        background-color: #ff6700;
        color: #ffffff;
        border: 2px solid #ff6700;
        border-radius: 5px;
        width: 275px;
        height: 41px;
        line-height: 41px;
        margin-top: 26px;
    }

    .other {
        margin-top: 20px;
        color: #9b9b9b;
    }

    .footmsg {
        margin-top: 150px;
        line-height: 22px;
        color: #9b9b9b;
    }

    .footmsg a {
        color: #9b9b9b;
    }

    .registe {
        color: #9b9b9b;
    }

    .i i {
        padding-top: 15px;
        font-size: 16px;
        letter-spacing: 15px;
    }

    .fa-qq {
        color: #059ede;
        border: 1px dashed #fffff9
    }

    .fa-weibo {
        color: #ff7a58;
        border: 1px dashed #fffff9
    }

    .fa-weixin {
        color: #3bff5a;
        border: 1px dashed #fffff9
    }

    .icon {
        padding-top: 15px;
    }
</style>

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 => {
    // 如果不是200， 清除token信息并跳转到登录页面
    if (error.response.status != 200) {
      alert('您还没有登录，请先登录')
      router.push({    //如果失败，跳转到登录页面
        name: 'Login'
      })
    }
    return Promise.reject(error.response.data)
  });

export default axios;

重新访问项目，在商品详情页面点击加入购物车，你会发觉奇迹已经出现，当你没有登录时，提示跳转到登录页面。输入账号密码，登录成功，浏览器查看 localStorage，如图：

此时就能拿到用户id。接下来，继续测试。

4、去Cart控制器中，找到购物车首页方法，获取用户的id，获取方式如下：

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

5、在postman中输入购物车首页接口地址，并传入所需参数，参数参考地址：http://laravelacademy.org/post/8909.html，如下：

'headers' => [
    'Accept' => 'application/json',
    'Authorization' => 'Bearer '.$accessToken,
],

测试结果如图：

拿到用户id后，把后端之前定义的customer_id全部改为通过接口方法获取。至此，Passport接口认证的全部操作已完成。

接下来去完成用户注册功能

首先在后端 routes/api.php 文件中写上注册的路由：

Route::namespace('Api')->group(function () {
    Route::post('/register', 'HomeController@register');// 前端注册
    .
    .
});

在 HomeController 控制器中写上注册的接口，代码如下：

public function register(Request $request)
{
    $email = $request->email;
    $password = $request->password;
    $check_password = $request->check_password;

    if (!$email || !$password) {
        return response()->json(['success' => false, 'message' => '邮箱或密码必填！']);
    }

    $pattern = "/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/";
    if (!preg_match($pattern, $email)) {
        return response()->json(['success' => false, 'message' => '邮箱格式不正确！']);
    }

    if ($check_password != $password) {
        return response()->json(['success' => false, 'message' => '两次密码输入不一致！']);
    }

    $customer = Customer::where('email', $email)->first();
    if ($customer) {
        return response()->json(['success' => false, 'message' => '邮箱已被注册！']);
    }

    $password = \Hash::make($password);
    $customer = Customer::create([
        'email' => $email,
        'password' => $password
    ]);

    return response()->json(['success' => true, 'message' => '注册成功！', 'customer' => $customer]);
}

postman 接口测试如图：

接下来，去 vue 那边写个注册的路由，上面的代码已完成！

前端注册页面参考代码如下：

<template>
    <div class="register">
        <div class="title" align="center">
            注册长乐账号
        </div>
        <form @submit.prevent="onSubmit">
            <div class="registry" align="center">
                <div>
                    <input type="email" placeholder="请输入邮箱" class="shu" v-model="customer.email">
                </div>
                <div>
                    <input type="password" placeholder="请输入密码" class="shu" v-model="customer.password">
                </div>
                <div>
                    <input type="password" placeholder="请输入确认密码" class="shu" v-model="customer.check_password">
                </div>
                <div class="sub_register">
                    <input type="submit" value="立即注册">
                </div>
                <p class="msg">
                    点击“立即注册”，即表示您同意并愿意遵守长乐<a href="">用户协议</a>和<a href="">隐私政策</a>
                </p>
            </div>
            <div class="footmsg" align="center">...
                <div class="zi">
                    <a href="">简体</a> | <a href="">繁体</a> | <a href="">English</a> | <a href="">常见问题</a>
                </div>
                <div class="di">
                    长乐公司版权所有-京ICP备10046444
                    <br>
                    -京ICP证110507号
                </div>
            </div>
        </form>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                customer: {}
            }
        },
        methods: {
            onSubmit() {
                this.axios.post('/api/register', this.customer)
                    .then(response => {
                        if(response.data.success == false){
                            alert(response.data.message);
                            return false;
                        } else {
                            alert(response.data.message)
                            this.$router.push({name: 'login'})
                        }
                    })
            },
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    body {
        background-color: #eeeeee;
    }

    .register {
        margin-top: 30px;
    }

    .title {
        font-size: 20px;
        font-weight: bold;
    }

    .registry input {
        margin-top: 26px;
        width: 275px;
        height: 41px;
        line-height: 41px;
    }

    .sub_register input {
        background-color: #ff6700;
        color: #ffffff;
        border: 2px solid #ff6700;
        border-radius: 5px;
    }

    .msg {
        margin-top: 20px;
        width: 275px;
        line-height: 22px;
        padding-bottom: 10px;
        color: #9b9b9b;
    }

    .msg a {
        color: #9b9b9b;
        text-decoration: underline;
    }

    .footmsg {
        margin-top: 175px;
        line-height: 22px;
        color: #9b9b9b;
    }

    .footmsg a {
        color: #9b9b9b;
    }
</style>

各种测试，测试成功后，customers 表里面就应该有一个新的用户了。

Tips:如果你在项目中跑passport命令执行报错的话，可参考这篇文章来解决问题：https://laravel-china.org/topics/16245

总结：接口认证逻辑思想

1、安装passport后，生成client_id和 client_secret
2、使用username、password、client_id、client_secret、grant_type参数，调用/oauth/token接口，拿到access_token
3、需要认证的接口，加上中间件。这时候直接访问接口地址，会提示没有认证的。带上access_token后，才能拿到接口的数据。

面试可以这样回答：
接口认证，我们使用的是基于oauth2服务中的passport依赖包，具体流程：
1、后端执行命令安装passport包，生成client_id和 client_secret
2、当用户访问认证接口时，带上所需参数，调用接口地址（oauth/token），获取access_token
3、在需要认证的接口路由中加上路由中间件，此时前端访问接口地址时，会提示没有认证，即没有登录，当用户输入账号密码登录成功后，把access_token和token_type存入客户端的localStorage中，所有接口带上access_token 后才能拿到接口数据。

Holyzq

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Laravel5.6 + Passport实现Api接口认证

很多企业做项目使用前后端分离，后端提供接口地址，前端使用接口地址拿数据，并渲染页面。那么，前端用户登录如何使用接口进行认证？网上各种教程写的不堪入目，完全看不懂，所以我根据自己的理解，写下此篇文章，希望能帮助到大家。##后端(Laravel5.6框架)1、使用composer安装Passport，打开终端，执行命令：composer require laravel/passport #安...
复制链接

扫一扫