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
190
OAuth2.0完全に理解した
OAuth2.0完全に理解した
ryome
May 18, 2023
Tweet
Share
More Decks by ryome
See All by ryome
AWS MCPを使ってみた
ryome
0
280
ClineでAWS CDKやインフラ構成図作ってみた
ryome
1
480
PlaywrightというE2Eテストツールを布教したい
ryome
0
52
Cursorという最強エディタを使いこなしたい
ryome
0
290
E2Eテストを自動化したい
ryome
0
70
AWS CodeBuildを高速化したい
ryome
0
500
CDKでAppSyncのJavaScriptリゾルバを開発したい
ryome
0
280
Cognitoの複数IDP認証でユーザを統合したい
ryome
1
1.2k
Amazon_CodeWhispererで生産性を爆上げする
ryome
0
70
Other Decks in Technology
See All in Technology
Backboneとしてのtimm2025
yu4u
3
1.3k
20250818_KGX・One Hokkaidoコラボイベント
tohgeyukihiro
0
130
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
0
280
AWSの最新サービスでAIエージェント構築に楽しく入門しよう
minorun365
PRO
10
580
AIエージェントの開発に必須な「コンテキスト・エンジニアリング」とは何か──プロンプト・エンジニアリングとの違いを手がかりに考える
masayamoriofficial
0
280
新卒(ほぼ)専業Kagglerという選択肢
nocchi1
1
1.8k
マイクロモビリティシェアサービスを支える プラットフォームアーキテクチャ
grimoh
1
160
生成AIによるデータサイエンスの変革
taka_aki
0
3.1k
GitHub Copilot coding agent を推したい / AIDD Nagoya #1
tnir
2
4k
AIと描く、未来のBacklog 〜プロジェクト管理の次の10年を想像し、創造するセッション〜
hrm_o25
0
120
AIは変更差分からユニットテスト_結合テスト_システムテストでテストすべきことが出せるのか?
mineo_matsuya
5
3.1k
夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio
hachi_eiji
1
300
Featured
See All Featured
Music & Morning Musume
bryan
46
6.7k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
770
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Designing for humans not robots
tammielis
253
25k
How to train your dragon (web standard)
notwaldorf
96
6.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
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