Azure React 示例给出“invalid_request：输入参数‘redirect_uri’提供的值无效”

Question

我正在查看示例中提到的步骤这里。使用我自己的租户 (

11111111-1111-1111-1111-111111111111

)，我成功配置了所有内容，直到这一步：

Explore the sample

。 现在，当我启动应用程序并尝试使用我的 Gmail 帐户（AD 域

%MY_GMAIL_NAME%gmail.onmicrosoft.com

）登录时，我看到以下错误（在输入我的 Gmail 帐户并单击“继续”后）：

我们无法完成您的请求

invalid_request：为输入参数“redirect_uri”提供的值无效。预期值是与为此客户端应用程序注册的重定向 URI 匹配的 URI。

Web API配置（地址

https://localhost:44351

）：

"AzureAd": {
  "Instance": "https://%MY_GMAIL_NAME%gmail.ciamlogin.com/",
  "TenantId": "11111111-1111-1111-1111-111111111111",
  "ClientId": "...WEB_API_APP_REGISTRATION_GUID....",
  "Scopes": {
    "Read": [ "ToDoList.Read", "ToDoList.ReadWrite" ],
    "Write": [ "ToDoList.ReadWrite" ]
  },
  "AppPermissions": {
    "Read": [ "ToDoList.Read.All", "ToDoList.ReadWrite.All" ],
    "Write": [ "ToDoList.ReadWrite.All" ]
  }
},

Web 应用程序配置（地址

http://localhost:3000

）：

export const msalConfig = {
    auth: {
        clientId: '...WEB_APP_APP_REGISTRATION_GUID....', // This is the ONLY mandatory field that you need to supply.
        authority: 'https://%MY_GMAIL_NAME%gmail.ciamlogin.com/', 
        redirectUri: '/', // You must register this URI on Azure Portal/App Registration. Defaults to window.location.origin
        postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
    },
   ...
};

export const protectedResources = {
    toDoListAPI: {
        endpoint: 'https://localhost:44351/api/todolist',
        scopes: {
            read: ['api://...WEB_API_APP_REGISTRATION_GUID..../ToDoList.Read'],
            write: ['api://...WEB_API_APP_REGISTRATION_GUID..../ToDoList.ReadWrite'],
        },
    },
};

在“ciam-msal-react-spa”的应用程序注册中，根据最初提到的指南，在

Authentication

选项卡中，我使用这 2 个重定向 uri 指定了

Single-page application

平台：

1. http://localhost:3000
2. http://localhost:3000/redirect

我也指定了其余的步骤，所以不确定我在哪里做错了。

更新：我看到类似但不完全相同的问题here。解决方案是像这样使用

authority url

https://login.microsoftonline.com/

（而不是

https://%MY_GMAIL_NAME%gmail.ciamlogin.com/

）。当我这样做时，当我点击索引页面上的

SignIn

时，我立即开始看到错误（所以我什至没有看到可以输入电子邮件的窗口）。

@azure/[email protected] : Info - Emitting event: msal:loginFailure authConfig.js:40
ClientAuthError: endpoints_resolution_error: Error: could not resolve endpoints. Please check network and try again. Detail: ClientAuthError: openid_config_error: Could not retrieve endpoints. Check your authority and verify the .well-known/openid-configuration endpoint returns the required endpoints. Attempted to retrieve endpoints from: https://login.microsoftonline.com/v2.0/.well-known/openid-configuration
    AuthError AuthError.ts:49
    ClientAuthError ClientAuthError.ts:222
    ..

Answer 1

问题在于

https://login.microsoftonline.com/

不是有效的授权 URL。

以下是文档中关于权威 URL 的说明：

权限是一个 URL，指示 MSAL 可以访问的目录 请求令牌。

请参阅此处的文档，了解授权 URL 的有效值：https://learn.microsoft.com/en-us/entra/identity-platform/msal-client-application-configuration#authority。