如何使用 axios 进行 OAuth 登录
Posted
技术标签:
【中文标题】如何使用 axios 进行 OAuth 登录【英文标题】：how to use axios to sign in with OAuth 【发布时间】：2019-11-24 19:56:40 【问题描述】：我上周刚开始学习 MERN 堆栈，学习的是 Brad Traversy 的 MERN 课程：https://www.udemy.com/mern-stack-front-to-back/ 在课程中，他将前端和后端分离，并将后端用作 REST API。在后端，他有一个返回 JWT 令牌的 POST 路由（/api/auth），API 用于 react 应用 axios。然后，响应用于标头 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>
我认为问题在于它向我发送了“确认登录页面”，而不是我需要来自 redirectURI 的 jwt 令牌。 即使我没有使用密码和电子邮件登录，我是否可以像 Brad 在课程中所做的那样实施？ 谢谢 可以参考的资源： 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
【问题讨论】：
查找passportjs及相关策略（以slack策略为例）
嗨 Aritra，我尝试在我的代码中实现它，但我仍然想知道如何使用 axios 从与原始链接不同的链接中获取数据（例如，我想调用 GET api/auth 并从 api/auth/redirect 获取返回数据）。非常感谢。
【参考方案1】：
您无法通过Ajax（axios 或 request 或 XMLHttprequest）获取 OAuth 或任何外部身份验证令牌。因为这里是流程，
-
你点击了
login按钮
转到护照（或任何身份验证）路线。
身份验证提供程序重定向到原始 OAuth 提供程序（如 fb、google、slack 等）
您在他们的网站上登录那里。
它重定向回您的护照应用程序的另一个路由，该路由解密请求正文并获取令牌。
它返回令牌。
所以基本上要使重定向（第 3 步）起作用，您需要重定向或 href 到护照路由（这将是一个 GET 路由），这将反过来重定向到 google/fb/slack。
希望您了解为什么不能使用 Ajax 从外部身份验证提供程序获取数据。
【讨论】：
如果有帮助请点击灰色勾号接受答案以上是关于如何使用 axios 进行 OAuth 登录的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 oauth2 通过 REST Web 服务进行身份验证
如何从 django-oauth-toolkit 令牌获取当前登录用户？