Laravel PassportでWeb APIの認証を実装する【実装編】
はじめに
システム部の高橋です。
この記事は、Laravel Passportで、Web APIの認証を実装するチュートリアルです。
前回の記事で、Laravel Passportの初期設定と、テストを行いました。
今回は、実際にWeb UIからトークンを発行して、認証済みのリクエストが出来るようにします。
このチュートリアルの目的
改めて、このチュートリアルの目的として、達成すべき要件を確認しておきます。
① EmailとPasswordでWebアプリにログインする
② 管理画面で自身に紐づくTokenを発行、確認する
③ Tokenをリクエストヘッダーに含め、Web APIを利用する
今回やること
まず、Laravel Passportの初期設定は済んでいるものとします。
今回は、以下の手順に従って、パーソナルアクセストークンを利用する実装を行っていきます。
① LaravelでWebUIによる認証機能を生成する
② Vue.jsのコンポーネントでLaravel Passportの実装を行う
③ 動作確認を行う
パーソナルアクセストークンとは
パーソナルアクセストークンは、いくつか用意されているLarave Passportの認証フローの中の1つです。
パーソナルアクセストークンには、以下の特徴があります。
- ユーザはアプリケーションのUIを通じてTokenを発行する
- パーソナルアクセストークンは常に長期間有効で、期間を変更できない
- Web APIへのリクエストヘッダにアクセストークンを含め、認証を行う。
パーソナルアクセストークンを用いると、ログインしたユーザーが、認証済みの画面にてTokenを発行し、それを利用してWeb APIを利用するようなストーリーになります。
初めにやっておくこと
まず、前回の記事のチュートリアルを完了していることが前提です。
また、Node.jsが必要になりますので、Node.js公式サイトからダウンロードしておいてください。
LaravelでWebアプリの認証機能を生成する
認証機能は、ひな形をartisanコマンド一発で作成することが出来ます。
このようなスキャッフォルド機能が充実しているのも、Laravelの特徴の1つですね。
以下のコマンドを実行します。
|
1 |
$ php artisan make:auth |
コマンドが成功したら、http://{hostName}/registerへアクセスしてみてください。
以下のようなユーザの登録画面が表示されていたら成功です。
ナビゲーションのLoginをクリックすることで、ログイン画面にも遷移できます。
かなりあっさりと簡単な認証が実装出来てしまいました。
ぜひ、ユーザを作ってログインを試してみてください。
Vue.jsでLaravel PassportのUIの実装を行う
Web APIの認証に使うTokenの発行を行うWeb UIを実装します。
Laravel Passportは、モダンJSフレームワークの1つであるVue.jsで、コンポーネントを提供しています。
Laravel には Laravel mixというものがあり、簡単にVue.jsなどが利用できるようになっています。
Vueのコンポーネントを生成する
Vueのコンポーネントも、artisanを使って、コマンド一発で生成できます。
以下のコマンドを実行してください。
|
1 |
$ php artisan vendor:publish --tag=passport-components |
コマンドが成功すれば、resources/js/components/passport以下に3つのVue.jsのコンポーネントが生成されていると思います。
コンポーネントをVueに登録する
先ほど生成したコンポーネントを実際に使うには、Vueに登録しておく必要があります。
resources/js/app.jsを編集します。
Vueのインスタンスをnewしている箇所の直前に、以下のコードを挿入します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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') ); |
assetsを再コンパイルする
コンポーネントを登録した後は、npmでVue.jsのassetsを再コンパイルする必要があります。
npmはNode.jsにおけるComposerのようなもので、依存性の管理やコマンドの実行が出来ます。
Node.jsをインストールしているのであれば、npmも同時にインストールされています。
以下のコマンドを実行してください。
|
1 |
$ npm run dev |
npmコマンドが失敗する場合
以下のメッセージを出力して、コマンドが失敗する場合があります。
'cross-env' is not recognized as an internal or external command,
コマンドが失敗する場合は、以下のステップを試してみてください。
① cross-envをnpmの開発依存関係に追加する
② キャッシュをクリアして、再度npm依存関係をインストールする
実行するコマンドは以下のようになります。
|
1 2 3 4 5 |
$ npm install --save-dev cross-env $ rm -rf node_modules $ rm package-lock.json yarn.lock $ npm cache clear --force $ npm install |
一連の手順を踏んだら、再度以下のコマンドを実行してください。
|
1 |
$ npm run dev |
Compiled successfullyというメッセージが表示されていれば成功です。
認証後のホーム画面でLaravel Pssportのコンポーネントを表示する
コンポーネントを登録、再コンパイルしたので、Laravelから利用できるようになりました。
これらのコンポーネントは、トークンの発行のためのコンポーネントなので、認証後の画面に表示します。
Web UIでログインを行った直後に表示される、resources/views/home.blade.phpを編集します。
You are logged in!と書いてある箇所を、以下のタグで置き換えてください。
|
1 2 3 4 5 |
<div id="app"> <passport-clients></passport-clients> <passport-authorized-clients></passport-authorized-clients> <passport-personal-access-tokens></passport-personal-access-tokens> </div> |
Tokenをリクエストヘッダーに含め、Web APIを利用する
ここまでで、実装は完了しています。
では、以下のフローにのっとって実際にリクエストを発行してみましょう。
① EmailとPasswordでWebアプリにログインする
② 管理画面で自身に紐づくTokenを発行、確認する
③ Tokenをリクエストヘッダーに含め、Web APIを利用する
認証トークンを発行してみる。
ログインをしてみると、以下のように表示されるはずです。
Parsonal Access Tokensを使ってトークンを生成してみましょう。
トークンが発行されたら、それを控えておいてください。
Web APIを認証してリクエストを発行してみる
認証トークンをHTTPヘッダに設定して、HTTPリクエストをしてみます。
例えばapi/userなどは認証が必要なAPIです。
HTTPヘッダーのAuthorizationにBearer {AccessToken}を設定して、リクエストしてみてください。
ユーザーの一覧が、JSONで取得できれば成功です。
まとめ
Laravel Passportは、環境構築を終えてしまえば、実装はそれほど難しくありません。
UIをカスタマイズしたり、別の認証方式の利用も出来ると思うので、やってみるとよいと思ういます。
