Amazon_Cognito_で構築する_スケーラブルな_Web_アプリケーション__シングルページ_Web_アプリケーションに認証を組み込む

2025年4月23日（水）開催のサーバーワークススキルアップトレーニングでの登壇資料です。
https://www.serverworks.co.jp/event/2025423_skilltraining_webinar.html

Transcript

1. Amazon Cognito で構築する スケー ラブルな Web アプリケーション② 〜シングルページ Web アプリケーションに認証を組み込む〜 2024.04.23
2. 2 自己紹介 氏名：兼安 聡 所属：株式会社サーバーワークス アプリケーションサービス部 在住：広島（フルリモート） 担当：DevOps、技術支援、PM、SM 2025 AWS Community Builders 2024 Japan AWS Top Engineers (Database) 2024 Japan AWS All Certifications Engineers 認定スクラムマスター PMP X：@satoshi256kbyte
3. 3 ⚫ シングルページアプリケーションとその効果 ⚫ Amazon Cognitoでできること ⚫ 認証・認可とその方式 ⚫ Amazon Cognitoを組み込んだシングルページアプリケーションのサンプル ⚫ フロントエンドとAmazon Cognitoの連携 ⚫ バックエンドとAmazon Cognitoの連携 ⚫ まとめ 目次
4. 4 はじめに ⚫本記事ではシングルページアプリケーションのことをSPAと呼称します ⚫サンプルシステムのフロントエンドはReactで実装し、Vercelで稼働させています。 ⚫バックエンドはAmazon API Gateway＋AWS Lambdaで実装し、これらを Amazon Cognitoと連携しています。 ⚫Amazon CognitoはAWSの他のサービス、例えばElastic Load Balancingと連携で きます。 Elastic Load Balancingとの連携については前回の発表をご覧ください。
5. シングルページアプリケーションと その効果
6. 6 SPAとその効果 ⚫本発表は前回の続きのため、タイトルに「スケーラブル」とありますが、それ自体 は特効薬ではありません ⚫「スケーラブル」にはどちらかというと前回述べたバックエンドサーバー側の構成 が貢献します ⚫SPAのメリットは、フロントエンドとバックエンドで作業分担がやりやすくなるこ とにあります
7. 7 Webアプリケーションにおけるサーバーへの負荷のかかり方 ⚫仮に、フロントエンドとバックエンドを1台のサーバーで賄うと、サーバーへの負荷 のかかり方は以下のようになります ⚫ここで言う、負荷とはCPU・メモリ・ネットワークなどを指します Webサーバー データベース データ 画像 画像 HTML CSS JavaScript ブラウザ 静的コンテンツの 返却 HTMLの生成 業務ロジック データの操作 データ HTMLの描画
8. 8 Webアプリケーションにおけるサーバーへの負荷のかかり方 ⚫SPAを採用するとこの負荷が分散します ⚫これによりレイヤーごとの最適構成が取りやすくなります 配信サーバー データベース 画像 HTML CSS JavaScript データ ブラウザ 静的コンテンツの返 却 データの操作 データ HTMLの生成 APIサーバー 業務ロジック HTMLの描画
9. 9 SPAの認証サーバーの連携 ⚫SPAの欠点はプログラムが動く場所が分かれることにより、「ログイン状態」を共 有するのが難しくなることにあります ⚫ここを補うのにAmazon Cognitoは役立ちます Amazon Cognito 配信サーバー データベース 画像 HTML CSS JavaScript データ ブラウザ 静的コンテンツの返 却 データの操作 データ HTMLの生成 APIサーバー 業務ロジック HTMLの描画 次のページから話題が変わります
10. Amazon Cognitoでできること
11. 11 Amazon Cognitoとは ⚫ 認証を提供する仕組み ⚫ 主にアプリの認証に使用 ⚫ ユーザー管理を行う ⚫ サインアップ ⚫ ログイン ⚫ パスワードリセット ⚫ など ⚫ JWT トークンを発行する ⚫ IDトークン ⚫ アクセストークン ⚫ IDプールとも言います ⚫ 認可を提供する仕組み ⚫ AWSリソースへのアクセスを管理する ⚫ 一時的なIAMロールを割り当てて、AWSサービスへ のアクセスを制御 ⚫Amazon Cognito はウェブアプリとモバイルアプリ用の認証・認可サービスです 認証 ユーザープール 認可 アイデンティティプール
12. 12 認証・認可の概念 ⚫ 「あなたは誰？」 を確認するプロセス ⚫ 入場口でスタッフが名簿と照合し、本人確認するイ メージ ⚫ 照合が成功すると、入場許可が与えられる ⚫ 「あなたは何ができる？」 を決めるプロセス ⚫ 入場後、申し込み内容に応じてカードを渡される （一般 / VIP / スタッフなど）イメージ ⚫ 利用者は渡されたカードに応じたサービスを利用可 能となる ⚫認証・認可は、次のように考えることができます 認証 ユーザープール 認可 アイデンティティプール
13. 13 Amazon Cognitoと認証・認可 ⚫ 「あなたは誰？」 を確認するプロセス ⚫ 入場口でスタッフが名簿と照合し、本人確認するイ メージ ⚫ 照合が成功すると、入場許可が与えられる ⚫Cognitoにおける認可は、ログインユーザーとIAMロールを紐づける機能を指します ⚫今回はCognitoの認可機能は使用しません 認証 ユーザープール
14. 14 Amazon Cognitoのユーザープールの機能 ⚫ユーザー管理機能 ⚫ユーザーの 追加・更新・削除 ⚫属性（メールアドレス・電話番号・カスタム属性など） の管理が可能 ⚫通知機能（メール・SMS） ⚫登録・ログイン・パスワードリセット時の通知 を Amazon SES/SNS で送信 ⚫カスタムメッセージ も設定可能 ⚫サインアップ、ログイン、パスワードリセット ⚫最初から用意されている画面がある ⚫APIを駆使してゼロからすることも可能 ⚫ソーシャルログイン（Google、Facebook、Amazon、Apple）に対応 ⚫MFAを利用可能
15. 15 Amazon Cognitoのユーザープールアプリケーションクライアント ⚫ユーザープールアプリケーションクライアントは、ユーザープール内の設定です ⚫この設定は、Cognito との通信窓口といえます 次のページから話題が変わります
16. 認証・認可とその方式
17. 17 認証・認可とその方式 ⚫Amazon Cognitoは認証・認可の通信方式にOpenID Connect(OIDC)を使用します ⚫OIDCはOAuth 2.0をベースに認証の機能を付与した方式です SAML OAuth 2.0 XML 認証 認可 JWT 認可 OpenID Connect JWT 認証 認可
18. 18 OpenID ConnectとJSON Web Token(JWT) ⚫OpenID ConnectはJSON Web Token(JWT)と呼ばれるトークンで認証・認可の情 報をやりとりします ブラウザ Amazon Cognito Webサーバー JWT ①ログイン ②リクエスト コンテンツ JWT
19. 19 JSON Web Token(JWT)の内容 ⚫JSON Web Token(JWT)は、中（厳密にはPayload)に情報を持っています ⚫この情報を持って、トークンの有効期限・改ざん有無・ログインユーザーの情報を 取得することができます HTTP/1.0 200 OK Cache-Control: no-cache, private Content-Type: application/json Date: Thu, 20 Feb 2025 04:16:40 GMT { "sub": "4704caf8-7051-7036-c84d-41ed68a4fff0", "email": "satoshi.kaneyasu@serverworks.co.jp", "username": "kaneyasu", "exp": 1740025120, "iss": "https://cognito-idp.ap-northeast-1.amazonaws.com/ap-northeast-1_en3GpIHzf" } Cognito ユーザープール内で一意のユーザー識別子（UUID） ユーザーごとに固有 発行元 有効期限 次のページから話題が変わります
20. Amazon Cognitoを組み込んだ SPAのサンプル
21. 21 Amazon Cognitoを組み込んだSPAのサンプル ⚫ここでデモをお見せします 次のページから話題が変わります
22. フロントエンドとAmazon Cognitoの 連携
23. 23 構成図
24. 24 ユーザープールとアプリケーションクライアントの作成 ⚫Amazon Cognitoでユーザープールとアプリケーションクライアントを用意します ⚫フロントエンドは配信サーバーにデプロイしておき、URLを発行した状態から作業を 始めます
25. 25 Amazon Cognitoのユーザープールの作成①
26. 26 Amazon Cognitoのユーザープールの作成②
27. 27 Amazon Cognitoのユーザープールの作成③ 保存しておきます 今回は割愛しますが、この後ユーザープールに ユーザーを追加していきます 保存しておきます
28. 28 Amazon Cognitoのアプリケーションクライアントの作成①
29. 29 Amazon Cognitoのアプリケーションクライアントの作成② ここは一般的にフロントエンド側で用意しているログインページまたはTOPページのURLを指定します 不正なURLを入れると、認証に失敗します
30. 30 Amazon Cognitoのアプリケーションクライアントの作成③ 保存しておきます
31. 31 AWS Amplify UIを使用してReactアプリに認証を組み込む ⚫AWS Amplifyは、多数の機能を持つ開発プラットフォームです ⚫今回はこの中の一つ、Amplify UIを中心にしてReactアプリに認証を組み込みます ⚫[参考] Amazon Cognito と AWS Amplify UI を使用して既存の React アプリ ケーションユーザーを認証する
32. 32 設定ファイルの用意 ⚫サンプルでは設定ファイルでReactがCognitoが接続するためのパラメータを定義して います（リージョン、ユーザープールID、クライアントID） ⚫サンプルではパラメータを直接書かずに環境変数から取るようにしています
33. 33 設定ファイルの意味 ⚫前ページの設定ファイルの内容は背景が薄い赤色の部分を指します
34. 34 [補足]Vercelの環境変数 ⚫Vercelはプロジェクトの設定で環境変数を設定することができます ⚫Vercelの環境変数は命名規則があります
35. 35 Amplify UIのAuthenticatorコンポーネント ⚫Amplify UIのAuthenticatorは<Authenticator>タグで挟んだ部分をログイン済みならその 中身を、ログインしていなければログイン画面を表示します ⚫サンプルでは、/loginページに<Authenticator>タグを使用しています <Authenticator>タグの中に別のページに転送する処理を仕込んでいます これにより、ログイン後に別のページに遷移する動きをします
36. 36 認証が必要なページとそうでないページの分岐① ⚫Reactはパスによる分岐が可能です ⚫会員用ページは認証が必要、TOPページなどは認証不要とします
37. 37 認証が必要なページとそうでないページの分岐②
38. 38 ログイン済かどうかの判定 ⚫AmplifyのfetchAuthSession関数を用いて判定ができます ログイン状態を示すトークンを 取得します
39. 39 サーバーへのリクエストに認証情報を付与する① ⚫Bearerと呼ばれる方式で認証トークンをリクエストに付与することができます ログイン状態を示すトークンを取得します Bearerを用いてトークンを付与します APIエンドポイントに対するGETリクエスト
40. 40 サーバーへのリクエストに認証情報を付与する② ⚫サンプルではAPIエンドポイントのURLは設定ファイルに書いています 次のページから話題が変わります
41. バックエンドとAmazon Cognito の連携
42. 42 バックエンドとAmazon Cognitoの連携 ⚫バックエンドとAmazon Cognitoの連携は背景が薄い赤色の部分を指します
43. 43 Amazon API Gatewayとオーソライザー ⚫今回はバックエンドをAmazon API GatewayとAWS Lambdaで作ります ⚫API Gatewayはオーソライザーというリソースを付与すると認証をかけることがで きます ⚫APIにオーソライザーを付与する・しないで認証の要否を分けることができます
44. 44 Amazon API Gatewayへのオーソライザーの設定① ⚫今回はバックエンドをAmazon API GatewayとAWS Lambdaで作ります ⚫API Gatewayはオーソライザーというリソースを付与すると認証をかけることがで きます
45. 45 Amazon API Gatewayへのオーソライザーの設定② クリック
46. 46 Amazon API Gatewayへのオーソライザーの設定③ 貼り付けた後、 末尾の/.well-known/jwks.jsonを削除
47. 47 Amazon API Gatewayへのオーソライザーの設定④ デプロイしておいてください
48. 48 同じクライアントIDを使ってCognitoに接続する ⚫ここまででフロントエンド・バックエンド両方でCognitoに接続する設定を作りました ⚫接続に用いるクライアントIDを同じにすることで、認証情報を共有することができます 次のページから話題が変わります
49. まとめ
50. 50 まとめ ⚫Amazon Cognitoは、SPAに認証機能を持たせるのに役立ちます ⚫Amazon Cognitoでアプリケーションクライアントを作り、フロントエンドとバッ クエンドが同じクライアントIDを使うことで、認証情報を共有することができます ⚫フロントエンドはAmplifyのライブラリを使うことで、比較的楽にCognitoとの連携 を実装することができます ⚫バックエンドはAPI Gatewayでオーソライザーを設定することで、 Cognitoとの連 携を実装することができます
52. 52 参考資料 ⚫Amazon Cognito と AWS Amplify UI を使用して既存の React アプリケーション ユーザーを認証する ⚫Amplify Dev Center - Amplify UI ⚫Vercel公式ページ