やりたいこと
スマホアプリ(Android,iOSアプリ)内でAPI Gatewayにアクセスできるのを、あらかじめログインされたユーザに制限したい。
やり方
- Cognitoでログイン画面を作る。
- ログイン時に取得したIdTokenを使ってAPIGatewayにアクセスする。
以上。
Cognitoでログイン画面をつくる
ユーザプールの作成
まず、Cognitoでユーザプールを作成します。
この辺を見れば大丈夫？(公式)
注意点としては、作成後に変更できない項目があるので、その辺気を付けないと後で泣きます。
アプリの設定
ユーザプール作成時にアプリクライアントの設定をしていない場合は、コンソールの左ペインの「アプリクライアント」を選択し、「アプリクライアントの追加」を押下します。
アプリクライアント名に任意のアプリ名称を設定し、「クライアントシークレットを生成」のチェックを外します。
その他は、適当に設定して、「アプリクライアントを作成」を押下します。
アプリクライアントIDが表示されるので、メモしておきます。(後でも見れるので、忘れても大丈夫)
次に左ペインの「ドメイン名」を選択します。
ドメインのプレフィックスに任意の値を入力し「使用可能かチェック」を押下、使用できるなら「変更の保存」を押下します。
なお、ここで設定した、https://<ドメインプレフィックス>.auth.xxxxx.amazoncognito.comは、あとで貼付られるようにメモ帳なのにつなげた状態でコピっておくとよいと思います。
左ペインの「アプリクライアントの設定」を選択し、下記画像の用に設定します。
注意点としては、コールバックURL,サインアウトURLで、ここにログイン後、ログアウト後に遷移するURLを設定ます。
カンマ区切りで複数設定できるので、web用とアプリ用なんてこともできます。
なお、webの場合はhttpは不可でhttps必須となります。アプリの場合スキームを任意に指定できます。
また、許可されているOAuthフローは「Authorization code grant」と「Implicit grant」にチェックをつけます。
設定したら、「変更の保存」を押下します。
これでCognito側の設定は完了です。
ログインする
ログイン画面
ログインはwebブラウザから行います。
アプリの場合でもブラウザに飛ばしてログイン画面を表示します。
URLは、
https://<ドメインプレフィックス>.auth.xxxxx.amazoncognito.com/login?response_type=code&client_id=<アプリID>&redirect_uri=<コールバックURL>
となります。
ここにアクセスすると・・・以下のようなログイン画面が表示されます。
ここでアカウント作成(Sign up)や、パスワード再発行なども行えます。
ログインに成功すると、コールバックURLで指定したURLに遷移します。
その際、URLの末尾に**?code=xxxxxxxxxx**のように認証コードが付与されます。
このコードを使って各種トークンを取得します。
トークンの取得
トークンを取得するには、下記URLにPOSTでアクセスします。
https://<ドメインプレフィックス>.auth.xxxxx.amazoncognito.com/oauth2/token
パラメータ
| キー | 値 |
|---|---|
| grant_type | authorization_code |
| client_id | アプリID |
| redirect_uri | コールバックURL |
| code | 認証コード |
成功すると、以下のようなJSONが返ってきます。
{
"id_token": "<Idトークン>",
"access_token": "<アクセストークン>",
"refresh_token": "<リフレッシュトークン>",
"expires_in": 3600,
"token_type": "Bearer"
}
APIGatewayにアクセスする時には、このうち<Idトークン>を使用します。
ただし、この<Idトークン>は有効期限が1時間しかありません。
なので、有効期限が切れた場合は<リフレッシュトークン>を使って<Idトークン>を再取得する必要があります。
IDトークンの再発行
IDトークンを再発行するには、下記URLにPOSTでアクセスします。
https://<ドメインプレフィックス>.auth.xxxxx.amazoncognito.com/oauth2/token
パラメータ
| キー | 値 |
|---|---|
| grant_type | refresh_token |
| client_id | アプリID |
| refresh_token | <リフレッシュトークン> |
リフレッシュトークンもデフォルトあと30日で有効期限がきれるため、その場合は再度ログインして認証コードからやり直す必要があります。
APIGatewayの設定
オーソライザーの設定
APIGatewayのコンソールで、対象のリソースの「オーソライザー」を選択して「新しいオーソライザーの作成」を押下します。
名前に任意の値、タイプは「Cognito」、Cognitoユーザープールには作成したユーザープールを選択します。
トークンのソースには、任意の値を設定します。(ここで設定した値をキーにして、APIにアクセスするときにヘッダにIdトークンを設定します)
「作成」を押下します。
結果が表示されるので【テスト」を押下します。
認証トークンにを入力し、「テスト」を押下します。
問題なければレスポンスに色々ユーザ情報が表示されます。
認証設定
対象リソースのメソッドで「メソッドリクエスト」を押下します。
認証で、Cognitoユーザープールオーソライザーにある先ほど作成したオーソライザーを選択して、チェックマークを押下します。
※オーソライザーが表示されない場合、左ペインでいったん別のリソースを選択したり、コンソールを開きなおしたりすると表示されると思います。
APIアクセス
あとは、普通にAPIにアクセスする際にヘッダにIdトークンを設定すればOKです。
Idトークンを設定せずにアクセスすると、「401 Unauthorized」が返ってきます。
その他
基本的な部分のみですが、このままだとセキュリティ的には弱い部分もあるので下記公式ドキュメントを参照するとよいと思います。
https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/cognito-userpools-server-contract-reference.html
また、FacebookやGoogleのアカウントでのログインも可能です。
https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/cognito-user-pools-social-idp.html