javascript - SPA如何在OAuth2隐式流程中提取访问 token-6ren

javascript - SPA如何在OAuth2隐式流程中提取访问 token

转载作者：行者123 更新时间：2023-11-29 23:22:11

我有一个基于 Angular SPA，想利用 OAuth2 隐式流 OAuth2 implicit flow

有了授权服务器，如果我有一个活跃的 session ，我会把这个 URL 放在浏览器地址栏中

https://server.example.com/authorize?response_type=token&client_id=s6BhdRkqt3&state=xyz&redirect_uri=https%3A%2F%2Fclient%2Eexample%2Ecom%2Fcb HTTP/1.1

我使用 access_token 正确重定向到

 HTTP/1.1 302 Found
 Location: http://client.example.com/cb#access_token=2YotnFZFEjr1zCsicMWpAAs&state=xyz&token_type=example&expires_in=3600

规范指出 client.example.com/cb 应该返回一个网页(通常是带有嵌入式脚本的 HTML 文档)能够访问完整的重定向 URI，包括用户保留的片段-agent，并提取访问 token 。我已经实现了一个页面，其中包含从 window.location.hash 中获取 access_token 的脚本，它可以正常工作。

现在，由于 SPA 已经加载，而且我还需要为 token 续订执行此操作，因此我想改为使用 ajax 请求来执行此操作。但是，使用 ajax 时，会自动遵循重定向，我只得到 HTML 页面，但 access_token 丢失了。我可以在响应的位置 header 中看到 access_token，但不知道如何访问它。

Auth0和 Okta似乎支持使用隐式流的静默身份验证，他们是怎么做到的？

如有任何帮助，我们将不胜感激。

最佳答案

access_token 只能通过 location.hash 访问，ajax 请求不会更新它，因此无法通过 ajax 请求实现。

查看了其他图书馆是如何做的，发现了这个: https://github.com/damienbod/angular-auth-oidc-client#silent-renew

诀窍是创建一个隐藏的 iframe 并且每当需要 token 时，将 src 属性更新为构造的 URL。 token 将在 iframe 中可用，只需将其传递给 window.parent。

要实现这一点，首先要将事件监听器附加到 window

window.addEventListener("message", receiveToken, false);

function receiveToken(event) {
  // event.data will contain hash value
  console.log ('token received ' + event.data) ;
}

并在需要新 token 时调用此函数

function fetchToken() {
    document.getElementById('iframe').src='https://server.example.com/authorize?response_type=token&client_id=s6BhdRkqt3&state=xyz&redirect_uri=https%3A%2F%2Fclient%2Eexample%2Ecom%2Fcb'
}

虽然 http://client.example.com/cb 应该返回这样的内容

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    window.parent.postMessage(location.hash, "http://client.example.com");
</script>
</head>
<body></body>
</html>

此处 postMessage 的第二个参数是 targetOrigin，它应该与托管 SPA 的主机名匹配。如果您不想要此安全限制，可以将其设置为 '*'

关于javascript - SPA如何在OAuth2隐式流程中提取访问 token ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50285286/

全站热门文章

首页

博学

6Ren·AI

商城

javascript - SPA如何在OAuth2隐式流程中提取访问 token