自定义范围：将 angular-oauth2-oidc 与 Auth0 和 Github 结合使用

Question

我正在尝试整合 angular-oauth2-oidc library with Auth0 and Github。请记住，我已经从 Auth0/Github UI 方面选择了所有范围（为了安全起见）。

使用最新功能

我正在使用 angular-oauth2-oidc 必须提供的最新功能。

例如，我正在使用代码流，即：

responseType: 'code',

此外，我为我的 customQueryParams 使用了适当的受众，例如

customQueryParams: {
    // API identifier configured in Auth0 - Put made up audience here
    audience: 'https://dev-51246k0z.us.auth0.com/api/v2/',
  },

可以在此处查看完整的 auth.config.ts 文件：

import { AuthConfig } from 'angular-oauth2-oidc';

export const authConfig: AuthConfig = {

  // Your Auth0 app's domain
  // Important: Don't forget to start with https://
  //  AND the trailing slash!
  issuer: 'https://id.company-name.com/',

  // The app's redirectUri configured in Auth0
  redirectUri: window.location.origin ,

  // URL of the SPA to redirect the user after silent refresh
  silentRefreshRedirectUri: window.location.origin,

  useSilentRefresh: true,

  // The app's clientId configured in Auth0 - example client id
  clientId: 'A0tLAYYSyGRtwyF4wlVh49jmLZCW8pVQ',

  // Scopes ("rights") the Angular application wants get delegated
  scope: 'openid profile email offline_access read:roles',

  // Using Authorization Code Flow
  // (PKCE is activated by default for authorization code flow)
  responseType: 'code',

  // Your Auth0 account's logout url
  // Derive it from your application's domain
  logoutUrl: 'https://id.company-name.com/logout',

  customQueryParams: {
    // API identifier configured in Auth0
    audience: 'https://dev-51246k0z.us.auth0.com/api/v2/',
  },

  silentRefreshTimeout: 5000, // For faster testing
  timeoutFactor: 0.25, // For faster testing
  sessionChecksEnabled: true,
  showDebugInformation: true, // Also requires enabling "Verbose" level in devtools
  clearHashAfterLogin: false, // https://github.com/manfredsteyer/angular-oauth2-oidc/issues/457#issuecomment-431807040,
  nonceStateSeparator : 'semicolon' // Real semicolon gets mangled by IdentityServer's URI encoding
};

我遇到的自定义范围问题

我遇到的问题是我为角色指定的自定义范围不是通过使用 Auth0 Github 社交连接来实现的。我的范围字段如下所示：

// Scopes ("rights") the Angular application wants get delegated
scope: 'openid profile email offline_access read:roles',

，但 access_token 永远不会包含超出 openid profile email offline_access 的范围。 IE。不会为应用程序提供 read:roles 的 scope/permissions，导致 Auth0 角色 API 失败。

我的 Github 社交登录正常。该应用程序将我重定向到 Github，要求我登录，然后指定 Github 应用程序需要的范围。
如果这个问题不够清楚，欢迎评论，我们会整理问题。

Answer 1

只是回答我自己的问题。这是一个与前端无关的错误。 Auth0 有意只允许前端有有限的范围：https://auth0.com/docs/tokens/management-api-access-tokens/get-management-api-tokens-for-single-page-applications

^ 如果使用 Auth0，获得这些范围的唯一方法是包装你自己的 API，并在幕后使用秘密客户端 ID。这不是前端相关的问题。然后根据授予后端的权限 API，您也许可以通过后端获取自定义范围。

自定义范围：将 angular-oauth2-oidc 与 Auth0 和 Github 结合使用

Custom Scopes: Using angular-oauth2-oidc with Auth0 and Github

angular

github

scope

auth0

angular-oauth2-oidc

使用最新功能

我遇到的自定义范围问题