Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
【5分LT】フロントエンドとバックエンドを繋ぐ認証サービス Amazon Cognito
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Satoshi Kaneyasu
September 27, 2024
Programming
530
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
[ハンズオン]AIへの指示だけで「五目並べ」を作ってみよう
satoshi256kbyte
0
13
KiroのSpecで「五目並べ」を作ってみる
satoshi256kbyte
0
15
【業務アプリのモダナイズ】このまま保守・改修し続けて大丈夫ですか?
satoshi256kbyte
0
9
今から学ぶベクトルデータベース基礎知識からAmazon Bedrock Knowledge Basesまで
satoshi256kbyte
1
3
Amazon Managed Grafana で Amazon DynamoDB のデータを可視化する Infinity Plugin + プライベート API 構成
satoshi256kbyte
1
22
AI駆動開発にグラフDBを重ねてみた
satoshi256kbyte
2
810
AWS Transform Customによる Spring Boot 2.xから4.xへのVerUp
satoshi256kbyte
2
160
運用ダッシュボードの設計を誰も教えてくれないのだけどみなさんどうしてるんですか? - チームに監視するという文化を根付かせるための第一歩を踏みたい -
satoshi256kbyte
1
210
AWS CDK ExpressモードとCI/CDの組み合わせ
satoshi256kbyte
1
63
Other Decks in Programming
See All in Programming
AI活用は、個人から組織へ|マルチプレイヤーエージェントハーネス「QM」の社内活用事例 / AI use is moving from individuals to orgs
rkaga
1
120
テストを司るデーモンに会いに行く 〜隔離した仮想マシンでテストを通すまで〜
h1d3mun3
1
530
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
danybony
1
260
選挙速報を多くのユーザーへ 届ける Live Activities 設計
hamayokokuririn
0
150
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
ken_tunc
0
300
UnityでSystem.Net.WebSocketsなWebSocketサーバが動かないのでUnity Monoのコードを覗いてみた / about implementing websocket server with unity mono
drumath2237
1
210
一人だけ、Kiroが静止する日
hideg
0
120
AI が書く Go コードの品質を劇的に向上させる Linter: “declscope”
mpyw
0
380
Webの地図
yosuke_furukawa
PRO
6
4.6k
技術的負債の返済は、AI時代の複利で効く投資 — 経営としての意思決定とその遂行
curekoshimizu
0
1.5k
JRuby: Past, Present, and Future
headius
0
160
世界の中心で、AI(App Intents)をさけぶ ー App Intents中心設計の実践ガイド
touyou
0
620
Featured
See All Featured
Ethics towards AI in product and experience design
skipperchong
2
380
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
460
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
Designing for humans not robots
tammielis
254
26k
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
2
1.8k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
550
WCS-LA-2024
lcolladotor
0
830
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
530
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
203
76k
New Earth Scene 8
popppiees
4
2.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8.3k
How to make the Groovebox
asonas
2
2.4k
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 信頼性エンジニアリングです。 現代におけるエンジニアの一般知識 だと思うので是非参加願います。 申し込みはこちら