最近ブログのシステムを改善していたのですが、コメントするために一時的に名前とメールアドレスを入力する方法から、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 ユーザーがリクエストを受け入れると、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Docker x509 の安全でないレジストリ問題を解決する
私は数年間 vi エディタを使ってきましたが、実用的な用途で使ったことはありませんでした。今日 Py...
成果を達成する実装コードhtml <div クラス = 'ラッパー'> ...
最近のウェブサイトのほとんどはページが長く、4 画面または 5 画面の長さのものもあれば、2 画面ま...
純粋な CSS で固定ヘッダーを実装するのが難しい主な理由は 2 つあります。まず、最大のシェアを持...
この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する2番目の記事を参考までに...
デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...
第1章: keepalivedの紹介VRRP プロトコルの目的は、静的ルーティングの単一点障害問題を...
目次ドキュメント オブジェクト モデル (DOM) DOM と JavaScript DOMツリーの...
序文:前の記事を読んだ後、binlog はデータベースで実行されたすべての DDL および DML ...
目次序文開発環境新しいプロジェクトを作成するモバイルウェブプロジェクト角度付きJSONパブリックモジ...
db2 データベースをホストマシンに直接インストールするのは面倒で、ユーザーや権限を巻き込むのも不便...
既存のイメージから新しいイメージを構築することは、Dockerfile ドキュメントを通じて行われま...
目次1. 仲介業者モデル2. 例1. 見積コンポーネントに購入ボタンを追加する2. 親コンポーネント...
目次1. 遅いクエリ構成1-1. スロークエリを有効にする2. 遅いクエリSQLの分析を説明する3....
序文Web ページを作成するときに、次のような状況に遭遇することはよくあります。 <本文>...