无法在使用 Azure B2C 访问受保护的 .NET Core API 的 React 应用程序中获取访问令牌

Question

我在从我的 React 应用程序获取访问令牌时遇到问题，试图访问我自己的 .NET Core 3.1 Web API。我可以正常登录并且可以访问用户数据，但是当我尝试获取访问令牌时，我不断收到以下错误。将不胜感激任何帮助或推动正确的方向。谢谢！

未捕获（承诺中） BrowserAuthError：silent_sso_error：无法完成静默 SSO - 提供的信息不足。请提供 loginHint 或 sid。

这是我所拥有的：

1. 设置 React 应用注册（SPA w/redirect to localhost:3000 using auth code flow）
2. 设置 .NET Core Web api 应用注册（Web w/重定向到 localhost:44347）
3. 为 Web api 创建了两个作用域（读取和写入）
4. 将 spa 的 api 权限授予 web api 范围

.NET Core 3.1 Web API 设置（参考：https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-protected-web-api-app-configuration）：

1. 启动配置服务

services.AddMicrosoftIdentityWebApiAuthentication(Configuration, "AzureAdB2C");

1. appsettings.json

    "AzureAdB2C": {
       "Instance": "https://{example}.b2clogin.com",
       "ClientId": "{web api Client ID}",
       "TenantId": "xxxxxxxxxxxx",
       "Audience": "https://{example}.onmicrosoft.com/api"
    }

使用“@azure/msal-browser”设置反应：“^2.7.0”和“@azure/msal-react”：“^1.0.0-alpha.0”（参考：https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-react）：

1. index.tsx

const configuration: Configuration = {
  auth: {
      clientId: '{SPA Client ID}',
      authority: 'https://{example}.b2clogin.com/{example}.onmicrosoft.com/B2C_1_SignUpIn',
      knownAuthorities: ['{example}.b2clogin.com'],
  },
  cache: {
      cacheLocation: 'localStorage', // This configures where your cache will be stored
      storeAuthStateInCookie: false // Set this to "true" to save cache in cookies
  }
};

const pca = new PublicClientApplication(configuration);

<MsalProvider instance={pca}>
   <App />
</MsalProvider>

1. App.tsx

  useEffect(() => {
    if (error) {
        login(InteractionType.Popup);
    }
  }, [error, login]);

1. 访问令牌代码

const { instance, accounts, inProgress } = useMsal();

useEffect(() => {
        if (inProgress === 'none' && accounts.length > 0) {
            const request = {
                account: accounts[0],
                scopes: ["https://{example}.onmicrosoft.com/api/scope.read"]
            };
            // Retrieve an access token
            instance.acquireTokenSilent(request)
                .then(response => {
                    console.log('response', response);
                    if (response.accessToken) {
                        console.log('accessToken', response.accessToken);
                        return response.accessToken;
                    }
                    return null;
                })
                .catch(error => console.log('token error', error));
        }
    }, [inProgress, accounts, instance]);

Answer 1

对于遇到类似问题的任何人，解决方法是在初始登录时传入带有作用域的登录请求。就我而言，我使用 useMsalAuthentication() 挂钩登录。您可以在此处关注线程，https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2702。

export const loginRequest = {
    scopes: [ "openid", "https://{example}.onmicrosoft.com/api/scope.read" ]
}

const {login, error} = useMsalAuthentication(InteractionType.Redirect, loginRequest);

Answer 2

您提到的文档都是关于 Azure AD，而不是 Azure AD B2C。

我们使用 react-azure-adb2c 库将 ReactJS 与 Azure AD B2C 结合使用。你可以关注这个blog，它会向你展示步骤和示例代码。