使用 angular-oauth2-oidc 库从 Auth0 获取完全访问令牌

Question

我已将 the angular-oauth2-oidc 库设置为与 Auth0 一起使用。但是，Auth0 一直向我发送一个非常短的访问令牌，例如mSNhEfdDHK6t-kT5QweRtgec-FPGAsdfEw9，而不是完整的 JWT 令牌。重现问题的方法如下：

在 Auth0 中创建一个您希望作为资源访问的示例 "API"。
为 Auth0 中的隐式流创建 SPA 应用程序设置。
按照 angular-oauth2-oidc or clone my sample repo 的快速开始。

按照这些行配置它：

export const authConfig: AuthConfig = {
  issuer: 'https://your-tenant-name.eu.auth0.com/',
  clientId: 'your-spa-client-id-here',
  redirectUri: window.location.origin + '/index.html',
  scope: 'openid profile email',
};

通过单击应用程序上的登录按钮触发 initImplicitFlow() 调用。

当你这样做时：

结果：JWT IdToken 完整，但 AccessToken 较短。
预期：两个令牌都是完整的 JWT 令牌。

this thread on the Auth0 community forums 解释了为什么您会得到这样的 "opaque string" 作为访问令牌。最高的、被接受的答案提到了我已经在做的事情（sope，就像我所做的那样，调用 /authorize，等等）。然而，在该线程的下方，它提到 在调用 /authorize 时设置 audience 是解决方案 ，无论如何这似乎是一件好事。

但是 audience 怎么发送？ the AuthConfig type 上没有这样的属性来设置它，查看 initImplicitFlow() 源代码它直接向上更改 location.href 所以那里也没有拦截。

Answer 1

你快到了。尽管将 audience 作为 AuthConfig 类型上的特定属性可能会很好，但是已经有一种方法可以配置它：为此使用 the customQueryParams：

export const authConfig: AuthConfig = {
  issuer: 'https://your-tenant-name.eu.auth0.com/',
  clientId: 'your-spa-client-id-here',
  redirectUri: window.location.origin + '/index.html',
  scope: 'openid profile email',
  customQueryParams: {
    audience: 'https://your-api-audience-id.example.com',
  },
};

audience 是您在 Auth0 中配置的标识符。这是管理界面的屏幕截图：

使用 angular-oauth2-oidc 库从 Auth0 获取完全访问令牌

Get full access token from Auth0 using angular-oauth2-oidc library

angular

auth0

angular-oauth2-oidc