Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
【5分LT】フロントエンドとバックエンドを繋ぐ認証サービス Amazon Cognito
Search
Satoshi Kaneyasu
September 27, 2024
Programming
2
250
【5分LT】フロントエンドとバックエンドを繋ぐ認証サービス Amazon Cognito
Satoshi Kaneyasu
September 27, 2024
Tweet
Share
More Decks by Satoshi Kaneyasu
See All by Satoshi Kaneyasu
プロジェクトマネージャーがGitHub Copilotのエージェンモードを使い始めました
satoshi256kbyte
1
110
そもそもAWS Configの設定変えられたらどうするの?Amazon EventBridgeでマネコンの操作を監視する
satoshi256kbyte
1
100
変化の激しい時代における、こだわりのないエンジニアの強さ
satoshi256kbyte
1
1.5k
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
270
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
240
今更聞けないセキュリティ用語の基礎知識 2025新春
satoshi256kbyte
0
170
AWS re:Invent 2024個人的まとめ
satoshi256kbyte
0
310
今年一番支援させていただいたのは認証系サービスでした
satoshi256kbyte
1
580
おもにクラウドの話してます#4 OPスライド
satoshi256kbyte
0
71
Other Decks in Programming
See All in Programming
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
190
赤裸々に公開。 TSKaigiのオフシーズン
takezoux2
0
130
インターフェース設計のコツとツボ
togishima
2
690
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
21
5.9k
実践ArchUnit ~実例による検証パターンの紹介~
ogiwarat
2
250
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
780
無関心の谷
kanayannet
0
160
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
520
Prism.parseで 300本以上あるエンドポイントに 接続できる権限の一覧表を作ってみた
hatsu38
1
110
カクヨムAndroidアプリのリブート
numeroanddev
0
410
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
0
120
Practical Tips and Tricks for Working with Compose Multiplatform Previews (mDevCamp 2025)
stewemetal
0
120
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Adopting Sorbet at Scale
ufuk
77
9.4k
Thoughts on Productivity
jonyablonski
69
4.7k
Automating Front-end Workflow
addyosmani
1370
200k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Rails Girls Zürich Keynote
gr2m
94
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Transcript
[5分LT]フロントエンドとバックエンドを繋ぐ認証サービ ス Amazon Cognito 2024.09.27
2 今回のLTについて ➢SPAを作りたいお客様から、Amazon Cognitoを使って認証を実装してほしいと いう相談をよく受けます。 ➢Amazon CognitoというのはAWSの認証・認可サービスで、フロントエンドと バックエンドを繋ぐための認証機能を提供してくれます。 ➢というわけで、今回はAmazon Cognitoというか、認証・認可サービスのお話を
します。 ➢時間の都合上とても簡略化して説明しているので、詳細は公式ドキュメントを参 照するか、別の機会にお話させてください。
3 Amazon Cognitoの機能 ➢ ID管理 ➢ Cognito側でユーザー情報を管理することができます。システム側でユーザー情報をDBに持つ 必要はありません。 ➢ ユーザー認証
➢ ログイン画面、パスワード変更画面が提供されています。 ➢ ソーシャルログイン
4 Amazon Cognitoがフロントエンドとバックエンドを繋ぐとは? ➢ SPAとは、フロントエンドとバックエンドを別システムで構築し、それらを連動させて見掛け上 一つのシステムとして動作させるアプリケーションのことです。 ➢ このような構成の場合、認証・認可サービスがバックエンドに寄っていると、フロントエンドの 方でログイン後でしか見えない画面を作れないなどのような問題が発生します。 ➢
そこで、認証・認可の機能を独立させ、両方から利用可能にするのが認証・認可サービスであり、 Amazon Cognitoもその一つです。 フロントエンド バックエンド Amazon Cognito 認証・認可を 一つのサービスとみなす
5 Amazon Cognitoの利用イメージ Amazon API Gateway AWS Lambda フロントエンド Next.jsなら
middleware.ts Amazon Cognito ➢ フロントエンドはページ切替が発生したら絶対に通る場所にCognitoのチェック処理を入れる ➢ バックエンドはリクエストが発生したら絶対に通る場所にCognitoのチェック処理を入れる ➢ これにより未ログインならログインへの転送または404を返すことができる
6 Amazon Cognitoの利用イメージ Amazon API Gateway AWS Lambda フロントエンド Next.jsなら
middleware.ts Amazon Cognito ➢ Cognitoでログインするとトークンが得られるので以降のアクセスにはトークンを載せる ➢ トークンを用いて、ログインチェック、ユーザー情報の取得ができる ➢ ユーザー情報の取得する時に、どの情報を取れるのかを制御するのが認可機能 Token Token Tokenを用いて ログインチェック token Tokenを用いて ユーザー情報取得
7 Amazon Cognitoのデメリット ➢Amazon Cognitoを導入し、ユーザー情報をCognitoで管理するようになると、 RDBからユーザー情報がなくなるので所謂JOINができなくなります。 ➢ここをどう解決するかがバックエンドエンジニア/クラウドエンジニアの腕の見 せ所です。 カラム カラム
氏名 部署 AAA BBB 兼安 聡 アプリケーションサービス部 ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ <案1>一覧データと ユーザー情報を後で合体させる 方式を提案する <案2>そもそも常に最新を JOINしないといけないのか?と いう視点で見直す <案3>同期さえ取ればユー ザー情報とRDBで二重管理して もよいとする
8 自己紹介 氏名:兼安 聡 所属:株式会社サーバーワークス アプリケーションサービス部 在住:広島(フルリモート) 担当:DevOps、PM、SM 2024 Japan
AWS Top Engineers (Database) 2024 Japan AWS All Certifications Engineers 認定スクラムマスター X:@satoshi256kbyte そんな感じで技術支援したりPMしたりSMしたりしてるのが私です。
9 よろしくお願いします。
None
11 告知 11/ 09(土) オープンセミナー2024@広島 今年のテーマはXRE 信頼性エンジニアリングです。 現代におけるエンジニアの一般知識 だと思うので是非参加願います。 申し込みはこちら