1.OAuthとは?

OAuth 2.0は標準的な認証プロトコルであり、保護されたリソースにアクセスするためにクライアントに権限(権限)を提供するプロセスを簡略化するプロトコルの1つである.
すなわち,1つのネットワークサービスの機能も他のサービスで利用できる.(例えば、Google、Github、Facebookなどのソーシャルログイン)
簡単にOAuthを表すフローを以下に示す.

2.用語整理

Resource Owner
アクセス中のリソースのユーザー(ユーザー)

Client
保護されたリソースにリソース所有者がアクセスするアプリケーション(作成するサービス).クライアントは、サーバ、デスクトップ、モバイルデバイス、または他のデバイスに管理できます.

Resource server
お客様のリクエストに応じたサーバ(Google、Github、Facebookなど)

Authorization server
ResourceServerはトークンにアクセスするサーバを受信します.
クライアントとリソースの所有者を正常に検証し、アクセストークンを発行するサーバです.

Authorization grant
クライアントがトークンにアクセスする際に使用する認証情報のタイプ

Grant typeとは?
クライアントがアクセストークンを取得する方法.代表的なのは、ライセンスコードGrant type、Refresh Token Grant typeである.
Authorization Code Grant type
アクセストークンを取得するには、まず認証コードを取得し、アクセストークンと交換します.
警備を強化するためだ.クライアントがクライアント-機密を共有してアクセストークンを取得することは、クライアント側でリスクを盗むためであるため、クライアントは認証コードのみを受信し、サーバはアクセストークン要求を行う.
Refresh Token Grant type
期限切れのアクセストークンを容易に再取得するために使用される方法.
Refresh tokenの有効時間は通常Access tokenよりも長く設定されるので、これは可能な方法である.各サーバでrefresh tokenに対するポリシーが異なるため、refresh tokenを使用するには、使用するサーバのポリシーを表示する必要があります.

Authorization code
アクセスtokenに必要な一時パスワード(client idおよびclient secretを含む)を取得します.Client IDを使用してこのコードを受信すると、client secretとcodeを使用してAccess tokenが受信されます.

Access token
ライセンスコードとクライアントsecretで受信したアクセストークンを使用すると、リソースサーバ上の保護されたリソースにアクセスできます.

Scope
scopeはトークンの権限を定義します.指定されたアクセストークンを使用してアクセスできるリソース範囲.(リソースサーバで使用したい機能)

🧢 Sprint Review

登録

クライアントがリソースサーバ(ここでは機能モジュール)を使用するために事前に承認を取得するプロセス.
Githubでは、Setting-Developer setting-outhApps-New OauthAppに私のアプリケーションを登録できます.

各resource serverは異なりますが、クライアントID、クライアントSecret、および認証リダイレクトURI(ここでは、認証コールバックURLである認証コードを渡すアドレス)が共通に提供されます.
クライアントSecretを外部に露出させないでください.

優先パラメータ

Githubが提供するクライアントID、クライアントSecret.envファイルを入れます.

GITHUB_CLIENT_ID=64dd459a4180d0d19c7a
GITHUB_CLIENT_SECRET=ce2d3201131098d043d1680810c0a1d99bb78464

ライセンスコードの取得(Client/LOgin.js)

Githubログインボタンを押す場合は、認証コードを使用してリダイレクトする必要があります.これは、機能ユニットに認証コードを要求するプロセスです.
ボタンを押して、次のアドレスにします.GET https://github.com/login/oauth/authorize
後にパラメータを追加できます.(公式ドキュメントを参照)
https://docs.github.com/en/developers/apps/building-github-apps/identifying-and-authorizing-users-for-github-apps

アクセストークンの取得(Client/App.js、Server/Clontroller/callback.js)

(Client/App.js)
ライセンスコードを受信して再起動したブラウザをレンダリングすると、ライセンスコードをサーバに送信する関数が実行されます.
(Server/controller/callback.js)
認証コードをサーバに送信すると、サーバは管理サーバに送信し、アクセストークン要求を送信します.POST https://github.com/login/oauth/access_tokenaxios.postリクエスト送信時

最初のパラメータ:上のアドレス

の2番目のパラメータは、client id、client secret、およびcode(authorizationcode)をキー値としてデータオブジェクトに送信する.

の3番目のパラメータheaders: { Accept: "application/json" }が挿入されない場合、accesstokenの情報は文字列として表示されます(default value).これを入れて、対象の形で持ち帰ることができます.
本書-2.応答セクションを参照してください.
https://docs.github.com/en/developers/apps/building-oauth-apps/authorizing-oauth-apps#web-application-flow

      axios.post(      "https://github.com/login/oauth/access_token",{
        client_id: clientID,
        client_secret: clientSecret,
        code: authorizationCode,
      },
      {
        headers: { Accept: "application/json" }, 
      }
)

postリクエストの結果,旗艦サーバは我々のサーバにAccess tokenを送信した.
現在(Client/App.js)
受信したAccess Tokenを使用してlogin状態とaccessToken状態を変更します.

{
  isLogin: true,
  accessToken: res.data.accessToken,
}

ログインすると、mypageコンポーネントがレンダリングされます.

リソースサーバにリソースを要求(Client/Mypage.js)

Github APIを介してユーザ情報を受信する必要がある.
props送信のAccess Tokenにリソースに対するAPI要求を送信する.getリクエストを送信する場合は、Beare TokenをHeadersに入れることでAccess Tokenを渡すことができます.
https://docs.github.com/en/rest/reference/users#get-the-authenticated-user
認証ユーザが基本認証またはuser scopeを有するOAuthによって認証された場合、応答には共通およびプライベートプロファイル情報がリストされる.
認証されたユーザがuser scopeのないOAuthによって認証された場合、応答には共通プロファイル情報のみがリストされる.

axios.get("https://api.github.com/user", {
    headers: {
      authorization: `token ${accessToken}`,
    },
});

ソーシャルログインロジックFlow

論理プロセス全体を以下に示します.