使用 Passport.js 釋放 Google OAuth 的強大功能：逐步指南

嘿，開發者們！ ？您準備好升級您的身份驗證遊戲了嗎？今天，我們將深入探討 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中文網其他相關文章！