目次
1. 詳細なプロセス
1. アプリケーションの登録
2. フロントエンドは github 認証ページへのリクエストを開始します。認証が成功すると、コードは設定されたバックエンド コールバック URL
3 にリダイレクトされます。バックエンドはコードを取得し、そのコードで github をリクエストしてトークンを取得し、そのトークンを URL に配置してフロントエンド
4 に渡します。フロントエンドは一時ページを作成し、URL にトークンを保存し、ログイン成功ページにジャンプします
登录成功跳转首页
3. コード リンク
ホームページ ウェブフロントエンド jsチュートリアル ノードが Github サードパーティ ログインを実装する方法の簡単な分析

ノードが Github サードパーティ ログインを実装する方法の簡単な分析

Oct 26, 2022 pm 07:23 PM
nodejs​ node

nodegithub サードパーティ ログインを実装するにはどうすればよいですか?次の記事では、nodejs を使用して github へのサードパーティ ログインを実装する方法を紹介します。

ノードが Github サードパーティ ログインを実装する方法の簡単な分析

1. 詳細なプロセス

ノードが Github サードパーティ ログインを実装する方法の簡単な分析

2. 詳細なプロセス

1. アプリケーションの登録

①github にログインし、Settings=>Developer settings=>OAuth Apps=>新しいアプリケーションを登録

ノードが Github サードパーティ ログインを実装する方法の簡単な分析

ノードが Github サードパーティ ログインを実装する方法の簡単な分析
② 申請情報を入力
ノードが Github サードパーティ ログインを実装する方法の簡単な分析

③ 登録が完了し、Client を取得しますIDクライアント シークレット

ノードが Github サードパーティ ログインを実装する方法の簡単な分析

[関連チュートリアルの推奨事項: nodejs ビデオ チュートリアル]

2. フロントエンドは github 認証ページへのリクエストを開始します。認証が成功すると、コードは設定されたバックエンド コールバック URL

<a href="https://github.com/login/oauth/authorize?client_id={你自己的cilent_id}&redirect_uri=http://localhost:3001/github" class="iconfont ali-icon-github"></a>
ログイン後にコピー

3 にリダイレクトされます。バックエンドはコードを取得し、そのコードで github をリクエストしてトークンを取得し、そのトークンを URL に配置してフロントエンド

router.get(&#39;/github&#39;,controller.auth.githubLogin)
ログイン後にコピー
const axios = require(&#39;axios&#39;)
const querystring = require(&#39;querystring&#39;)

const config = {
    client_id: "你自己的client_id",
    client_secret: "你自己的client_secret"
}
class AuthController {
    async githubLogin(ctx) {
        const code = ctx.request.query.code
        const params = {
            client_id: config.client_id,
            client_secret: config.client_secret,
            code: code
        }
        let res = await axios.post(&#39;https://github.com/login/oauth/access_token&#39;, params)
        console.log(res)
        const token = querystring.parse(res.data).access_token
        ctx.cookies.set(&#39;token&#39;, token, {
            maxAge: ctx.config.jwt.expire * 1000,
        });
        res = { ...ctx.errCode.SUCCESS, data: { token } };
        ctx.redirect(&#39;http://172.25.78.33:8081/login/success?token=&#39;+token)
    }
}
module.exports = exports = new AuthController();
ログイン後にコピー

4 に渡します。フロントエンドは一時ページを作成し、URL にトークンを保存し、ログイン成功ページにジャンプします

一時ページは非常に速くジャンプし、基本的には表示されません。

<template>
  <h1 id="登录成功跳转首页">登录成功跳转首页</h1>
</template>

<script>
import {setLoginedUser} from "@/http/axios";
export default {
  mounted() {
    setLoginedUser("github", this.$route.query.token);
    this.$message({
      message: "登录成功",
      type: "success",
    });
    this.$router.push("/home");
  },
};
</script>

<style>
</style>
ログイン後にコピー

3. コード リンク

https://github.com/wantao666/nodejs-github

ノード関連の知識について詳しくは、こちらをご覧ください。訪問: nodejs チュートリアル!

以上がノードが Github サードパーティ ログインを実装する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

nvmでノードを削除する方法 nvmでノードを削除する方法 Dec 29, 2022 am 10:07 AM

nvm でノードを削除する方法: 1. 「nvm-setup.zip」をダウンロードして C ドライブにインストールします; 2. 「nvm -v」コマンドで環境変数を構成し、バージョン番号を確認します; 3. 「nvm」を使用しますinstall" コマンド ノードのインストール; 4. "nvm uninstall" コマンドでインストールしたノードを削除します。

Express を使用してノード プロジェクトでファイルのアップロードを処理する方法 Express を使用してノード プロジェクトでファイルのアップロードを処理する方法 Mar 28, 2023 pm 07:28 PM

ファイルのアップロードをどのように処理するか?次の記事では、Express を使用してノード プロジェクトでファイルのアップロードを処理する方法を紹介します。

Nodeのプロセス管理ツール「pm2」を徹底分析 Nodeのプロセス管理ツール「pm2」を徹底分析 Apr 03, 2023 pm 06:02 PM

この記事では、Node のプロセス管理ツール「pm2」について説明し、pm2 が必要な理由、pm2 のインストール方法と使用方法について説明します。皆様のお役に立てれば幸いです。

PIノードティーチング:PIノードとは何ですか? PIノードをインストールしてセットアップする方法は? PIノードティーチング:PIノードとは何ですか? PIノードをインストールしてセットアップする方法は? Mar 05, 2025 pm 05:57 PM

ピン張りのノードの詳細な説明とインストールガイドこの記事では、ピネットワークのエコシステムを詳細に紹介します - PIノードは、ピン系生態系における重要な役割であり、設置と構成の完全な手順を提供します。 Pinetworkブロックチェーンテストネットワークの発売後、PIノードは多くの先駆者の重要な部分になり、テストに積極的に参加し、今後のメインネットワークリリースの準備をしています。まだピン張りのものがわからない場合は、ピコインとは何かを参照してください。リストの価格はいくらですか? PIの使用、マイニング、セキュリティ分析。パインワークとは何ですか?ピン競技プロジェクトは2019年に開始され、独占的な暗号通貨PIコインを所有しています。このプロジェクトは、誰もが参加できるものを作成することを目指しています

pkg を使用して Node.js プロジェクトを実行可能ファイルにパッケージ化する方法について説明します。 pkg を使用して Node.js プロジェクトを実行可能ファイルにパッケージ化する方法について説明します。 Dec 02, 2022 pm 09:06 PM

Nodejs実行可能ファイルをpkgでパッケージ化するにはどうすればよいですか?次の記事では、pkg を使用して Node プロジェクトを実行可能ファイルにパッケージ化する方法を紹介します。

npm ノード gyp が失敗した場合の対処方法 npm ノード gyp が失敗した場合の対処方法 Dec 29, 2022 pm 02:42 PM

「node-gyp.js」が「Node.js」のバージョンと一致しないため、npm node gyp が失敗します。解決策は次のとおりです: 1. 「npm cache clean -f」を使用してノード キャッシュをクリアします; 2. 「npm install -」を使用します。 g n" n モジュールをインストールします。 3. 「n v12.21.0」コマンドを使用して、「node v12.21.0」バージョンをインストールします。

Angular と Node を使用したトークンベースの認証 Angular と Node を使用したトークンベースの認証 Sep 01, 2023 pm 02:01 PM

認証は、Web アプリケーションの最も重要な部分の 1 つです。このチュートリアルでは、トークンベースの認証システムと、それが従来のログイン システムとどのように異なるかについて説明します。このチュートリアルを終えると、Angular と Node.js で書かれた完全に動作するデモが表示されます。従来の認証システム トークンベースの認証システムに進む前に、従来の認証システムを見てみましょう。ユーザーはログイン フォームにユーザー名とパスワードを入力し、[ログイン] をクリックします。リクエストを行った後、データベースにクエリを実行してバックエンドでユーザーを認証します。リクエストが有効な場合、データベースから取得したユーザー情報を使用してセッションが作成され、セッション情報が応答ヘッダーで返され、セッション ID がブラウザに保存されます。対象となるアプリケーションへのアクセスを提供します。

ノードが ocr を実装する方法の簡単な分析 ノードが ocr を実装する方法の簡単な分析 Oct 31, 2022 pm 07:09 PM

OCR (光学式文字認識) を実装するにはどうすればよいですか?次の記事ではnodeを使ってOCRを実装する方法を紹介しますので、参考になれば幸いです。

See all articles