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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vueプロジェクトがパッケージ化されたら、GitHubにアップロードし、github-pagesのプレビューを実装します。
  • Vue プロジェクト パッケージを github にアップロードし、プレビュー リンク (ページ) を作成します。
  • vue cli 3.x プロジェクトを github ページにデプロイする方法
  • Vue プロジェクトを Github にアップロードしてプレビューする実装例
  • mpvue を使用して github アプレットを開発する方法の詳細な説明
  • Vue プロジェクトが github オンライン プレビュー機能を実装
  • Vue github ユーザー検索ケース共有

<<:  Docker x509 の安全でないレジストリ問題を解決する

>>:  CSS3はマスク連打機能を実現する

推薦する

Linux での vi (vim) の新しい使い方のまとめ

私は数年間 vi エディタを使ってきましたが、実用的な用途で使ったことはありませんでした。今日 Py...

CSS3 カウントダウン効果

成果を達成する実装コードhtml <div クラス = 'ラッパー'> ...

CSS トップに戻る コード例

最近のウェブサイトのほとんどはページが長く、4 画面または 5 画面の長さのものもあれば、2 画面ま...

純粋な CSS ヘッダーの実装コードを修正

純粋な CSS で固定ヘッダーを実装するのが難しい主な理由は 2 つあります。まず、最大のシェアを持...

マインスイーパゲームを実装するための jQuery プラグイン (2)

この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する2番目の記事を参考までに...

Dockerコンテナとホストマシン間の8時間の差の問題を解決する

デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...

Keepalived は Nginx の負荷分散と高可用性のサンプル コードを実装します

第1章: keepalivedの紹介VRRP プロトコルの目的は、静的ルーティングの単一点障害問題を...

JavaScriptがDOMツリーの構築にどのように影響するかについて詳しく説明します。

目次ドキュメント オブジェクト モデル (DOM) DOM と JavaScript DOMツリーの...

MySQL binlog_ignore_dbパラメータの具体的な使用法

序文:前の記事を読んだ後、binlog はデータベースで実行されたすべての DDL および DML ...

Angularの単一プロジェクトを複数プロジェクトにアップグレードするプロセス全体

目次序文開発環境新しいプロジェクトを作成するモバイルウェブプロジェクト角度付きJSONパブリックモジ...

Docker-compose インストール db2 データベース操作

db2 データベースをホストマシンに直接インストールするのは面倒で、ユーザーや権限を巻き込むのも不便...

Docker で既存のイメージに基づいて新しいイメージを構築する方法

既存のイメージから新しいイメージを構築することは、Dockerfile ドキュメントを通じて行われま...

Angularコンポーネントの仲介モードの詳細な説明

目次1. 仲介業者モデル2. 例1. 見積コンポーネントに購入ボタンを追加する2. 親コンポーネント...

MySQL の遅いクエリの落とし穴

目次1. 遅いクエリ構成1-1. スロークエリを有効にする2. 遅いクエリSQLの分析を説明する3....

JavaScript で外部変数にアクセスするサブ関数の 3 つのソリューション

序文Web ページを作成するときに、次のような状況に遭遇することはよくあります。 <本文>...