Azure React CIAM示例登录报错：redirect_uri参数无效请求排查

问题背景 #

按照官方CIAM React调用API的示例步骤操作，使用租户ID 11111111-1111-1111-1111-111111111111完成所有配置后，启动应用并使用Gmail账户（AD域%MY_GMAIL_NAME%gmail.onmicrosoft.com）登录，输入邮箱点击继续后出现错误：

无法完成您的请求

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....', // 必填配置字段
        authority: 'https://%MY_GMAIL_NAME%gmail.ciamlogin.com/', 
        redirectUri: '/', // 需在Azure门户注册，默认值为window.location.origin
        postLogoutRedirectUri: '/', // 登出后跳转页面地址
    },
   ...
};

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

应用注册重定向URI配置 #

在ciam-msal-react-spa应用注册的「Authentication」标签页，已添加「Single-page application」平台，并配置两个重定向URI：

• http://localhost:3000
• http://localhost:3000/redirect

排查过程更新 #

UPDATE 1 #

尝试用https://login.microsoftonline.com/替换https://%MY_GMAIL_NAME%gmail.ciamlogin.com/作为authority URL，点击首页SignIn按钮直接报错，无法进入邮箱输入界面：

@azure/msal-browser@2.38.3 : 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
    ..

UPDATE 2 #

完整配置步骤如下：

API端配置

1. 注册应用ciam-msal-dotnet-api（ID：...WEB_API_APP_REGISTRATION_GUID....）
2. 在「Expose API」中添加Scope：ToDoList.Read、ToDoList.ReadWrite
3. 编辑Manifest文件，设置"accessTokenAcceptedVersion": 2
4. 在「App Roles」中添加应用角色：ToDoList.Read.All、ToDoList.ReadWrite.All（Allowed member types设置为applications）
5. 在「Token configuration」中添加可选声明idtyp

appsettings.json填充内容同上述Web API配置。

UI端配置

1. 注册应用ciam-msal-react-spa（ID：...WEB_APP_APP_REGISTRATION_GUID....）
2. 在「Authentication」中添加「Single-page application」平台，设置重定向URL：http://localhost:3000、http://localhost:3000/redirect
3. 在「API permissions」中：
   • 添加Microsoft Graph委托权限：openid、offline_access
   • 添加自定义API的委托权限：ToDoList.Read、ToDoList.ReadWrite
   • 为默认目录授予管理员同意

authConfig.js填充内容同上述Web应用配置。

UPDATE 3 #

改用https://login.microsoftonline.com/<tenant>作为authority链接后，问题暂时解决，但疑惑示例为何推荐使用带ciamlogin后缀的地址。

UPDATE 4 #

查阅MSAL文档得知，CIAM authority目前支持两种格式：

CIAM authority格式仍在标准化过程中，目前支持以下格式：

• https://tenantName.ciamlogin.com/tenant
• https://tenantName.ciamlogin.com

其中tenant可以是：

• tenantName.microsoft.com
• GUID（tenantId）
• 租户的已验证域名

尝试使用https://tenantName.ciamlogin.com/<tenant>（将替换为租户GUID），仍出现相同的redirect_uri无效错误。

内容的提问来源于stack exchange，提问作者dododo