如何通过解耦的后端和前端进行社交身份验证(Passport / Express / React)

2024-02-25

我正在尝试使用 PassportJS / Express 后端和 React JS 前端来进行社交身份验证。但是,我不确定如何去做。

我做了一些阅读并实现了社交身份验证,当使用 Google Auth 登录时,它会返回由 Express 应用程序签名的 JWT 令牌。这允许我使用以下命令访问后端受保护的端点Authorization header.

然而,如何通过 React 触发这一点,特别是因为对 Google 的调用应该直接通过前端进行(因此后端不使用 Passport JS 进行身份验证触发)?具体来说,当后端和前端解耦时,这个流程应该是什么样的?


事实上,哈哈,发帖后不久,我就发现了这个:https://medium.com/@alexanderleon/implement-social-authentication-with-react-restful-api-9b44f4714fa https://medium.com/@alexanderleon/implement-social-authentication-with-react-restful-api-9b44f4714fa

瘦者:

  • 通过 Google 验证客户端
  • 使用 Google 的令牌并发送到 Express 服务器;验证令牌是否经过身份验证并匹配
  • 如果两者匹配,则发出用于 Express JS API 调用的 JWT 令牌。这应该存储在 localStorage 中。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何通过解耦的后端和前端进行社交身份验证(Passport / Express / React) 的相关文章

  • Nodejs 中的子域

    如何处理nodejs的子域请求 例如以下代码回显test在控制台中的任何请求http localhost 9876 任何内容 http localhost 9876 5Banything 5D var http require http h
  • React JS 服务器端问题 - 找不到窗口

    你好 我正在尝试在我的reactJS项目中使用react rte 我有服务器端渲染 每次我想使用这个包时 我都会得到 return msie 6 9 b test window navigator userAgent toLowerCase
  • 将 Firebase FCM 添加到 ReactJS 应用程序

    我正在尝试向我的 ReactJS 应用程序中的用户发送推送通知 我已添加 firebase 请求用户通知权限 这正在发挥作用 但现在我想注册设备令牌 但这给了我错误 消息传递 我们无法注册默认的 Service Worker 无法注册 Se
  • 全局传递 xhr onload 函数的值

    在我正在创建的应用程序中 我有以下 XMLHttpRequest 并且我正在尝试传递结果data在 的里面xhr onload 到在同一父函数中创建的数组中 var url http api soundcloud com resolve j
  • 在文件之间共享 mqtt 客户端对象

    我这样连接到 MQTT mqtt js const mqtt require mqtt var options needed options var client mqtt connect mqtt someURL options clie
  • 监听文件夹和文件(更改)

    可以直接在 PHP 或 Node 上监听文件夹和文件的更改 通过事件 还是我需要创建自己的方法来执行此操作 Example 我需要听文件夹 user 如果我将一些文件添加到该目录中 PHP 或 Node 会收到信息并运行PathEvent
  • 如何在 webpack 中渲染嵌套的 SASS?

    采取以下CSS MyComponent color blue Button color red 以及以下 React 组件 import React from react import classes from MyComponent sc
  • 如何映射轮播的子项数组?

    我正在尝试将 Carousel 组件包装在映射对象数组周围作为组件的子级 目前我只能让映射创建映射对象的 1 个子对象 轮播需要像这样
  • 如何在reactjs中禁用未来日期?

    我没有使用任何日期选择器 代码仍然工作正常 到目前为止 我已经选择了输入类型 一切正常 现在我想禁用未来的日期 我怎么做 div div
  • 没有 Props 的 TypeScript React State

    我想利用 TypeScript 中的静态和强类型 但仅限于状态 因为我不打算采用任何道具 当我尝试传递接口时 最终出现错误 import as React from react import Link from react router d
  • HTML 格式的 Google Apps 脚本

    是否可以在我的 HTML 中使用 google apps 脚本 我希望能够从外部框架 例如 Node js 以纯 Javascript 形式从表单写入电子表格 https developers google com apps script
  • Node.js http get 请求错误事件未拾取 404 或 403

    我正在对图像发出 HTTP GET 请求 有时图像会以 404 或 403 的形式返回 令我惊讶的是 我必须明确检查这一点 而不是在错误事件中选择它 这是它的工作原理还是我在这里遗漏了一些东西 function processRequest
  • 在 Node 中使用 Babel 导入与请求 [重复]

    这个问题在这里已经有答案了 我想在一个文件中导入一个类 use strict import models from model class Foo bar export default new Foo 当我使用导入时它有效 例如 impor
  • 如何在Electron WebView中连接到代理?

    因为我可以通过连接到免费代理服务器 或付费 目前用作电子 JS 解决方案作为桌面应用程序 代理列表服务器示例 http proxylist hidemyass com http proxylist hidemyass com 您可以使用 s
  • react-route,react-hot-loader.webpack(您无法更改 ;它将被忽略)

    这是我的第一个项目react react router react hot loader webpack dev server and webpack 当我更改react组件中的代码时 热加载器生效 但同时控制台告诉我一个警告 您无法更改
  • 节点无法抓取某些页面

    我不知道这是否与冷融合页面有关 但我无法刮掉这些 cfm pages 在目录中的命令行中request run node gt var request require request node gt var url http linguis
  • Angular-cli AOT 构建失败,并显示“致命错误:CALL_AND_RETRY_LAST 分配失败 - JavaScript 堆内存不足”

    我正在尝试使用 AOT 构建我的 angular cli 项目 ng build aot 但它因错误而失败 致命错误 CALL AND RETRY LAST 分配失败 JavaScript 堆内存不足 如果我用 prod flag 任何想法
  • React 在同一组件中渲染多个模态

    我对 React 和一般编码都很陌生 我试图在同一组件中渲染多个模态 但它们都是同时渲染的 因此看起来所有链接都在最后一个模态中渲染文本 这是状态设置的地方 class Header extends React Component cons
  • firebase 和 firebase-admin npm 模块有什么区别?

    我想使用 Firebase 身份验证 数据库和存储 构建 Node js Web 应用程序 但我对应该使用哪个模块感到困惑 firebase or firebase 管理员 或两者 管理 SDK 运行您的代码管理权限 https fireb
  • ReactCSSTransitionGroup 组件WillLeave 未调用

    我尝试使用 ReactCssTransition 但不知何故该事件没有被调用 componentWillLeave 这是我的组件 import React Component from react import TransitionGrou

随机推荐

  • 核心图和 NSDate (iPhone)

    我希望绘制一个折线图 其中 x 轴定义为两个日期之间的天数 y 轴是每天变化的值 我可以将 y 值绘制为 NSNumber 但我不知道如何在 x 轴上设置范围和标记 我查看了 core plot 发行版的 examples 目录中的日期示例
  • 像 FireBug 一样获取 PostData

    任何人 帮助我 如何使用 xpcom 其他东西获取扩展内的 headers 和 PostData 我无法在 firebug 中找到函数 因为它的代码库很大 谢谢你们 我假设您需要请求标头 而不是响应标头 然后你注册一个观察者http on
  • 在 C 中返回错误的 MD5 哈希值

    我正在尝试为字符串生成 MD5 哈希值 你好世界 使用原始 未修改的 md5 h 和md5c c http www arp harvard edu eng das manuals QNX6libs md5c 8c source html f
  • Tizen WEB 应用程序在 2.2 版本中无法运行

    我是 Tizen 的新手 并通过在 64 位 Windows 7 计算机中将 SDK 版本设置为 2 2 来开始开发 我创建了一个新的 WEB 应用程序 在尝试运行它 在模拟器和真实设备上 时 安装后没有任何反应 我尝试了几次启动该应用程序
  • Windows 上 PyCharm 中 numpy 的安装

    当我尝试在 Pycharm Windows 中安装 numpy 时 我不断收到错误 这是我得到的错误 C Python27 lib distutils dist py 267 UserWarning 未知的分发选项 define macro
  • cmd.exe 的 CSS 字体系列

    我在CSS中找不到任何与CMD exe中使用的字体系列类似的字体系列 请你帮助我好吗 您可以使用 font family monospace 指定您希望使用等宽字体 控制台使用等宽字体以确保所有字符具有相同的宽度 请注意 某些浏览器无法正确
  • 如何访问在条件匹配组 Javascript 正则表达式中导致匹配的表达式?

    我有一个条件匹配分组正则表达式 例如 sun bmoon 当我访问字符串中的匹配项时 我希望能够看到导致匹配的表达式 let regex sun bmoon let match regex exec moon return bmoon 这可
  • 通俗地说,Java 中的“静态”是什么意思? [复制]

    这个问题在这里已经有答案了 我被告知了它的几个定义 查看了维基百科 但作为 Java 的初学者 我仍然不确定它的含义 有人精通 Java 吗 static 意味着标记为此类的变量或方法在类级别可用 换句话说 您不需要创建该类的实例来访问它
  • 如何使用 RefersToRange?

    谁能告诉我如何在vba中使用RefersToRange 以及什么时候需要它 请先提供简单的例子 提前致谢 在Excel中 有一个概念 命名范围 这是一个带有名称的单元格范围 这由Name https msdn microsoft com e
  • 刷新 firebase id 令牌服务器端

    我正在开发一个使用 Next js 13 和带有 id 令牌的 firebase auth 的应用程序 我想利用服务器端组件的 Next JS 内置功能来更快地获取用户数据 因此我需要在初始请求时验证服务器上的 id 令牌 当没有用户登录受
  • 使用pdfminer从pdf中提取文本给出多个副本

    我正在尝试使用 PDFMiner 从 PDF 文件中提取文本 代码位于在Python中使用PDFMiner从PDF文件中提取文本 https stackoverflow com questions 26494211 extracting t
  • 以编程方式选择 jqGrid 中的所有行?

    以编程方式选择设置为多选的 jqGrid 中的所有行的最佳方法是什么 该代码可以一次循环遍历所有行并选择每一行 但不会选中网格标题中的复选框 我正在考虑只触发标题行复选框的单击事件 但这会对底层 jqGrid 实现做出假设 一定会有更好的办
  • 使用动态规划将球分配到“给定容量的箱子”中

    我想知道如何使用DP解决这样的问题 给定 n 个球和 m 个箱子 每个箱子有 max 容量 c1 c2 cm 将这 n 个球分配到这 m 个箱子中的方式总数是多少 我面临的问题是 如何找到递归关系 当容量都是单个常数 c 时我可以 将有多个
  • 如何在 django 中安排将来某个时间发送电子邮件?

    我想安排在执行特定操作时向用户发送电子邮件 但是 如果用户采取其他操作 我想取消该电子邮件并且不发送它 我该如何在 django 或 python 中做到这一点 豆茎 如果可以安装的话豆茎 http kr github com beanst
  • C 的 GCD 函数

    Q 1 问题5 可整除 我尝试了蛮力法 但是需要时间 所以我参考了几个网站 找到了这段代码 include
  • ChartJS 甜甜圈图表渐变填充

    因此 我尝试为 ChartJS 圆环图进行渐变填充 但这仅适用于水平方向 而不适用于圆形 这是我正在使用的代码 var ctx document getElementById chart area getContext 2d var gra
  • 仅显示 shell_exec('df') 中磁盘使用数据的特定列

    我正在尝试编写一个 PHP 脚本来执行用于报告的 shell 函数 我从磁盘使用报告开始 我想要以下格式 drive path total size free space 没有其他的 我的脚本是 output shell exec df h
  • 我可以在 TCPDF 中使用“旧式”(非衬里)数字吗?

    Unicode 不区分衬里数字 与大写字母具有相同的比例 在表格中很有用 但在运行文本中很突出 和非衬里数字 它们看起来更像小写字母 具有上升部分和下降部分 因为它认为它们是彼此的变体 不过 许多字体都具有两组数字 并提供了一种在它们之间进
  • Mozilla firefox 无法使用 window.onbeforeunload

    我在用着window onbeforeunload在窗口关闭时向用户显示消息 该功能在 Chrome 和 IE 上运行良好 但在 Firefox 上不起作用 我使用的是 Firefox 版本26 0我已经尝试了很多 但没有任何意义 有人说这
  • 如何通过解耦的后端和前端进行社交身份验证(Passport / Express / React)

    我正在尝试使用 PassportJS Express 后端和 React JS 前端来进行社交身份验证 但是 我不确定如何去做 我做了一些阅读并实现了社交身份验证 当使用 Google Auth 登录时 它会返回由 Express 应用程序