OAuth2.0完全に理解した

1. OAuth 2.0
完全に理解した。

2. OAuth 2.0とは？
OAuth（オー・オース） は、Open Authorization の略。
OAuth 2.0 は、異なる2つのサービス間でユーザー情報などの
リソースを共有することを可能にする、ユーザー権限の認可をおこ
なうためのスタンダードです。
ユーザーがユーザー名（IDやメールアドレス等）とパスワードをク
ライアントに提供することなく、ユーザ情報の開示ができることが
メリット。

3. OAuth 1.0とOAuth 2.0の違い
• OAuth 1.0では、署名プロセスのみの認証しかサポートしていな
い。
• OAuth 2.0は、より多くの認証フローをサポートしている。
（認証コードフロー、暗黙のフロー、リソース所有者パスワー
ド資格情報フロー、クライアント資格情報フローなど）

4. OAuth 2.0のインフラ構成図

5. OAuth 2.0のシーケンス図
今回のサンプルは
認証コードフロー

6. 今回作ったアプリのUI
詳しくはこちら↓
https://github.com/ryomeblog/google-oauth

7. 環境構築説明
プロジェクト作成
• GCP： https://console.cloud.google.com/welcome

8. 環境構築説明
クライアントIDとクライアントシークレット発行

9. 環境構築説明
バックエンド（Lambda）デプロイ

10. 環境構築説明
Reactアプリ起動

11. react-google-loginに悩まされる
• 認証が通っても「popup_closed_by_user」エラーになるバグがあります。
• 2017年から直ってません。
• 「@react-oauth/google」を使いましょう。
詳しくはこちら↓
https://github.com/anthonyjgrove/react-google-login/issues/132

12. GitHub
今回解説した「 OAuth 2.0 」のサンプルコードは
GitHubに格納しています。
GitHub URL
https://github.com/ryomeblog/google-oauth

13. 参考文献
• 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