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
87
【5分LT】フロントエンドとバックエンドを繋ぐ認証サービス Amazon Cognito
Satoshi Kaneyasu
September 27, 2024
Tweet
Share
More Decks by Satoshi Kaneyasu
See All by Satoshi Kaneyasu
今年一番支援させていただいたのは認証系サービスでした
satoshi256kbyte
1
250
おもにクラウドの話してます#4 OPスライド
satoshi256kbyte
0
44
AWS認定資格を勉強した先に何があったか
satoshi256kbyte
2
220
Amazon Aurora Serverless v2のアプデと、Amazon Aurora PostgreSQL Limitless DatabaseのGAについて
satoshi256kbyte
0
120
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
450
Amazon Neptuneで始めてみるグラフDB-OpenSearchによるグラフの全文検索-
satoshi256kbyte
4
440
AWS認定資格を受験するにあたり、気づいたこと・実践していたことのまとめ
satoshi256kbyte
2
190
[LT]Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
370
おもにクラウドの話してます#3 OPスライド
satoshi256kbyte
1
34
Other Decks in Programming
See All in Programming
Mermaid x AST x 生成AI = コードとドキュメントの完全同期への道
shibuyamizuho
0
160
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
290
プロダクトの品質に コミットする / Commit to Product Quality
pekepek
2
760
testcontainers のススメ
sgash708
1
120
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ!
maroon1st
0
450
useSyncExternalStoreを使いまくる
ssssota
6
1k
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
190
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
600
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
5
890
HTTP compression in PHP and Symfony apps
dunglas
2
1.7k
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
190
Featured
See All Featured
How GitHub (no longer) Works
holman
311
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
170
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Thoughts on Productivity
jonyablonski
67
4.4k
Docker and Python
trallard
41
3.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.3k
Making Projects Easy
brettharned
116
5.9k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
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 信頼性エンジニアリングです。 現代におけるエンジニアの一般知識 だと思うので是非参加願います。 申し込みはこちら