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

Question

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

1. 在 Auth0 中创建一个您希望作为资源访问的示例“API”。
2. 创建一个 SPA 应用程序，为 Auth0 中的隐式流设置。
3. 按照来自 angular-oauth2-oidc 的快速开始或克隆 my sample repo .

4. 按照这些行配置它:

   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',
   };
   

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

当你这样做时:

• 结果:完整的 JWT IdToken，但较短的 AccessToken。
• 预期:两个 token 都是完整的 JWT token 。

有this thread on the Auth0 community forums这就解释了为什么你会得到这样一个访问 token 的“不透明字符串”。被接受的最上面的答案提到了我已经在做的事情(sope，就像我所做的那样，调用 /authorize 等)。但是，在该线程的下方，它提到了在调用 /authorize 时设置 audience 是解决方案，无论如何这似乎都是一件好事。 p>

但是您如何发送观众？ 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 中配置的标识符。这是管理界面的屏幕截图: