嘿，開發者們！ ？您準備好升級您的身份驗證遊戲了嗎？今天，我們將深入探討 Google OAuth 2.0 的世界以及如何使用 Passport.js 實現它。相信我，您的用戶會感謝您提供的這種流暢、安全的登入體驗！
為什麼選擇 Google OAuth 2.0？ ？
在開始之前，我們先來談談為什麼 Google OAuth 2.0 如此重要：
1.使用者友善：不再有「忘記密碼」的麻煩！
2.諾克斯堡安全：利用 Google 的頂級安全協定。
3. 信任增強器：使用者使用 Google 帳戶感到更安全。
聽起來不錯，對吧？讓我們開始吧！
第一步：做好準備！ ?️
首先，讓我們安裝我們的工具。啟動你的終端並運行：
npm install passport passport-google-oauth2 express-session
這些軟體套件是您實作 Google OAuth 2.0 的最佳新朋友。
第 2 步：Google 開發者控制台歷險記 ️
是時候在 Google 開發者控制台中設定您的專案了。這是你的藏寶圖：
1.前往 Google 開發者控制台。
2. 建立一個新專案（給它一個很酷的名字！）。
3.導覽至「API 與服務 > 憑證」。
4. 按一下「建立憑證」並選擇「OAuth 2.0 用戶端 ID」。
5.設定您的同意畫面（不要忘記對圖示微笑！）。
6. 設定您的 OAuth 2.0 用戶端 ID（Web 應用程式類型）。
7. 新增您的重新導向 URI（例如，http://localhost:3000/auth/google/callback）。
專業提示：確保您的客戶端 ID 和客戶端金鑰安全。它們就像您 OAuth 王國的鑰匙！
第三步：護照配置魔法✨
現在，讓我們在我們的應用程式中加入一些 Passport.js 魔法：
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
passport.use(new GoogleStrategy({
clientID: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
callbackURL: "http://localhost:3000/auth/google/callback"
},
function(accessToken, refreshToken, profile, done) {
// Your user-saving logic goes here!
User.findOrCreate({ googleId: profile.id }, function (err, user) {
return done(err, user);
});
}
));
// Don't forget to serialize and deserialize your users!
passport.serializeUser((user, done) => {
done(null, user.id);
});
passport.deserializeUser((id, done) => {
User.findById(id, (err, user) => {
done(err, user);
});
});
第四步：成功之路？ ️
讓我們設定我們的身分驗證高速公路：
const express = require('express');
const passport = require('passport');
const app = express();
app.use(passport.initialize());
app.use(passport.session());
// The gateway to Google OAuth
app.get('/auth/google',
passport.authenticate('google', { scope: ['profile', 'email'] })
);
// Welcome back! Handle the callback
app.get('/auth/google/callback',
passport.authenticate('google', {
successRedirect: '/auth/google/success',
failureRedirect: '/auth/google/failure'
})
);
// Success and failure destinations
app.get('/auth/google/success', (req, res) => {
res.send('Welcome aboard! ?');
});
app.get('/auth/google/failure', (req, res) => {
res.send('Oops! Something went wrong. ?');
});
app.listen(3000, () => {
console.log('Server is up and running! ?');
});
第五步：啟動時間！ ？
設定環境變數（GOOGLE_CLIENT_ID 和 GOOGLE_CLIENT_SECRET），然後就可以起飛了！
node app.js
導覽至 http://localhost:3000/auth/google，然後觀看奇蹟發生！
總結一下？
好了，夥伴們！您剛剛使用 Passport.js 實作了 Google OAuth 2.0。您的用戶現在可以使用他們的 Google 帳戶登錄，享受無縫且安全的體驗。
記住，這只是開始。在生產應用程式中，您希望添加更多功能，例如：
您是否嘗試過在您的專案中實作 OAuth？您面臨哪些挑戰？請在下面的評論中留下您的想法 – 我很想聽聽您在身份驗證領域的冒險經歷！
祝您編碼愉快，並祝您登入始終順利！ ?????
以上是使用 Passport.js 釋放 Google OAuth 的強大功能：逐步指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
