PKCE 的 OAuth 授权代码流不会触发 /token API 来获取令牌答案

【问题标题】：OAuth Authorization code flow with PKCE does not trigger /token API to get tokenPKCE 的 OAuth 授权代码流不会触发 /token API 来获取令牌
【发布时间】：2021-03-28 20:33:07
【问题描述】：

我有一个 Angular 11 应用程序，它想要与 Azure 集成（使用 MSAL）确实使用 PKCE 执行 OAuth 身份验证代码流。但是，我看到我的应用调用了/authorize（返回302）然后重定向到http://localhost:8087/home#code=THE_RETURN_CODE from above。然后该应用程序不再做任何事情，只是给我一个空白页。我看不到任何/token 被调用。相反，它留在http://localhost:8087/home#code=....

我的配置：

export function MSALInstanceFactory(): IPublicClientApplication {
      return new PublicClientApplication({
        auth: {
          clientId: CLIENT_ID,
          authority: 'https://login.microsoftonline.com/TENANT_ID',
          redirectUri: 'http://localhost:8087/home',
          postLogoutRedirectUri: 'http://localhost:8087/home',
          navigateToLoginRequestUrl: true
        },
        cache: {
          // cacheLocation: BrowserCacheLocation.LocalStorage,
            cacheLocation: "sessionStorage",
          storeAuthStateInCookie: isIE, // set to true for IE 11. Remove this line to use Angular Universal
        },
        system: {
          loggerOptions: {
            loggerCallback,
            logLevel: LogLevel.Info,
            piiLoggingEnabled: false
          }
        }
      });
    }

空白页：

【问题讨论】：

您能否提供更多细节？预期/期望的行为是什么？应该做的代码在哪里？如果可能的话，一个最小的 repo 来重现它会很棒。
嗨@RJM 我希望 /token API 将被自动调用，然后是 /authorize
这可以使用更多细节——我们看到 auth config 但没有任何类型的实现。应用首次检查身份验证状态的方式、时间和地点？

标签： angular azure oauth-2.0 msal

【解决方案1】：

在授权代码流 (RFC 6749 Section 4.1) 中，客户端应用程序必须进行 2 次 API 调用。第一个是通过网络浏览器发出的授权请求 (RFC 6749 Section 4.1.1)。第二个是令牌请求（RFC 6749 Section 4.1.3）。不会自动调用令牌端点（在您的情况下为 /token）。

在重定向端点（在您的情况下为http://localhost:8087/home）等待的程序必须从授权响应 (RFC 6749 Section 4.1.2) 并使用授权码发出令牌请求。

【讨论】：