GitHub のサードパーティ認証方式を Vue で実装する例

最近ブログのシステムを改善していたのですが、コメントするために一時的に名前とメールアドレスを入力する方法から、GitHub 認証を使用してログインしてコメントを投稿する方法に変更することを突然思いつきました。
さっそく本題に入りましょう

ヒント: この記事は個人的なニーズを満たすもののみを対象としています。より詳細な使用方法を学習する必要がある場合は、公式の OAuth ドキュメントを参照してください。

OAuth アプリの作成

まず、GitHub アカウントを取得し、GitHub 開発者にアクセスします。必要な情報を入力すると、次の手順で使用する Client_ID と Client Secret が自動的に生成されます。

コードを取得する

//方法
非同期githubLogin() {
 ウィンドウズ.location.href = 
    「https://github.com/login/oauth/authorize?client_id = your_client_id&redirect_uri=your_redirect_uri」
}

<a href="https://github.com/login/oauth/authorize?client_id = your_client_id&redirect_uri=your_redirect_uri">GitHub ログイン</a>

ルート内の redirect_uri パラメータはオプションです。省略した場合、GitHub は OAuth アプリで設定したコールバックパスにリダイレクトします。指定する場合、入力する redirect_uri は、OAuth アプリで構成したコールバックパスのサブパスである必要があります。次のように：

コールバック: http://xx.com/github
良い: http://xx.com/github
良い例: http://xx.com/github/path/path
悪い例: http://xx.com/git
悪い例: http://xxxxx.com/path

ユーザーがリクエストを受け入れると、redirect_uri にジャンプし、ルート内のパラメータコードを受け入れて次のステップに進むことができます。

リダイレクトURI?コード=xxx

access_tokenを取得する

access_token を取得するには、client_id、client_secret、および code が必要です。

/*
/githubアクセストークン:https://github.com/login/oauth/access_token
*/
これ.$axios
 .get('/githubAccessToken',{
 パラメータ: {
  client_id: クライアントID、
  クライアントシークレット: クライアントシークレット、
  コード: your_code
  }
 })

デフォルトでは、次のような応答が返されます。

access_token=xxxxx&token_type=bearer

より便利な形式で応答を受け取りたい場合は、 Accept ヘッダーをカスタマイズできます。

受け入れる: "application/json"
=> {"access_token":xxxxx、"token_type":bearer}

ユーザー情報を取得する

access_token を取得したら、ユーザーの情報を要求できます。

/*
/githubユーザー情報:https://api.github.com/user
*/
これ.$axios
 .get('/githubUserInfo', {
  ヘッダー: {
    「コンテンツタイプ」: 「application/x-www-form-urlencoded」、
    受け入れる: "application/json",
    認証: `token ${access_token}` //必須}
})

その後、ユーザー情報を取得できます。

Vue による GitHub のサードパーティ認証の実装に関するこの記事はこれで終わりです。Vue による GitHub のサードパーティ認証の実装に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: