首页 > web前端 > js教程 > 正文

使用 Passport.js 释放 Google OAuth 的强大功能:分步指南

WBOY
发布: 2024-08-12 18:36:35
原创
956 人浏览过

嘿,开发者们! ?您准备好升级您的身份验证游戏了吗?今天,我们将深入探讨 Google OAuth 2.0 的世界以及如何使用 Passport.js 实现它。相信我,您的用户会感谢您提供的这种流畅、安全的登录体验!

Unlocking the Power of Google OAuth  with Passport.js: A Step-by-Step Guide

为什么选择 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_IDGOOGLE_CLIENT_SECRET),然后就可以起飞了!

node app.js
登录后复制

导航到 http://localhost:3000/auth/google,然后观看奇迹发生!

总结一下?

好了,伙计们!您刚刚使用 Passport.js 实现了 Google OAuth 2.0。您的用户现在可以使用他们的 Google 帐户登录,享受无缝且安全的体验。

记住,这只是开始。在生产应用程序中,您希望添加更多功能,例如:

  • 正确的错误处理
  • 数据库中的用户数据存储
  • 其他身份验证选项

您是否尝试过在您的项目中实施 OAuth?您面临哪些挑战?请在下面的评论中留下您的想法 – 我很想听听您在身份验证领域的冒险经历!

祝您编码愉快,祝您登录始终顺利! ??‍??‍?

以上是使用 Passport.js 释放 Google OAuth 的强大功能:分步指南的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!