node.js - 如何使用axios通过OAuth登录-6ren

node.js - 如何使用axios通过OAuth登录

转载作者：太空宇宙更新时间：2023-11-03 22:04:53

25

4

我上周刚刚开始通过 Brad Traversy 的 MERN 类(class)学习 MERN 堆栈:https://www.udemy.com/mern-stack-front-to-back/在类(class)中，他将前端和后端分离，并使用后端作为REST API。在后端，他有一个 POST 路由(/api/auth)，返回 JWT token ，并且该 API 在 React 应用程序 axios 中使用。然后，将响应用作 header x-auth-token 的值，以便身份验证中间件可以帮助进行身份验证。作为一名正在实习的计算机科学新手，我需要为我的公司制作一个网络应用程序供内部使用，该应用程序使用 slack OAuth 进行身份验证。现在问题是:当我使用 axios 时，响应是一些如下 HTML 代码:

GET https://slack.com/oauth/authorize? 
scope=identity.basic,identity.email,identity.avatar&client_id=48321353297.675712837139 in postman, result:

<!DOCTYPE html>
<html lang="en-US" class="">
    <head>
        <script type="text/javascript">
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
    'gtm.start': Date.now(),
    'event' : 'gtm.js',
    'secure_page' : false,
});
var firstScript = document.getElementsByTagName('script')[0];
var thisScript = document.createElement('script');
thisScript.async = true;
thisScript.src = '//www.googletagmanager.com/gtm.js?id=GTM-KH2LPK';
firstScript.parentNode.insertBefore(thisScript, firstScript);
</script>
        <script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(e) {
    var gtmDataLayer = window.dataLayer || [];
    var gtmTags = document.querySelectorAll('*[data-gtm-click]');
    var gtmClickHandler = function(c) {
        var gtm_events = this.getAttribute('data-gtm-click');
        if (!gtm_events) return;
        var gtm_events_arr = gtm_events.split(",");
        for(var e=0; e < gtm_events_arr.length; e++) {
            var ev = gtm_events_arr[e].trim();
            gtmDataLayer.push({ 'event': ev });
        }
    };
    for(var g=0; g < gtmTags.length; g++){
        var elem = gtmTags[g];
        elem.addEventListener('click', gtmClickHandler);
    }
});

        </script>
        <script type="text/javascript">
(function(e,c,b,f,d,g,a){e.SlackBeaconObject=d;
e[d]=e[d]||function(){(e[d].q=e[d].q||[]).push([1*new Date(),arguments])};
e[d].l=1*new Date();g=c.createElement(b);a=c.getElementsByTagName(b)[0];
g.async=1;g.src=f;a.parentNode.insertBefore(g,a)
})(window,document,"script","https://a.slack-edge.com/bv1-6-8cacda2/slack_beacon.bc058f2eca7b7d633d5a.min.js","sb");
window.sb('set', 'token', '3307f436963e02d4f9eb85ce5159744c');
sb('set', 'user_' + "batch", "signup_api");sb('set', 'user_' + "created", "2019-06-03");sb('set', 'user_id', "UK781P40Y");
sb('set', 'name_tag', "wemine" + '/' + "klaus.chau");
window.sb('track', 'pageview');
</script>
        <meta charset="utf-8">
        <script type="text/javascript">window.location.href = "https:\/\/slack.com\/oauth\/authorize?scope=identity.basic,identity.email,identity.avatar&client_id=48321353297.675712837139&tracked=1";</script>
    </head>
    <body></body>
</html>

我认为问题在于它向我发送了“确认登录页面”，而不是我从重定向URI 需要的 jwt token 。即使我没有使用密码和电子邮件登录，我是否可以像 Brad 在类(class)中所做的那样实现？谢谢可以引用的资源: https://github.com/bradtraversy/devconnector_2.0/blob/master/routes/api/auth.js https://github.com/bradtraversy/devconnector_2.0/blob/master/client/src/actions/auth.js https://github.com/bradtraversy/devconnector_2.0/blob/master/client/src/reducers/auth.js

最佳答案

您无法使用 Ajax(axios 或 request 或 XMLHttprequest)获取 OAuth 或任何外部身份验证 token 。因为这里是流程，

您点击登录按钮
转到护照(或任何身份验证)路线。
身份验证提供商重定向到原始 OAuth 提供商(例如 fb、google、slack 等)
您在他们的网站上登录。
它会重定向回护照申请的另一条路线，该路线将解密请求正文并获取 token 。
它返回 token 。

因此，基本上，要使重定向(第 3 步)发挥作用，您需要重定向或使用 href 到 Passport 路由(这将是 GET 路由)，这将反过来重定向到 google/fb/slack。

希望您理解为什么不能使用 Ajax 从外部身份验证提供程序获取数据。

关于node.js - 如何使用axios通过OAuth登录，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57051175/

25

4

0

文章推荐： jquery - 降级jQuery、HTML5重站

文章推荐： c# - 拆分字符串并插入数据库

文章推荐： node.js - 验证失败时如何重新填充我的登录表单

文章推荐： c# - DateTime 时间差和毫秒数

axios - 如何停止拦截器内的 axios 响应传播
我有一个 axios 拦截器，我在其中捕获 401 错误并将用户重定向到登录页面。问题是在 window.location 运行之后和实际重定向之前 - axios 操作继续到原始调用者。我想停止进程
axios - Nuxt Axios 模块读取状态码
我正在调用一个返回至少 2 个成功状态代码的 Rest API。正常的 200 OK 和 202 Accepted 状态代码。两者都在正文中返回一个内容。如果我在 postman 中执行我的电话
axios - 如何从 Axios 获取响应时间
任何人都可以提出任何从 Axios 获得响应时间的方法吗？我找到了 axios-timing，但我真的不喜欢它(有争议，我知道)。我只是想知道是否有人找到了一些记录响应时间的好方法。最佳答案您可以
axios - 使用默认方法创建 axios 实例？
我正在尝试使用 axios.create() 创建一个 axios 实例但似乎无法弄清楚如何在实例上设置默认方法。不工作 export default axios.create({ requ
axios - 如何在代码中的一个位置记录所有 axios 调用
我正在将 axios 用于 React 应用程序，并且我想记录我在应用程序中任何位置进行的所有 axios 调用。我已经通过 create 函数使用了 axios 的单个全局实例，并且我能够记录通用的
axios - NestJS:使用基于 axios 的客户端的端到端测试未按预期工作
我有一个公开一些端点的 NestJS 应用程序，我已经编写了一个客户端应用程序，我计划将其作为 NPM 包发布以与 nest 服务器一起使用。我正在尝试编写启动 nest 服务器的端到端测试，将其连接
axios - 将图片从数据 url 上传到 Axios？
我一直在使用这个将图像文件上传到 API (Graphcool)，并且一切正常: fileUpload(file) { let data = new FormData();
javascript - Axios:对多个 axios 实例使用相同的拦截器
在我的代码库中有使用创建的各种 Axios 实例 axios.create() 因为我的应用程序中使用了多个基本 URL。所以每个 baseURL 我们都创建了一个对应的 Axios 实例。现在在
mocking - 使用 axios 构造函数时模拟 axios
我有一个 API 实用程序函数，它使用构造函数符号调用 axios: axios({ method, url: `${BASE_URL}/${url}`, data }); 我想用
mocking - 使用 axios 拦截器模拟 axios
我正在尝试使用 mockAxios 来测试 axios 拦截器。 export default { get: jest.fn(() => Promise.resolve({ data: {}
axios - 什么是 axios 取消 token ？
https://github.com/axios/axios#cancellation 我正在研究如何取消上传 PUT 请求并在文档中遇到了这一部分。为什么需要 token 才能取消？简单来说流程或过
axios - 如何在 axios PUT 请求中传递参数？
axios.put('http://localhost:3000/api/userDatas/findUserAddProp',{ params: { userId: "5bb
javascript - axios 请求立即开始，无需等待 axios.all
我的 axios promise 没有按预期工作。我猜执行是在 forEach 循环内开始的。我希望 axios 执行仅在 batch.commit 之后开始 aMobileNumbers.forEa
javascript - async + axios 还是只是 axios，这就是问题所在
有区别吗 useEffect(()=>{ async function fetchData(){ await axios .get(path, config) .t
reactjs - 在另一个 axios 请求中使用 axios 响应数据
我正在使用 axios 获取信息，并且我需要在不同 axios 响应的另一个处理程序中使用该信息。我似乎无法在第二个响应处理中使用第一个响应中加载的数据。例如: const [firstData,
reactjs - 在 axios 的所有实例中使用的 axios 中间件
我在我的 React 应用程序中使用 axios，在我的许多脚本中使用 import axios from 'axios 。我想使用一种为所有 axios 调用/错误调用的中间件。我该如何处理这个问题
javascript - Axios/Vue - 防止 axios.all() 继续执行
在我的应用程序中，为了对用户进行身份验证，我调用了 fetchData 函数。如果用户 token 无效，应用程序将运行 axios.all()，我的拦截器将返回大量错误。如何防止 axios.al
axios - 使用 axios POST 请求传递 header
我已经按照 npm 包文档中的建议编写了一个 Axios POST 请求，例如: var data = { 'key1': 'val1', 'key2': 'val2' } axios
vue.js - axios 和 vue-axios 有什么区别？
谁能提供有关 axios 和 vue-axios 之间区别的详细信息？我们需要使用哪一个？两者都需要使用api吗？谢谢最佳答案 vue-axios 只是一个包装器，将 axios 暴露给组件作为
axios - 带有 Axios 和 Loopback 的 "where"过滤器中的变量
我在向 Loopback(v3) API 发出的 Axios 请求中使用变量时遇到了麻烦。什么有效？如果我使用“REST 表示法”，它运行良好: getInfo() { axios.get(

首页

博学

6Ren·AI

商城

node.js - 如何使用axios通过OAuth登录