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
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Satoshi Kaneyasu
September 27, 2024
Programming
510
3
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
【5分LT】フロントエンドとバックエンドを繋ぐ認証サービス Amazon Cognito
Satoshi Kaneyasu
September 27, 2024
More Decks by Satoshi Kaneyasu
See All by Satoshi Kaneyasu
AWS Transform Customによる Spring Boot 2.xから4.xへのVerUp
satoshi256kbyte
2
65
運用ダッシュボードの設計を誰も教えてくれないのだけどみなさんどうしてるんですか? - チームに監視するという文化を根付かせるための第一歩を踏みたい -
satoshi256kbyte
1
94
AWS CDK ExpressモードとCI/CDの組み合わせ
satoshi256kbyte
1
42
AWS CDK ExpressモードとCI/CDの組み合わせ
satoshi256kbyte
0
19
AWS re:Invent 2025の少し振り返り + DevOps AgentとBacklogを連携させてみた
satoshi256kbyte
3
230
Amazon_Cognito_で構築する_スケーラブルな_Web_アプリケーション__シングルページ_Web_アプリケーションに認証を組み込む
satoshi256kbyte
0
46
人間とAI、どちらが書いたコードもCI/CDでチェックしてみよう
satoshi256kbyte
0
47
今こそ押さえておきたい アマゾンウェブサービス(AWS)の データベースの基礎 おもクラ #6版
satoshi256kbyte
1
290
今こそ押さえておきたい アマゾンウェブサービス(AWS)の データベースの基礎
satoshi256kbyte
1
66
Other Decks in Programming
See All in Programming
AWS DevOps AgentのAzure接続機能を検証して見えた活用法/Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
masakiokuda
1
220
作るコストが小さくなった時代 幸せに働くために改めて考えたいこと 〜エンジニアとして価値を出し続けるために注視している二分野〜
yuppeeng
0
190
Augmenting AI with the Power of Jakarta EE
ivargrimstad
0
540
the container ship “Apple Silicon”@WWDC26 Recap -Japan-\(region).swift
shingangan
0
110
【やさしく解説 設計編・中級 #6】良いアーキテクチャとは ~ 一本の登り道の、行き先 ~
panda728
PRO
0
210
Laravel Boostに学ぶ、AIにPHPを書かせる技術 〜OSSの実装から蒸留するエージェント制御の王道〜
kentaroutakeda
3
670
わからない話を追いかけたら、プログラミング言語を作る側にいた
ydah
3
480
Lean は証明の正しさを確認するためだけのツールって思ってませんか?
inoueasei
1
150
Foundation Models frameworkで画像分析
ryodeveloper
1
600
属人化した知識を、 AIが辿れる地図にする
pkshadeck
PRO
1
150
その節約、円になってますか?
isamumumu
1
710
ITヒヤリハットを整理してみた ~ライフサイクルと原因から考える再発防止策~
koukimiura
1
140
Featured
See All Featured
The Limits of Empathy - UXLibs8
cassininazir
1
600
Ethics towards AI in product and experience design
skipperchong
2
340
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
500
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.8k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
210
How to train your dragon (web standard)
notwaldorf
97
6.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
Deep Space Network (abreviated)
tonyrice
0
250
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
310
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
480
Building an army of robots
kneath
306
46k
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 信頼性エンジニアリングです。 現代におけるエンジニアの一般知識 だと思うので是非参加願います。 申し込みはこちら