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
3
410
【5分LT】フロントエンドとバックエンドを繋ぐ認証サービス Amazon Cognito
Satoshi Kaneyasu
September 27, 2024
Tweet
Share
More Decks by Satoshi Kaneyasu
See All by Satoshi Kaneyasu
はじめてのカスタムエージェント【GitHub Copilot Agent Mode編】
satoshi256kbyte
0
140
お客様とSIerではじめたスクラム開発(で得た学び)
satoshi256kbyte
0
89
From Pipenv to UV: Migrating to a Monorepoto Tame a Complex Repository
satoshi256kbyte
0
32
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
1.4k
ディレクトリ構成と設定ファイルから考えるSIerのVibe Coding
satoshi256kbyte
0
64
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
490
生産性の壁を越えろ! 何がなんでも計測する
satoshi256kbyte
1
54
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
310
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
210
Other Decks in Programming
See All in Programming
從冷知識到漏洞,你不懂的 Web,駭客懂 - Huli @ WebConf Taiwan 2025
aszx87410
2
3.3k
Grafana:建立系統全知視角的捷徑
blueswen
0
270
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
kamina_zzz
0
340
Flutter On-device AI로 완성하는 오프라인 앱, 박제창 @DevFest INCHEON 2025
itsmedreamwalker
1
170
CSC307 Lecture 01
javiergs
PRO
0
650
生成AI時代を勝ち抜くエンジニア組織マネジメント
coconala_engineer
0
37k
令和最新版Android Studioで化石デバイス向けアプリを作る
arkw
0
470
GoLab2025 Recap
kuro_kurorrr
0
790
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
bengo4com
1
210
開発に寄りそう自動テストの実現
goyoki
2
1.7k
TerraformとStrands AgentsでAmazon Bedrock AgentCoreのSSO認証付きエージェントを量産しよう!
neruneruo
4
2.2k
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
codenote
0
330
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Google's AI Overviews - The New Search
badams
0
880
Optimizing for Happiness
mojombo
379
70k
Code Reviewing Like a Champion
maltzj
527
40k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.6k
Six Lessons from altMBA
skipperchong
29
4.1k
From π to Pie charts
rasagy
0
100
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
So, you think you're a good person
axbom
PRO
0
1.9k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
120
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.1k
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
5k
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 信頼性エンジニアリングです。 現代におけるエンジニアの一般知識 だと思うので是非参加願います。 申し込みはこちら