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
OAuth2.0完全に理解した
Search
ryome
May 18, 2023
Technology
0
110
OAuth2.0完全に理解した
OAuth2.0完全に理解した
ryome
May 18, 2023
Tweet
Share
More Decks by ryome
See All by ryome
AWS CodeBuildを高速化したい
ryome
0
57
CDKでAppSyncのJavaScriptリゾルバを開発したい
ryome
0
170
Cognitoの複数IDP認証でユーザを統合したい
ryome
0
450
Amazon_CodeWhispererで生産性を爆上げする
ryome
0
47
Cloud9にリモートデスクトップ接続する
ryome
0
130
Docker-ComposeをECSにデプロイしたい
ryome
0
170
Cloud9にリモートデスクトップ接続する
ryome
0
68
Other Decks in Technology
See All in Technology
IaCからAWSに入門した初心者が CloudFormationを通して考えた「AWS操作」の使い分け
maimyyym
3
660
AWS Observability ベストプラクティス 大紹介
o11yfes2023
0
130
#phpconkagawa レガシーコードにもオブザーバビリティを 〜少しずつ始めるサービス監視〜
yamato_sorariku
0
490
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
9
1.7k
iThome2024 Wailing Wall of Enterprise Security
notsurprised
0
240
Documentação de Produtos: Artefatos essenciais na prática
rigolon
1
270
Shinagile 2024
kawaguti
PRO
1
110
中年男性がメインフレームから クラウドへキャリアシフトしてみた
uechishingo
1
460
類似ロジック実装をiOS/Android間で合わせる道標No.1
fumiyasac0921
1
210
シンプルなHITL機械学習と様々なタスクにおけるHITL機械学習
naohachi89
0
300
開発スピードの維持向上を支える、テスト設計の 漸進的進化への取り組み / Continuous Test Design Development for Speed of Product Development
ropqa
0
180
Secrets of a PowerShell "Guru"
guyrleech
1
120
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Web development in the modern age
philhawksworth
203
10k
Six Lessons from altMBA
skipperchong
22
3k
What's in a price? How to price your products and services
michaelherold
238
11k
For a Future-Friendly Web
brad_frost
172
9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
BBQ
matthewcrist
80
8.8k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Statistics for Hackers
jakevdp
790
220k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Transcript
OAuth 2.0 完全に理解した。
OAuth 2.0とは? OAuth(オー・オース) は、Open Authorization の略。 OAuth 2.0 は、異なる2つのサービス間でユーザー情報などの リソースを共有することを可能にする、ユーザー権限の認可をおこ
なうためのスタンダードです。 ユーザーがユーザー名(IDやメールアドレス等)とパスワードをク ライアントに提供することなく、ユーザ情報の開示ができることが メリット。
OAuth 1.0とOAuth 2.0の違い • OAuth 1.0では、署名プロセスのみの認証しかサポートしていな い。 • OAuth 2.0は、より多くの認証フローをサポートしている。
(認証コードフロー、暗黙のフロー、リソース所有者パスワー ド資格情報フロー、クライアント資格情報フローなど)
OAuth 2.0のインフラ構成図
OAuth 2.0のシーケンス図 今回のサンプルは 認証コードフロー
今回作ったアプリのUI 詳しくはこちら↓ https://github.com/ryomeblog/google-oauth
環境構築説明 プロジェクト作成 • GCP: https://console.cloud.google.com/welcome
環境構築説明 クライアントIDとクライアントシークレット発行
環境構築説明 バックエンド(Lambda)デプロイ
環境構築説明 Reactアプリ起動
react-google-loginに悩まされる • 認証が通っても「popup_closed_by_user」エラーになるバグがあります。 • 2017年から直ってません。 • 「@react-oauth/google」を使いましょう。 詳しくはこちら↓ https://github.com/anthonyjgrove/react-google-login/issues/132
GitHub 今回解説した「 OAuth 2.0 」のサンプルコードは GitHubに格納しています。 GitHub URL https://github.com/ryomeblog/google-oauth
参考文献 • https://github.com/ryomeblog/google-oauth • https://github.com/anthonyjgrove/react-google- login/issues/132 • https://developers.google.com/identity/protocols/oauth 2?hl=ja