Material、バックエンドAPIにLaravelを利用したシングルページアプリケーションを開発するためのスターターパッケージです。Elixirが予め構成されたLaravelプロジェクトと言った構成になっています。フロントエンドのAngularJSから呼び出されるLaravel側のAPIに対する認証はJWTを利用します。この記事では、主にフロントエンドのAPIの呼び出しと、バックエンドのJWT生成、検証に利用されるパッケージの構成について調べたことをまとめていきます。1.5をベースに以下のパッケージが含まれています。involved」に載っています。ComposerパッケージLaravel側のパッケージは、バックエンドAPIおよび認証をサポートする以下のようなパッケージを含んでいます。Sharingを提供するパッケージBowerパッケージフロントエンドのパッケージ管理はBowerを利用しています。APIへのアクセスに利用しますnpmパッケージnpmは、テスト・ビルド関連のパッケージを含みます。AngularJSのビルドに使われる主なパッケージは以下のとおりです。プロダクション用JSファイルののソースマップ生成に使用AngularJSのビルド用gulpタスクは、tasks/angular.task.jsに記述されています。含まれるパッケージを踏まえて、システム構成を図にしてみるとおおむね以下のようになります。認証の際は、フロントエンドではSatellizerを利用してバックエンドの認証APIを呼び出します。Laravel側のバックエンドAPIは、すべてdingo/apiのミドルウェアを通ります。dingo/apiのミドルウェアは、バージョンの管理や認証などの処理を行います。ログインAPIは、tymon/jwt-authを利用して認証を行いJWTをクライアントに返します。Satellizerは、JWTを受け取るとローカルストレージに保存します。認証後のAPI呼び出しについては、フロントエンドはRestangularを利用してAPIを呼び出します。Restangularは、デフォルトでSatellizerが保存したJWTをローカルストレージから取得してAuthorizationヘッダにセットするように構成されています。APIが呼び出されます。以上が、APIの呼び出し周りの主な流れです。以降、プロジェクトの動作を実際に確認しつつ、詳細を追っていきます。Homesteadが便利です。以下、ドキュメントのInstallをHomesteadで試したコマンドになります。install.envは、HomesteamのMySQLでそのまま利用可能です。マイグレーションします。2014_10_12_100000_create_password_resets_tableデフォルトのLaravel5プロジェクトと同じユーザーテーブルが作成されました。gulpを実行するとangularディレクトリ以下のアセットがビルドされます。gulp以上で、ブラウザにアクセスすると以下のようなデフォルトページが表示されます。個々では、laravel5angularmaterial.appをHomesteadのホスト名に設定しています。Structure」に記述されています。Starterで追加されているディレクトリ、ファイルをハイライトしてみると以下のようになります。webpack.config.js[/bashAngularJSプロジェクトは、angularディレクトリにまとめられています。ビルドタスクは、laravel-elixirのgulpfile.jsに、tasksディレクトリの各タスクが読み込まれるように設定されています。tasks/angular.task.jsは、webpack.config.jsを読み込みwebpackを使って、JSやCSSをビルドするように構成されています。テストについては、tests/angularディレクトリに置かれた*.spec.jsが対称となるようにkarma.conf.jsに設定されいます。APIと対応するページがすでに用意されています。それらをアプリケーションに組み込むには、ユーザー登録・ログインページヘリンクするボタンを配置するだけです。ここでは、ログインの仕組みについてデフォルトの実装を確認してみます。ユーザー登録・ログインの動作確認まずは、デフォルトのログインページを確認してみます。Angularのルーティングは、AngularRouterを利用しており、ルーティングの設定はangular/config/routes.config.jsにあります。以下、ログインページとユーザー登録ページのルーティングが確認できます。getView(‘register’)}}})...}[/js]ブラウザで、/#/registerにアクセスすると以下のユーザー登録ページが表示されますログインページは、/#/loginを開きます。バックエンドのログインAPI実装Laravel側のログインAPIを見てみます。ログインAPIはapp/Http/Controllers/Auth/AuthController.phpに実装されています。}}[/php]認証処理は、tymon/jwt-authが提供するJWTAuthファサードのattempt呼び出します。標準のAuth::attemptは、認証が成功したかどうかの真偽値を返しますが、JWTAuthは、JWTを返します。認証に成功した場合は、ユーザー情報とJWTをレスポンスとして返します。生成されたJWTの内容を確認するにはjwt.ioのDebuggerが便利です。以下、上記のJWTを検証してみた結果になります。Satellizerによる認証APIの呼び出しLaravelに実装された認証APIをAngularJSから呼び出す処理については、Satellizerを利用して実装しています。Satellizerの設定は、angular/config/satellizer.config.jsにあります。ログインAPIまたはユーザー登録APIのレスポンスJSONに含まれるJWTのキーログイン画面で、[Login]ボタンを押すと、コントローラのloginメソッドが呼ばれ、$authでインジェクションされるSatellizerのloginメソッドを実行すると、ログインAPIが呼び出されます。メソッドでログインし、レスポンスのdataのJWTを$auth.setTokenでローカルストレージに保存します(Satellizerのloginメソッドの中(20行目)でsetTokenが実行されるので、不要な気がする)。satellizer.config.jsでJWTを含むオブジェクトのキーをdataに指定し、また、tokenNameのデフォルトはtokenなので、レスポンスのJSONから、data.tokenの値を_というキー(デフォルト設定では、satellizer_token)でローカルストレージに保存します。Firefoxのローカルストレージインスペクタで保存されたJWTを確認すると、satellizer_tokenにJWTが保存されていることを確認できます。StarterのバックエンドAPIは、dingo/apiを利用して実装しています。dingo/apiは、LaravelでAPIを実装するために以下のような機能を提供しています。api:docsコマンドを利用してAPIドキュメント(Markdown形式)を生成してれる機能と、APIを実装するにあたって必要十分な機能が揃っています。JWT認証の設定dingo/apiのデフォルトの認証プロバイダはBasicなので、JWT認証プロバイダを利用する場合は設定が必要になります。dingo/apiの設定ファイルは、config/api.phpです。config/api.phpのauth.jwtを以下のようにセットします。‘Dingo\Api\Auth\Provider\JWT’,],[/php]JWTの検証は、tymon/jwt-authが内部で利用されます。APIにJWT認証を設定dingo/apiに指定した認証をAPIにかける場合、ミドルウェアはapi.authを指定します。以下、はデフォルトのルーティングですが、対象のAPIはまだありませんが、37行目に雛形として準備されています。最後にAPIを追加して、API呼び出し周りの動作と仕組みを確認していきます。追加するAPIは、TutorialのPostを作成するAPIを追加します。Postモデルの作成--migrationオプションを指定してPostモデルを生成します。2016_08_01_072721_create_posts_tableマイグレーションに、nameとtopicフィールドを追加します。Schema::drop('posts');}}[/php]マイグレーションを適用します。2016_08_01_072721_create_posts_tableコントローラーとルーティングの作成ここで実装するのはcreateメソッドのみですが、他のCRUD処理も実装することを想定して、--resourceオプションを指定してPostControllerを作成してみます。Controllerのコードのcreateメソッドの内容をコピペします。response()-&gt;success(compact('post'));}...}[/php]追加したAPIを、認証の対象としてルーティングを追加します。dingo/apiの認証プロバイダを呼び出すミドルウェアapi.authが指定されている箇所に追加します。Pageに沿って、AngularJS側に、Post追加用のフォームを追加します。フロントエンドのルーティングフロントエンドのルーティングは、angular/config/routes.config.jsに設定します。routesのコードをコピーして追加します。trueを指定します。getView(‘create_post’)}}});[/js]この処理は、angular/run/routes.run.jsに記述されています。Eventsイベント発生時に、$authでインジェクションされるSatellizerのisAuthenticatedメソッドで認証済みかどうかチェックし、認証していなければログインページを表示しています。successfully」とToastが表示されます。ローカルストレージから、satellizer_tokenを削除してPostの作成をためしてみると401が返ってくることが確認できます。Watchしておきます。watchartisanコマンドで、ログアウトボタンを生成します。