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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Satoshi Kaneyasu
September 27, 2024
Programming
470
3
Share
【5分LT】フロントエンドとバックエンドを繋ぐ認証サービス Amazon Cognito
Satoshi Kaneyasu
September 27, 2024
More Decks by Satoshi Kaneyasu
See All by Satoshi Kaneyasu
AWS re:Invent 2025の少し振り返り + DevOps AgentとBacklogを連携させてみた
satoshi256kbyte
3
190
Amazon_Cognito_で構築する_スケーラブルな_Web_アプリケーション__シングルページ_Web_アプリケーションに認証を組み込む_.pdf
satoshi256kbyte
0
35
人間とAI、どちらが書いたコードもCI/CDでチェックしてみよう
satoshi256kbyte
0
37
今こそ押さえておきたい アマゾンウェブサービス(AWS)の データベースの基礎 おもクラ #6版
satoshi256kbyte
1
260
今こそ押さえておきたい アマゾンウェブサービス(AWS)の データベースの基礎
satoshi256kbyte
1
56
人間とAI、どちらが書いたコードもCICDでチェックしてみよう
satoshi256kbyte
1
53
はじめてのカスタムエージェント【GitHub Copilot Agent Mode編】
satoshi256kbyte
0
580
お客様とSIerではじめたスクラム開発(で得た学び)
satoshi256kbyte
0
130
From Pipenv to UV: Migrating to a Monorepoto Tame a Complex Repository
satoshi256kbyte
0
73
Other Decks in Programming
See All in Programming
運用エージェントは "作る" から "育てる" へ - 記憶と自己進化の3層設計パターン / self-evolving-agents-three-layer-agent-design
gawa
11
2.6k
プラグインで拡張される Context をtype-safe にする難しさと設計判断
kazupon
2
300
SkillsをS3 Filesに置く時のあれこれ
watany
4
1.8k
OSもどきOS
arkw
0
150
TSKaigi2026-静的解析への投資がAI時代のコード品質を支える ── カスタムESLintルールの設計と運用
hayatokudou
6
1.1k
Cloudflare で始める Data Platform
ta93abe
0
300
20260514_its_the_context_window_stupid.pdf
heita
0
1.1k
ReactとSvelteのその先、Ripple-TS / Beyond React and Svelte: Ripple-TS
ssssota
3
820
Talking to terminals (and how they talk back) (KotlinConf 2026)
jakewharton
PRO
1
120
AI時代の仕事技芸論 — ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ
kuranuki
0
100
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
izumin5210
2
530
Transactional Change Stream Processing With Debezium and Apache Flink
gunnarmorling
1
130
Featured
See All Featured
エンジニアに許された特別な時間の終わり
watany
107
240k
A better future with KSS
kneath
240
18k
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
190
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Darren the Foodie - Storyboard
khoart
PRO
3
3.3k
Optimizing for Happiness
mojombo
378
71k
Designing for humans not robots
tammielis
254
26k
How to Talk to Developers About Accessibility
jct
2
210
Building the Perfect Custom Keyboard
takai
2
770
Rebuilding a faster, lazier Slack
samanthasiow
85
9.5k
Mind Mapping
helmedeiros
PRO
1
210
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
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 信頼性エンジニアリングです。 現代におけるエンジニアの一般知識 だと思うので是非参加願います。 申し込みはこちら