Amazon Cognito User PoolsがSign In with Appleをサポートしたので使ってみた #reinvent

Amazon Cognito User PoolsでSign In with Appleを使う

本記事は認証認可技術 Advent Calendar 2019の18日目の記事です。認証に関する様々な技術記事が公開されていますので、ぜひチェックいただければと思います。

さて、re:Invent 2019の開催期間より少し前になりますが、Amazon Cognito User PoolsがSign In with Appleをサポートしました。

• Amazon Cognito が Apple でのサインインをサポート開始
• How to set up Sign in with Apple for Amazon Cognito | AWS Security Blog
• Adding Social Identity Providers to a User Pool - Amazon Cognito

re:Invent 2019のモバイル向けのセッションでも触れられており、AWSを使ったモバイルアプリ開発を実装する上では重要なアップデートと言えます。ということで使ってみました。

AWS Amplifyを使ったCognito User Poolsの準備

AWS Amplifyを使い、認証機能だけ持つWebアプリを作ります。

Amplify CLIをインストールしていない場合は、まずインストールします。

$ yarn global add @aws-amplify/cli@latest

適当なディレクトリ配下で amplify init を行います。

$ amplify init
? Enter a name for the project amplify-siwa
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  npm run-script build
? Start Command: npm run-script serve
Using default provider  awscloudformation

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

認証機能を追加します。

$ amplify add auth
$ amplify push

以上で、AWSアカウントにCognito User Poolsのリソースが作成されました。

Apple Developerの設定

まずはApple Developer側の作業です。

Service IDを作成する

まずAppの設定でSign In Appleを有効にします。

次にService IDを作成します。

Web DomainとCallback URLを指定する必要があります。

それぞれCognito User Pools側の情報を以下のように設定します。

項目	値
Web Domain	.auth..amazoncognito.com
Callback URL	https://.auth..amazoncognito.com/oauth2/idpresponse

Keyを作成する

次に認証用のキーを作成します。

鍵がダウンロードできますので保存します。一度しかダウンロードできない点に注意してください。

以上で、Apple Developerでの作業は完了です。

Cognito User Poolsの設定

次に、Cognito User Pools側の作業を行います。AWS Management Consoleにログインし、Cognito User Poolsの設定画面を表示します。右メニューのIdentity providersを開くと、フェデレーションするIDプロバイダの一覧が表示されます。新しくSign in with Appleが追加されています。

設定は非常に簡単です！

Service IDはApple Developerで作成したService IDを設定します。App IDではない点に注意してください。Team IDはApple DeveloperのTeam IDを設定しましょう。Apple Developerへのログイン中、ヘッダーで常に確認できます。Key IDは作成したKeyの詳細で確認できます。Private keyはダウンロード済みの .p8 ファイルをアップロードします。そしてAuthorize scopeはユーザーのApple IDから取得したい情報を設定します。

設定が完了するとチェックマークが付きます。

次にAttribute mappingを開きます。こちらで、Sign in with Appleで得られる情報をCognito User Poolsの情報にマッピングすることができます。Authorize scopeで指定した各属性値を、User Poolの属性値にマッピングします。

以上で完了です！

ログインしてみる

それではログインしてみましょう。Cognito User Poolsは、次のURLにアクセスするとログインを試すことができます。

https://<your_user_pool_domain>/login?response_type=code&client_id=<your_client_id>&redirect_uri=<redirect_uri>

Continue with Appleというボタンが表示されています。

ボタンをクリックすると、Sign In with Appleのログイン画面にリダイレクトします。

初回ログインでは、クライアントに対しての認可が表示されます。

まとめ

Cognito User PoolsでもSign In with Appleが簡単に利用できるようになりました。Appleユーザーに対してはログインエクスペリエンスを向上させることができる機能になりますので、ぜひ導入を検討してみてはいかがでしょうか。

現在はWebのみのサポートとなりますが、ネイティブアプリでも利用できるようになるとFace IDやTouch IDといった手段でもログインできるようになるので、サポートを期待しましょう！