3連休にCognito vue/aws-amplifyを使って手軽に認証機能をハンズオン
eguchi_asial
はじめに
こんにちは、江口です。
前回は人事選考の自動化を作成するにあたり、認証基盤をFlask JWTでOAuth2を自作しました。
が、
認証認可の処理はAWS Cognitoに丸々載せ替えることもできます。
Cognitoに載せ換えることで、前回ほどの労力・工数はかなり削減されます。
ということで、今回はCognito + APIGatewayと時々aws-amplify(with vue)のハンズオンです。
また、今回はFacebookやTwitterなどのThirdPartyは取り扱いません。
目指す構成は以下です。
構成図
- Cognitoに認証を任せ、AccessTokenを取得する
- ※フロントはvue x aws-amplifyの構成です。
- 取得したAccessTokenをAuthorizationHeaderに付与し、APIGatewayをコールする
- APIGateway(lambda)では、tokenの検証と検証を通過すれば、バックに構える各APIにproxyする
- 各APIはクライアントにJSONを返す
- ※各APIはAPIGatewayからのリクエストのみを許可します。
認証はCognitoに任せ、取得したtokenをheaderに仕込んだまま、
APIGatewayもコールしますが、実質APIとしてJSONを返すのはバックに構えるAPIサーバになります。
これにより、Lambdaの処理の中で、URLパターンを見て「/hoge」ならこのAPIに、「/fuga」ならこのAPIに。と、処理を各APIに移譲できます。
認証は共通でCognitoを使うが、サービスは複数ぶら下がることができるという狙いです。
上記が最終形ですが、二回に分けて紹介しようと考えているため、
今回は以下の構成までをハンズオンします。
- Cognitoに認証を任せ、AccessTokenを取得する
- ※フロントはvue x aws-amplifyの構成です。今回はlocalhostです
- 取得したAccessTokenをAuthorizationHeaderに付与し、APIGateayをコールする
- APIGateway(lambda)では、tokenの検証と検証を通過すれば、クライアントにテスト用のJSONを返す
つまり、オリジナルのAPIへのproxy部分は今回は作りません。
あくまで、CognitoとAPIGatewayの連携に焦点を当てたサンプルを作成します。
用語について
今回触れていく用語について簡単に紹介します。
Cognito
認証・認可をサポートしてくれます。
今回は下記のUserPoolsとFederated Identitiesとセットで使います。
APIGateway
APIです。
今回はLambdaと連携してJSONを返します。
オーソライザと呼ばれる機能を使い、Cognitoで認証を通過したアクセスのみ、
APIへのアクセスを認可するようにしています。
認証に通過したユーザーはtokenを取得して持っているはずなので、tokenをAuthorizationHeaderにセットしてAPIにアクセスすることでAPIGatewayにアクセスできるようになります。
aws-amplify
Cognitoを簡単に利用できるようになるjsライブラリです。
これまではCognitoIdentity SDKとAWS SDKを組み合わせて使う必要がありましたが、
amplifyのみで完結できるようになりました。
▼Github
github.com
Try
Cognito – UserPool –
まずはCognitoのUserPool設定からやっていきます。
これがないと始まりません。
AWSマネージメントコンソールにsighnInし、「Cognito」を開き、
以下の「ユーザープールの管理」を押下します。
押下したら、新規でユーザープールを作成しますので、
「tutorial」と命名し、「デフォルトを確認する」を選択します。
デフォルト設定のプレビューが表示されます。
こちらはあとで編集できますので、とりあえず「プールの作成」を押下し、作成を完了します。
完了したらダッシュボードに遷移すると思いますので、
「アプリクライアント」の「アプリクライアントID」の値をコピーしておいてください。
「アプリクライアントの設定」のを押下し、以下になるようにチェックを入れます。
また、注意点として、「アプリクライアント」の「クライアントシークレットの生成」はチェックが外れていることを確認してください。
これだけで、まずは簡単に器ができました!!
最後にUserPoolを利用する側のクライアントの設定をちょろっといじります。
callback urlでerrorが出る場合は、一旦サンプルなので「http://localhost:9999/test.php」とでも入れておいてください。
ログイン成功後にaccess_tokenがハッシュ文字列として付与されたURLにリダイレクトされますが、今回は使いません。
「許可されているOAuthフロー」で「Implicit grant」を選択しましたが、
「Authorization code grant」との違いはこちらを参考にしてください。
ユーザープールのアプリクライアントの設定 – Amazon Cognito
今回は「Implicit grant」 = 「認証エンドポイントから直接AccessTokenを取得」する方法にしました。
Cognito – Federated Identities –
続いて、Identityを作成します。
ヘッダーに「ユーザープール | フェデレーティッドアイデンティティ」とメニューがあるので、「フェデレーティッドアイデンティティ」を押下します。
押下したら、こんな画面に移るので、IDプール名には適当なnameを入力し、
「認証プロバイダー」の「Cognito」タブ「ユーザープールID」に先ほど作成したUserPoolのIDを記入し、アプリクライアントIDに先ほどコピーしたIDを記入します。