プログラミングせずにCognitoで新規ユーザー登録&サインインを試してみる

プログラミングせずにCognitoで新規ユーザー登録&サインインを試してみる

Cognitoって新規ユーザー登録画面やサインイン画面をプログラミングするイメージがあって、非プログラマーには敷居が高いんだよなぁ……。そんなあなたのために、このブログを書きました。Cognitoの敷居をちょっと下げるため、プログラミング無しでCognitoを試してみます。
Clock Icon2019.09.17

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Amazon Cognitoってユーザー認証をマネージドに管理してくれるサービスでさわってみたいけど、
新規ユーザー登録画面やサインイン画面をプログラミングするイメージがあって、非プログラマーには敷居が高いんだよなぁ……。


そんなあなたのために、このブログを書きました。

Cognitoの敷居をちょっと下げるため、プログラミング無しCognitoを試してみます。

要するに、AWS CLICognitoを使う手順を紹介します。

Cognitoの機能自体は、弊社ブログで詳しく解説しているのでぜひこちらを御覧ください。

AWS構成図

こんな感じの構成をマネジメントコンソールから作ります。
そして、AWS CLIを利用して新規ユーザー登録(サインアップ)サインインcurlコマンドを利用してAPI Gatewayの認証を試してみます。

構築手順

Cognitoユーザープールを作成する

CognitoではユーザープールとIDプールが提供されていますが、 今回はユーザープールを作成します。

プール名を適当に入力し、「デフォルトを確認する」を選択して次へ進みます。

設定はデフォルト値のままとして、「プールの作成」をします。

ユーザープールを作成すると、プールIDが発行されます。のちほど使用するのでメモしておきます。

次にアプリクライアントを作成します。

アプリクライアント名は適当に入力し、「サーバーベースの認証でサインイン API を有効にする (ADMIN_NO_SRP_AUTH)」にだけチェックを入れて、「アプリクライントの作成」をクリックします。

アプリクライントを作成すると、アプリクライアントIDが発行されます。のちほど使用するのでメモしておきます。

API Gatewayを作成する

APIの例を利用して「PetStore」のAPI Gatewayを作成します。

API Gatewayが作成できたら、オーサライザーを作成します。

名前は適当に設定して、タイプはCognitoを選択します。 Cognitoユーザープールには先ほど作成したCognitoユーザープール名を入力します。 トークンのソースは、「Authorization」とします。

次に認証の設定をします。今回はペット一覧を取得するGETメソッドに認証をかけます。
「リソース」→「/petsのGET」→「メソッドリクエスト」の順にクリックしていきます。

「認可」の項目で、先ほど作成したオーサライザーを選択して、チェックマークをクリックします。

次にAPI Gatewayのデプロイをします。 「アクション」から「APIのデプロイ」を選択します。

ステージ名を適当に設定して、デプロイします。

デプロイが終わると、APIにアクセスするためのURLが発行されます。

このURLに curl コマンドで /pets にアクセスしてみると、認証できていないためUnauthorizedになることがわかります。

$ API_GATEWAY_URL=https://xxxxxxxxxx.execute-api.us-west-2.amazonaws.com/test
$ curl ${API_GATEWAY_URL}/pets
{"message":"Unauthorized"}

Cognitoをオーサライザーに設定している場合、Authorizationヘッダに、Cognitoで発行した期限切れでないIDトークンを指定することでAPIが呼び出せます。このAPI Gatewayにアクセスできるよう、Cognitoでサインアップとサインイン(IDトークンの取得)をやっていきます。

Cognitoのサインアップ

Cognitoユーザープールを作ったばかりで、ユーザーがいないので新規ユーザーを作ります。
AWS CLIでは aws cognito-idp sign-up コマンドで実施できます。

サインアップには、E-mailの検証が必要になります。ユーザー検証用のメールが配信されるので、必ず自分で受信可能なメールアドレスを設定してください。

$ CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxx
$ USER_EMAIL="[email protected]"
$ PASSWORD="Password01@"
$ aws cognito-idp sign-up \
  --client-id ${CLIENT_ID} \
  --username ${USER_EMAIL} \
  --password ${PASSWORD} \
  --user-attribute "Name=email,Value=${USER_EMAIL}"

サインアップするとCognitoユーザープールにユーザーが追加されていることが確認できます。 ただし、アカウントのステータスは UNCONFIRMED であり、検証が完了するまでサインインはできません。

Verification Codeがユーザー登録で設定したE-mailに送信されるので確認して、メモしておきます。

次にユーザー検証をします。
AWS CLIでは aws cognito-idp confirm-sign-up コマンドで実施できます。

$ CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxx
$ USER_EMAIL="[email protected]"
$ CONFIRMATION_CODE=000000
$ aws cognito-idp confirm-sign-up \
  --client-id ${CLIENT_ID} \
  --username ${USER_EMAIL} \
  --confirmation-code ${CONFIRMATION_CODE}

検証が終わるとCognitoユーザープールのユーザーのステータスが CONFIRMED に変わっていることがわかります。E-mailの検証も終わり、このユーザーはサインイン可能な状況になりました。

Cognitoのサインイン

次にCognitoのサインインをしてみます。
AWS CLIでは aws cognito-idp admin-initiate-auth コマンドで実施できます。

$ USER_POOL_ID=us-west-2_xxxxxxxxx
$ CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxx
$ USER_EMAIL="[email protected]"
$ PASSWORD="Password01@"
$ aws cognito-idp admin-initiate-auth \
  --user-pool-id ${USER_POOL_ID} \
  --client-id ${CLIENT_ID} \
  --auth-flow ADMIN_NO_SRP_AUTH \
  --auth-parameters "USERNAME=${USER_EMAIL},PASSWORD=${PASSWORD}"

サインインすると、こんな形でアクセストークンリフレッシュトークンIDトークンが返ってきます。

トークンについてはこちらのブログで詳しく書いたのでご参照ください。

API Gatewayの認証では、IDトークンを使用するので --query を使ってIDトークンだけ取り出します。

$ ID_TOKEN=$(aws cognito-idp admin-initiate-auth \
  --user-pool-id ${USER_POOL_ID} \
  --client-id ${CLIENT_ID} \
  --auth-flow ADMIN_NO_SRP_AUTH \
  --auth-parameters "USERNAME=${USER_EMAIL},PASSWORD=${PASSWORD}" \
  --query "AuthenticationResult.IdToken" | sed "s/\"//g") && echo ${ID_TOKEN}

API Gatewayで認証してアクセスする

API Gateway作成時にも言及しましたが、API GatewayではCognitoをオーサライザーに設定している場合、Authorizationヘッダに、Cognitoで発行した期限切れでないIDトークンを指定することでAPIが呼び出せます。
ちなみに、Cognitoにより発行されたIDトークンは1時間以内に有効期限切れになるので注意が必要です。

curl コマンドを利用して、ヘッダにIDトークンを付与してAPI Gatewayにアクセスしてみます。

$ API_GATEWAY_URL=https://xxxxxxxxxx.execute-api.us-west-2.amazonaws.com/test
$ curl -H "Authorization:${ID_TOKEN}" ${API_GATEWAY_URL}/pets
[
  {
    "id": 1,
    "type": "dog",
    "price": 249.99
  },
  {
    "id": 2,
    "type": "cat",
    "price": 124.99
  },
  {
    "id": 3,
    "type": "fish",
    "price": 0.99
  }
]

無事にCognitoのユーザーでAPI Gatewayのユーザー認証ができました。

終わりに

プログラミング無しでCognitoのサインアップ、サインイン、ユーザー認証を試してみました。

実際にプログラムでCognitoを使って新規ユーザー登録、サインイン、ユーザー認証をやってみるのは、こちらの弊社ブログがとても参考になると思います。

Cognitoは試してみるまでのハードルが高いのですが、ユーザー認証をマネージドにやってくれて、そのための機能がいろいろそろっているのでとても便利です。
本ブログがCognitoを検証する際の助けになれば幸いです。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.