技術検証 - Amplify x Cognito

[kawabata2018]

背景

• 8 と関連

• Cognito認証をReactアプリに組み込むためにAmplifyを活用する

To do

• 技術調査中に分かったことをメモにまとめる

完了条件

• Cognito認証をAmplifyを使ってReactアプリに組み込むイメージがついている

[kawabata2018]

参考

• https://github.com/aws-amplify/amplify-js/issues/1298
• AWS cognitoとReactでログインを実装する
• AmplifyでCognitoのHosted UIを利用した認証を最低限の実装で動かしてみて動作を理解する

[kawabata2018]

CloudFront経由でAPI Gatewayの認証エンドポイントにアクセスしたい

• デフォルトだとAuthorizationヘッダーが転送されない
• ヘッダーを許可するように設定してあげないといけない

https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-authorization-header/

[kawabata2018]

Cognitoオーソライザーを紐づけたAPI Gatewayが呼び出すLambdaからユーザープールグループの実行ロールを取り出す

https://aws.amazon.com/jp/premiumsupport/knowledge-center/cognito-user-pool-group/

[kawabata2018]

CloudFront経由でAPI Gatewayの認証エンドポイントにアクセスするときのキャッシュポリシー

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/using-managed-cache-policies.html

Amplifyというマネージドのキャッシュポリシーがある！

どうやら...Hostヘッダーが邪魔でエラーになる？

https://qiita.com/folky_records/items/2a231b14c08be82a183a

[kawabata2018]

AWS Amplify での Cognito アクセスは React Context.Provider を使って認証処理を Hooks 化しよう

https://qiita.com/G-awa/items/99cb84c62fcd113943a6#amplify-js-%E3%81%A7%E3%82%82-react-hooks-%E3%82%92%E4%BD%BF%E3%81%84%E3%81%9F%E3%81%84

[kawabata2018]

Amplify 公式

• Amplify config
• Authenticator Recommended Usage
• Configuring Amplify Categories (Authentication) "App client secret needs to be disabled"

[kawabata2018]

35 で完了

認証情報の持たせ方についての調査は#34 で継続