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環境でIPV6接続をサポートするようにmysql5.6を設定する方法

導入:この記事では主に、Linux システムで IPV6 接続をサポートするように MySQL を構...

Docker ベースの nginx ファイル サーバーを構築する方法と手順

1. このマシンに新しい設定ファイルdocker_nginx.confを作成します。 サーバー{ 7...

Linux でシステム ディスクを初期化した後にデータ ディスクを再マウントする方法

Linuxインスタンスでシステムディスクを初期化した後、データディスクを再マウントするLinux イ...

Linuxはlsof/extundeleteツールを使用して、誤って削除されたファイルやディレクトリを復元します。

序文Linux には Windows のような目立つごみ箱がないため、簡単に復元することはできません...

Vueはルールを使用してフォームフィールドの検証を実装します

Vue でフォーム フィールドを記述および検証する方法は多数あります。このブログでは、より一般的に使...

WMLタグの概要

構造関連タグ--------------------------------------------...

CentOS7 64でのMySQL5.6.40の詳細なインストール手順

CentOS7 64でのMySQL5.6.40のインストール手順1) 以前にインストールしたMySQ...

Webデザインチュートリアル(6):デザインへの情熱を持ち続ける

<br />前の記事:Webデザインチュートリアル(5):Webビジュアルデザイン。 1...

更新とデータ整合性処理のためのMySQLトランザクション選択の説明

MySQL のトランザクションはデフォルトで自動的にコミットされます (autocommit = 1...

Vue で $props、$attrs、$listeners を使用する方法の詳細な説明

目次背景1. 文書の説明2. 特定の用途結論背景ここで、状況について説明しましょう。親コンポーネント...

HTML 5のドラフトは正式な標準にはならなかった

<br />昨日、W3C で新しいHTML 5 ドラフト (ワーキング ドラフト) が ...

ネイティブJSは非常に見栄えの良いカウンターを実装します

今日は、ネイティブ JS で実装された見栄えの良いカウンターを紹介します。効果は次のとおりです。 以...

HTML コマンドラインインターフェースの実装

HTML部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> &l...

Windows 7 で Python 3.4 を使って MySQL データベースを使用する

Python 3.4でMySQLデータベースを使用する詳細なプロセスは次のとおりです。 Window...

Linux でソフトウェア パッケージのバージョンをアップグレードする方法の詳細な説明

Linux環境で、特定のソフトウェア(パッケージ)がインストールされているかどうかを確認したい。 r...