快捷導(dǎo)航

使用Node.js實(shí)現(xiàn)GitHub登錄功能

更新時(shí)間：2025年04月17日 10:36:01 作者：菜鳥碼農(nóng)_Shi

這篇文章主要為大家詳細(xì)介紹了如何使用Node.js實(shí)現(xiàn)簡(jiǎn)單的GitHub登錄功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

1. 安裝所需的 npm 包

首先，創(chuàng)建一個(gè)新的 Node.js 項(xiàng)目并安裝必需的依賴：

npm init -y
npm install express passport passport-github2 express-session dotenv

express: 用于構(gòu)建 web 應(yīng)用。
passport: 用于認(rèn)證的中間件。
passport-github2: GitHub 的 OAuth 認(rèn)證策略。
express-session: 用于管理會(huì)話。
dotenv: 用于管理環(huán)境變量。

2. 配置 GitHub OAuth 應(yīng)用

在 GitHub 上創(chuàng)建 OAuth 應(yīng)用并獲取 Client ID 和 Client Secret，步驟如下：

訪問 GitHub OAuth Applications。
點(diǎn)擊 "New OAuth App" 按鈕。
填寫以下信息：
- Application Name：應(yīng)用名稱（例如："MyApp"）。
- Homepage URL：應(yīng)用主頁(yè)的 URL（例如：http://localhost:3000）。
- Authorization callback URL：回調(diào) URL（例如：http://localhost:3000/auth/github/callback）。
點(diǎn)擊 Register Application。

你會(huì)獲得 Client ID 和 Client Secret，這些需要在代碼中使用。

3. 配置 .env 文件

在項(xiàng)目根目錄下創(chuàng)建一個(gè) .env 文件，存儲(chǔ) GitHub 的 Client ID 和 Client Secret。

GITHUB_CLIENT_ID=your-client-id
GITHUB_CLIENT_SECRET=your-client-secret
GITHUB_CALLBACK_URL=http://localhost:3000/auth/github/callback
SESSION_SECRET=your-session-secret

4. 創(chuàng)建 app.js 文件并實(shí)現(xiàn) OAuth 登錄

創(chuàng)建 app.js 文件并編寫以下代碼：

const express = require('express');
const passport = require('passport');
const session = require('express-session');
const dotenv = require('dotenv');
const GitHubStrategy = require('passport-github2').Strategy;

dotenv.config();

const app = express();
const port = 3000;

// 設(shè)置會(huì)話中間件
app.use(session({
    secret: process.env.SESSION_SECRET,
    resave: false,
    saveUninitialized: true
}));

// 初始化 Passport
app.use(passport.initialize());
app.use(passport.session());

// 配置 Passport 使用 GitHub OAuth 2.0 策略
passport.use(new GitHubStrategy({
    clientID: process.env.GITHUB_CLIENT_ID,
    clientSecret: process.env.GITHUB_CLIENT_SECRET,
    callbackURL: process.env.GITHUB_CALLBACK_URL
}, function(accessToken, refreshToken, profile, done) {
    // 在此處可以將 GitHub 用戶信息存儲(chǔ)到數(shù)據(jù)庫(kù)
    return done(null, profile);
}));

// 序列化用戶到 session 中
passport.serializeUser(function(user, done) {
    done(null, user);
});

// 反序列化用戶
passport.deserializeUser(function(user, done) {
    done(null, user);
});

// 路由：跳轉(zhuǎn)到 GitHub 登錄頁(yè)面
app.get('/auth/github', (req, res) => {
    passport.authenticate('github', { scope: ['user:email'] })(req, res);
});

// 路由：GitHub 登錄回調(diào)
app.get('/auth/github/callback', (req, res) => {
    passport.authenticate('github', { failureRedirect: '/' })(req, res, function() {
        res.redirect('/profile');
    });
});

// 路由：用戶個(gè)人資料頁(yè)面
app.get('/profile', (req, res) => {
    if (!req.isAuthenticated()) {
        return res.redirect('/');
    }
    res.json(req.user);  // 返回用戶信息
});

// 路由：退出登錄
app.get('/logout', (req, res) => {
    req.logout(function(err) {
        res.redirect('/');
    });
});

// 路由：首頁(yè)
app.get('/', (req, res) => {
    if (req.isAuthenticated()) {
        return res.redirect('/profile');
    }
    res.send('<a href="/auth/github" rel="external nofollow" >Login with GitHub</a>');
});

// 啟動(dòng)服務(wù)器
app.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`);
});

代碼解釋：

GitHub OAuth 配置：通過 passport-github2 策略配置 GitHub OAuth 認(rèn)證，使用 Client ID 和 Client Secret 進(jìn)行認(rèn)證。
/auth/github：此路由用于觸發(fā) GitHub 登錄流程，用戶點(diǎn)擊鏈接后，會(huì)被重定向到 GitHub 登錄頁(yè)面。
/auth/github/callback：GitHub 會(huì)回調(diào)此路由，將認(rèn)證信息傳遞給應(yīng)用。如果認(rèn)證成功，用戶信息將會(huì)存儲(chǔ)在 req.user 中，并跳轉(zhuǎn)到 /profile 頁(yè)面。
/profile：如果用戶已經(jīng)登錄，將顯示用戶的 GitHub 個(gè)人資料。
/logout：用于用戶退出登錄。
passport.serializeUser 和 passport.deserializeUser：這兩個(gè)方法將用戶信息存儲(chǔ)到會(huì)話中。

5. 啟動(dòng)應(yīng)用并測(cè)試

啟動(dòng) Node.js 應(yīng)用：

node app.js

打開瀏覽器，訪問 http://localhost:3000。

點(diǎn)擊 Login with GitHub，GitHub 將提示你授權(quán)應(yīng)用。

完成授權(quán)后，你將被重定向到 /profile 頁(yè)面，顯示你的 GitHub 用戶信息。

6. 處理認(rèn)證失敗和錯(cuò)誤（可選）

你可能需要在認(rèn)證失敗時(shí)提供合適的反饋，可以在 passport.authenticate 中設(shè)置 failureRedirect：

app.get('/auth/github/callback', (req, res) => {
    passport.authenticate('github', { failureRedirect: '/' })(req, res, function() {
        res.redirect('/profile');
    });
});

如果認(rèn)證失敗，用戶將被重定向到首頁(yè)。

7. 保護(hù)路由（可選）

你可以通過 req.isAuthenticated() 來(lái)檢查用戶是否已認(rèn)證，如果沒有認(rèn)證，則重定向到登錄頁(yè)面。

app.get('/profile', (req, res) => {
    if (!req.isAuthenticated()) {
        return res.redirect('/');
    }
    res.json(req.user);  // 返回用戶信息
});

總結(jié)

通過上述步驟，你已經(jīng)成功地在 Node.js 中實(shí)現(xiàn)了 GitHub 登錄。使用 Passport 和 passport-github2 策略簡(jiǎn)化了 OAuth 認(rèn)證流程。你可以根據(jù)需要擴(kuò)展功能，比如存儲(chǔ)用戶數(shù)據(jù)、處理登錄狀態(tài)等。

到此這篇關(guān)于使用Node.js實(shí)現(xiàn)GitHub登錄功能的文章就介紹到這了,更多相關(guān)Node.js GitHub登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: