Laravelについてはこちらにまとめていこうと思います。
はじめに
APIの開発で認証をどのようにしようかと悩んだ時にLaravelでPassportというのがあるらしいので、少し調べながらまとめて行きたいと思います。
環境：
OS : macOS High Sierra 10.13.6
MAMP : 5.1
Laravel : 5.7.6
Laraveのプロジェクトを作成する
詳細な内容は「Laravel開発：１．環境構築をMAMPを使用して作成する」に記載しているので、こちら参考にして下さい。
・sampleという名でプロジェクトを作成します。
$ composer create-project laravel/laravel --prefer-dist sample
・VirtualHostの設定
MAMPを利用している場合は MAMP/con/apache/extra/httpd-vhosts.conf を編集します。
・DBの設定
phpMyAdminから今回のプロジェクト用に「sample」という名でdatabaseを作成します。
・.envの設定
以下の値を変更して下さい。
APP_URL=http://localhost:8888 DB_PORT=8889 DB_DATABASE=sample DB_USERNAME=root DB_PASSWORD=root
この時点で http://localhost:8888/ を表示するとLaravelの画面が表示されます。
Pasportをセットアップする
ここからは公式ドキュメントに沿って進めていきます。
インストール
まずは、Passportをインストールします。
composer require laravel/passport
インストールが終わるとPassportのマイグレーションファイルがが作成されているので、マイグレーションを実行してテーブルを作成します。
php artisan migrate
次にアクセストークンの生成に必要な暗号キーを作成します。次のコマンドで「パーソナルアクセス」と「パスワードグラント」のクライアントが生成されるようです。
php artisan passport:install
実行すると以下のような結果が表示されます。
$ php artisan passport:install Encryption keys generated successfully. Personal access client created successfully. Client ID: 1 Client Secret: Z59H8xw3RCrRRcUnyxy6TccAKrsNgrceEwpqcGmN Password grant client created successfully. Client ID: 2 Client Secret: E2Ug4jn1pmBJVCRSkN3SSUaIB1nl5x8MGkNEfkso
クライアントが2つ作成されているので、Client Secretは保存して置きます。
App\UserモデルにHasApiTokensを追加します
<?php
namespace App;
use Laravel\Passport\HasApiTokens; // 追加
use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
class User extends Authenticatable
{
use HasApiTokens, Notifiable; // HashApiTokensを追加
App\Providers\AuthServiceProvider.php に Passport:rootesメソッドの呼出しを追加します。
アクセストークンの発行、失効、クライアントとパーソナルアクセスの管理するrouteを登録するようです。
public function boot()
{
$this->registerPolicies();
//
Passport::routes(); // bootメソッドに追加
}
最後に、config\auth.php の設定を変更してapiの認証をpassportに変更します。
'guards' => [
'web' => [
'driver' => 'session',
'provider' => 'users',
],
'api' => [
'driver' => 'passport', // 変更
'provider' => 'users',
],
],
フロントエンド
ユーザがログインしてトークンを発行することを想定して、簡単に発行できるテンプレートが用意されているようです。
こちらはVueJSのコンポーネントで利用できるようです。
まずはコンポーネントを用意します。
php artisan vendor:publish --tag=passport-components
resources/js/components/passportに3つのファイルが作成されます。
こちらを/resources/js/app.jsに登録してVueJSから利用できるようにします。
// ↓↓↓↓追加
Vue.component(
'passport-clients',
require('./components/passport/Clients.vue')
);
Vue.component(
'passport-authorized-clients',
require('./components/passport/AuthorizedClients.vue')
);
Vue.component(
'passport-personal-access-tokens',
require('./components/passport/PersonalAccessTokens.vue')
);
// ↑↑↑↑追加
const app = new Vue({
el: '#app'
});
次にnpm run devを実行します。
npm run dev
※ 自分の環境ではエラー（sh: cross-env: command not found）になりましたので、cross-envを追加します。追加後にキャッシュをクリアして再インストールします。
npm install --save-dev cross-env rm -rf node/modules rm package-lock.json npm cache clear --force npm install
再度、実行します。
npm run dev
ユーザ認証を追加してTokenの発行を試してみる
Laravelの認証機能を追加します。
php artisan make:auth
ログイン後のHome画面(resources/views/home.blade.php)で先程のコンポーネントを追加します。
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
@if (session('status'))
{{ session('status') }}
@endif
{{--↓↓↓↓ 追加--}}
{{--↑↑↑↑ 追加--}}
@endsection
実際にユーザを登録してHome画面を表示するとトークンが発行できるようになっています。
次は、APIの実装部分に入っていきたいと思います。
コメント