vuejs 2.0 & Laravel 5.3 — CORS 跨域资源共享 (2)

上篇 vuejs 2.0 & Laravel 5.3 — CORS跨域资源共享 (1) 分享了无身份验证的简单 CORS,这篇是关于 Oauth2身份验证下的CORS。数据库使用sqlite,Laravel安装 passport 组件。因为我是新手,所以把我的操作都详细记录下来,便于以后查询。 :yum:


OAuth2身份验证的CORS

Laravel 响应域相关操作

1)、执行下面命令,安装passport组件

$ composer require laravel/passport

2)、修改laravel_domain\config\app.php文件,将Laravel\Passport\PassportServiceProvider::class,添加到$providers属性中。

3)、修改.env 文件,启用sqlite

DB_CONNECTION=sqlite

4)、参照laravel_domain\config\database.php文件中sqlite的配置, 在laravel_domain\database 下新建database.sqlite文件,用于存储数据

'sqlite' => [
        'driver' => 'sqlite',
        'database' => env('DB_DATABASE', database_path('database.sqlite')),
        'prefix' => '',
    ],

5)、执行下面命令,生成UsersTableSeeder填充器

$ php artisan make:seeder UsersTableSeeder

6)、修改laravel_domain\database\seeds\UsersTableSeeder.php文件, 填充数据(增加一个用户)

<?php

use App\User;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\Hash;

class UsersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        // 填充的数据
        $user1 = [
        'name' => 'fred',
        'email' => 'fred@gmail.com',
        'password' => Hash::make('password')
        ]; 

        User::create($user1);   
    }
}

7)、修改laravel_domain\database\seeds\DatabaseSeeder.php文件,调用UsersTableSeeder填充器

<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
       //调用UsersTableSeeder
        $this->call(UsersTableSeeder::class);
    }
}

8)、执行下面命令,进行数据迁移及填充

$ php artisan migrate
$ php artisan db:seed

9)、执行下面命令,创建生成安全访问令牌时用到的加密密钥,同时,也会创建「私人访问」客户端和「密码授权」客户端

$ php artisan passport:install

10)、将Laravel\Passport\HasApiTokens Trait 添加到 laravel_domain\app\User.php模型中,这个 Trait 会给你的模型提供一些辅助函数,用于检查已认证用户的令牌和使用作用域

<?php

namespace App;

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

class User extends Authenticatable
{
    use HasApiTokens, Notifiable;

11)、在laravel_domain\app\Providers\AuthServiceProvider.phpboot方法中调用Passport::routes函数。这个函数会注册一些在访问令牌、客户端、私人访问令牌的发放和吊销过程中会用到的必要路由

<?php

namespace App\Providers;

use Laravel\Passport\Passport;
use Illuminate\Support\Facades\Gate;
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;

class AuthServiceProvider extends ServiceProvider
{
    /**
     * The policy mappings for the application.
     *
     * @var array
     */
    protected $policies = [
        'App\Model' => 'App\Policies\ModelPolicy',
    ];

    /**
     * Register any authentication / authorization services.
     *
     * @return void
     */
    public function boot()
    {
        $this->registerPolicies();

        Passport::routes();
    }
}

12)、将配置文件laravel_domain/config/auth.phpapi部分的授权保护项( driver )改为passport。此调整会让你的应用程序在接收到 API 的授权请求时使用PassportTokenGuard来处理

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

    'api' => [
        'driver' => 'passport',
        'provider' => 'users',
    ],
],

13)、我在macOS下使用 DB Browser for SQLite 可视化工具对sqlite数据库进行操作,查询得到「密码授权」客户端数据id: 2 secret: k0zLEeejZOdvf7M4j4qsBQmojzA2T5zdkM34tmdu,下面我们操作 Vuejs 请求域,使用OAuth2的密码模式,实现CORS请求
file

Vuejs 请求域相关操作

1)、修改vue_domain/src/App.vue文件中created函数,使用OAuth2的密码模式,发送POST请求

created () {
    // 密码模式相关参数
    const postData = {
      grant_type: 'password',
      client_id: 2,
      client_secret: 'k0zLEeejZOdvf7M4j4qsBQmojzA2T5zdkM34tmdu',
      username: 'fred@gmail.com',
      password: 'password',
      scope: ''
    }
    // 发送POST请求,向认证服务器申请 token
    this.$http.post('http://localhost:8000/oauth/token', postData)
      .then(response => {
        console.log(response)
      })
  }

2)、访问http://localhost:8080/,在控制台可查看到包含token的响应信息

记得要启动 Vuejs 和 Larave的开发环境

file
3)、得到了access token的值后,我们就可以用它来获取 Laravel 响应域的数据了,下面我们继续修改vue_domain/src/App.vue文件中created函数,添加一个GET请求,在控制台显示 Laravel 响应域中的用户信息

created () {
    const postData = {
      grant_type: 'password',
      client_id: 2,
      client_secret: 'k0zLEeejZOdvf7M4j4qsBQmojzA2T5zdkM34tmdu',
      username: 'fred@gmail.com',
      password: 'password',
      scope: ''
    }
    this.$http.post('http://localhost:8000/oauth/token', postData)
      .then(response => {
        console.log(response)
        const header = {
          'Accept': 'application/json',
          'Authorization': 'Bearer ' + response.body.access_token
        }
        this.$http.get('http://localhost:8000/api/user', {headers: header})
          .then(response => {
            console.log(response)
          })
      })
  }

自此,我们完成了一个OAuth2认证下的CORS请求和响应 :smiley::smiley::smiley::smiley::smiley::smiley:

file

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 1
this.$http.post('http://localhost:8000/oauth/token', postData)
      .then(response => {
        console.log(response)
        const header = {
          'Accept': 'application/json',
          'Authorization': 'Bearer ' + response.body.access_token
        }
        this.$http.get('http://localhost:8000/api/user', {headers: header})
          .then(response => {
            console.log(response)
          })
      })

请问 这个 response.body.access_token,使用一次就不能用了吗?为什么我第一步获取 accesstoken,然后拿着这个 accesstoken,去请求接口,第一次能用,之后就会返回 401 错误

6年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!