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.php的boot方法中调用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.php中api部分的授权保护项（ driver ）改为passport。此调整会让你的应用程序在接收到 API 的授权请求时使用Passport 的TokenGuard来处理

'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请求

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的开发环境

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: