ArcGIS JavaScript API：如何调用企业专属带SSO的门户登录界面

核心配置思路 #

要让JS API跳转到企业专属的带SSO按钮的登录页，关键是正确关联企业ArcGIS门户的OAuth应用配置，并禁用API默认的登录弹窗，手动触发企业门户的OAuth登录流程。

具体实现步骤 #

1. 在企业门户注册应用 #

首先必须在你的企业门户（https://company.maps.arcgis.com）中注册Web应用：

• 进入门户的「内容」→「新建项目」→「应用」→「Web应用」
• 填写应用信息，重点设置重定向URI（比如你的应用域名下的redirect.html），保存后获取生成的App ID

2. 配置OAuthInfo与IdentityManager #

在你的JS API代码中，正确初始化OAuth信息并注册到身份管理器，同时禁用默认登录弹窗：

require([
  "esri/identity/OAuthInfo",
  "esri/identity/IdentityManager"
], function(OAuthInfo, esriId) {
  // 创建OAuthInfo实例，指向企业门户
  const oauthInfo = new OAuthInfo({
    portalUrl: "https://company.maps.arcgis.com", // 企业门户地址
    appId: "YOUR_REGISTERED_APP_ID", // 门户中获取的App ID
    popupRedirectUri: "https://your-app-domain.com/redirect.html", // 与门户注册一致的重定向URI
    popup: true, // 使用弹窗式登录（也可设为false用页面跳转）
    preserveUrlHash: true // 可选，保留原页面的哈希参数
  });

  // 将OAuth信息注册到身份管理器
  esriId.registerOAuthInfos([oauthInfo]);

  // 禁用API默认的登录弹窗，避免冲突
  esriId.autoSignIn = false;

  // 监听登录需求事件，手动触发企业门户登录
  esriId.on("sign-in-required", function() {
    esriId.getCredential(oauthInfo.portalUrl, {
      oAuthPopupConfirmation: false // 跳过API的确认提示，直接跳转至企业登录页
    });
  });
});

3. 配置重定向页面（popup模式必填） #

如果使用弹窗式登录，需要在redirect.html页面中添加回调代码，用于完成登录后将凭证传回主应用：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>OAuth Redirect</title>
</head>
<body>
  <script src="https://js.arcgis.com/4.x/"></script>
  <script>
    // 处理OAuth登录回调，将凭证传递给主应用
    window.opener.esri.identity.handleOAuthCallback();
    window.close(); // 登录完成后关闭弹窗
  </script>
</body>
</html>

常见问题排查 #

• App ID无效：确认App ID是从企业门户（而非ArcGIS Online）注册获取的
• 重定向URI不匹配：检查代码中的popupRedirectUri与门户注册的地址完全一致（包括HTTP/HTTPS、域名、路径）
• 登录页仍为默认样式：确认portalUrl指向的是企业门户，而非默认的https://www.arcgis.com
• 跨域错误：确保你的应用域名已添加到企业门户的「允许的来源」列表中

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