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

【问题标题】：Get full access token from Auth0 using angular-oauth2-oidc library使用 angular-oauth2-oidc 库从 Auth0 获取完全访问令牌
【发布时间】：2019-02-01 03:35:02
【问题描述】：

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

在 Auth0 中创建一个您希望作为资源访问的示例“API”。
为 Auth0 中的隐式流创建一个 SPA 应用程序设置。
从angular-oauth2-oidc 快速入门或克隆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 解释了为什么您会为访问令牌获得这样一个“不透明字符串”。最受接受的答案提到了我已经在做的事情（sope，就像我一样，打电话给/authorize，等等）。但是，在该线程的较低部分它提到在调用/authorize 时设置audience 是解决方案，这似乎是一件好事。

但是您如何发送audience？ the AuthConfig type 上没有这样的属性来设置它，并且查看 initImplicitFlow() 源它只是直接更改 location.href 所以那里也没有拦截。

【问题讨论】：

标签： angular auth0 angular-oauth2-oidc

【解决方案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 中配置的标识符。这是管理界面的截图：

【讨论】：

这个答案是金！拯救了我的一天！ :)