30天API學習日誌 - 4

Day4

今日目標

今天是要建立Laravel OAuth 2認證，以利於API資料索取安全控管，並且參照youtube影片Laravel 6 Api tutorial #2 Api authentication進行學習。

OAuth 2

在開始之前我們可以先認識什麼是OAuth 2核發認證，以及基本的流程: OAuth 2 流程圖解

OAuth 2大概可以想像成一個組織進行活動(瀏覽網頁)時，組織外包的遊覽車(客戶端)、報到服務處(授權伺服器)、大會會場內部(資源伺服器)
當我們透過瀏覽車載到大會會場時，需要先去報到服務處報到(Client Credentials)，並取得入場QRcode(核發Access Token)，只要拿到這個QRcode我們就可以在大會裡玩各式各樣的遊樂設施(用Access Token請求資源)。

更詳細的內容在OAuth 2 流程圖解可以繼續給他看下去。

熱血開code~

今天我們將透過Laravel的Passport函式庫進行OAuth2的認證程序，所以我們要把之前建立的資料表轉成OAuth2結構型態的資料表，在這邊可以先把之前記錄下來在Mysql中的資料備檔後，將我們指定的database清空，並拿來進行OAuth2結構轉型，大概的步驟如下。

那今天教學影片中，大概分為四個步驟

1. Laravel安裝Passport
2. Passport設定檔(config)之於Auth service以及UserEntity資料設定
3. API Route設定
4. 寫好Model及controller的內容
5. 測試API

1. Laravel安裝Passport

1.1. 利用以下指令安裝Laravel OAuth2相關的套件=>Passport

先進入您的專案資料夾中，並利用composer安裝package

composer require laravel/passport

1.2. 安排套件設定檔，service provider

在使用安裝好的passport套件，必須先建立設定檔，讓Laravel知道安裝的套件在哪裡、決定啟用。

- config/app.php

...
'providers' =>[
    Laravel\Passport\PassportServiceProvider::class,
],
...

1.3. reload設定

套用指令 (常常看到artisan的出現，林北又不認識，下一篇我們來講artisan到底是尛)

php artisan migrate
php artisan passport:install

2. Passport設定檔(config)之於Auth service以及UserEntity資料設定

如果照著上一篇順著做下來，當初在創立時已有app/User.php
這個步驟主要是要讓User的資料表與註冊、登出的流程中，嫁接入OAuth 2套件 - Passport
所以，我們要讓UserEntity檔認識誰是 Passport

2.1. 讓主人(User)看看

- app/User.php

<?php
namespace App;

use Laravel\Passport\HasApiTokens; // 加入HasApiTokens準備檢查Token, Scope用
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use HasApiTokens,Notifiable;// 加入HasApiTokens準備檢查Token, Scope用

    /**
    * The attributes that are mass assignable.
    *
    * @var array
    */
    protected $fillable = [
        'name', 'email', 'password',
    ];

    /**
    * The attributes that should be hidden for arrays.
    *
    * @var array
    */
    protected $hidden = [
        'password', 'remember_token',
    ];

    /**
    * The attributes that should be cast to native types.
    *
    * @var array
    */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

2.2. 主人:你誰? 我管家(AuthService)說不認識你

之後，埋入Passport的路徑，讓登入時可以自動連到Passport功能，並再順利地傳出去Passport的OAuth相關資訊

- app/Providers/AuthServiceProvider.php

<?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(); //我虔誠的祈禱，請OAuth2回應我，並賜與我神秘的力量~!!!
    }
}

2.3. 管家: 你註冊好了，去簽到吧~

接下來讓Laravel的auth service設定檔紀載我們決定要使用Passport作為我們開放資源的功能之一

- config/auth.php

<?php
return [
    ...
    'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],
        'api' => [
            'driver' => 'passport', //修改drive，讓怕死破斗成為我們的奴隸~ 哇哈哈哈哈!
            'provider' => 'users',
        ],
    ],
    ...
]

3. API Route設定

接下來就是令人興奮的Route設定，只要接上，就可以從外面(瀏覽器)看到裡面(取得網站資源)，好害羞好害羞地~

- routes/api.php

<?php
...
    Route::post('login', 'API\UserController@login');
    Route::post('register', 'API\UserController@register');
    Route::group(['middleware' => 'auth:api'], function(){
    Route::post('details', 'API\UserController@details');
    });
...
>

4. 寫好controller的內容

4.1. controller要做的事

在這裡我們將在controller當中寫入註冊(可以取得Token), 登入(可以取得Token), 用戶列表(取得Token之後才能進行的事情)

<?php
namespace App\Http\Controllers\API;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\User;
use Illuminate\Support\Facades\Auth;
use Validator;
class UserController extends Controller
{
public $successStatus = 200;
/**
    * login api
    *
    * @return \Illuminate\Http\Response
    */
    public function login(){
        if(Auth::attempt(['email' => request('email'), 'password' => request('password')])){
            $user = Auth::user();
            $success['token'] =  $user->createToken('MyApp')-> accessToken;// MyApp可以帶入你自己的project name
            return response()->json(['success' => $success], $this-> successStatus);
        }
        else{
            return response()->json(['error'=>'Unauthorised'], 401);
        }
    }
/**
    * Register api
    *
    * @return \Illuminate\Http\Response
    */
    public function register(Request $request)
    {
        //這一段在進行validation，很重要，在瀏覽頁可以回傳欄位錯誤的json資料回去
        $validator = Validator::make($request->all(), [
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'required',
            'c_password' => 'required|same:password',
        ]);
        if ($validator->fails()) {
            return response()->json(['error'=>$validator->errors()], 401);
        }
        //這裡才是開始處理資料
        $input = $request->all();
        $input['password'] = bcrypt($input['password']);
        $user = User::create($input);
        $success['token'] =  $user->createToken('MyApp')-> accessToken;// MyApp可以帶入你自己的project name
        $success['name'] =  $user->name;

        return response()->json(['success'=>$success], $this-> successStatus);
    }
/**
    * details api
    *
    * @return \Illuminate\Http\Response
    */
    public function details()
    {
        $user = Auth::user();
        return response()->json(['success' => $user], $this-> successStatus);
    }
}
>

4.2. 重新Run一次

php artisan serve

5. 測試API

我們可以透過post man進行API測試，來! 看圖

5.1. 註冊

5.2. 登入

5.3. 檢視用戶資料

如此一來OAuth 2 型態的API完成了!

我肚子好餓，從下午邊做邊寫，寫到晚上九點了，我的天