menu

Laravel PassportでWeb APIの認証を実装する【実装編】

公開日:2018年04月13日 カテゴリー:開発

はじめに

システム部の高橋です。
この記事は、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つですね。
以下のコマンドを実行します。

コマンドが成功したら、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を使って、コマンド一発で生成できます。
以下のコマンドを実行してください。

コマンドが成功すれば、resources/js/components/passport以下に3つのVue.jsのコンポーネントが生成されていると思います。

コンポーネントをVueに登録する

先ほど生成したコンポーネントを実際に使うには、Vueに登録しておく必要があります。
resources/js/app.jsを編集します。
Vueのインスタンスをnewしている箇所の直前に、以下のコードを挿入します。

assetsを再コンパイルする

コンポーネントを登録した後は、npmでVue.jsのassetsを再コンパイルする必要があります。
npmはNode.jsにおけるComposerのようなもので、依存性の管理やコマンドの実行が出来ます。
Node.jsをインストールしているのであれば、npmも同時にインストールされています。
以下のコマンドを実行してください。

npmコマンドが失敗する場合

以下のメッセージを出力して、コマンドが失敗する場合があります。
'cross-env' is not recognized as an internal or external command,

コマンドが失敗する場合は、以下のステップを試してみてください。

① cross-envをnpmの開発依存関係に追加する
② キャッシュをクリアして、再度npm依存関係をインストールする

実行するコマンドは以下のようになります。

一連の手順を踏んだら、再度以下のコマンドを実行してください。

Compiled successfullyというメッセージが表示されていれば成功です。

認証後のホーム画面でLaravel Pssportのコンポーネントを表示する

コンポーネントを登録、再コンパイルしたので、Laravelから利用できるようになりました。
これらのコンポーネントは、トークンの発行のためのコンポーネントなので、認証後の画面に表示します。
Web UIでログインを行った直後に表示される、resources/views/home.blade.phpを編集します。
You are logged in!と書いてある箇所を、以下のタグで置き換えてください。

Tokenをリクエストヘッダーに含め、Web APIを利用する

ここまでで、実装は完了しています。
では、以下のフローにのっとって実際にリクエストを発行してみましょう。

① EmailとPasswordでWebアプリにログインする
② 管理画面で自身に紐づくTokenを発行、確認する
③ Tokenをリクエストヘッダーに含め、Web APIを利用する

認証トークンを発行してみる。

ログインをしてみると、以下のように表示されるはずです。
Parsonal Access Tokensを使ってトークンを生成してみましょう。
トークンが発行されたら、それを控えておいてください。

Web APIを認証してリクエストを発行してみる

認証トークンをHTTPヘッダに設定して、HTTPリクエストをしてみます。
例えばapi/userなどは認証が必要なAPIです。
HTTPヘッダーのAuthorizationBearer {AccessToken}を設定して、リクエストしてみてください。
ユーザーの一覧が、JSONで取得できれば成功です。

まとめ

Laravel Passportは、環境構築を終えてしまえば、実装はそれほど難しくありません。
UIをカスタマイズしたり、別の認証方式の利用も出来ると思うので、やってみるとよいと思ういます。

参考文献