使用ArcGIS JavaScript API设置基于应用程序的登录

Question

我正在尝试将ArcGIS地图实施到现有的JavaScript应用程序（Node.js / React）中，并在尝试从ArcGIS Online加载图层时开始在我的应用程序中看到ArcGIS登录弹出窗口。由于并非所有用户都拥有ArcGIS帐户，因此我想启用基于应用程序的登录。

从文档中看起来（这似乎是我带领我的圈子）看起来我需要使用我的客户端ID / secret设置我的Nodejs服务器，以便它可以访问令牌然后将它们发送到客户端，以便客户端可以转而可以访问ArcGIS Online中的资源。

服务器端部分似乎很容易 - 只需发出请求并获得有效的令牌。但是，一旦我的客户端应用程序从我的Nodejs服务器获取令牌，我不清楚该怎么做。由于我的客户端代码是使用React编写的，我使用@ esri / react-arcgis npm包来加载ArcGIS模块。我一直在使用IdentityManager模块，但没有成功。

如果有人知道如何设置基于应用程序的登录，我真的很感激。这是我的客户端React代码。

import React from 'react';
import {loadModules} from '@esri/react-arcgis';
const options = {url: 'https://js.arcgis.com/4.6/'};

const styles = {
  container: {
    height: '100%',
    width: '100%'
  },
  mapDiv: {
    padding: 0,
    margin: 0,
    height: '100%',
    width: '100%'
  },
}

export default class MapTab extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        status: 'loading'
      }

      loadModules(['esri/Map', 'esri/views/MapView', 'esri/layers/MapImageLayer'], options)
        .then(([Map, MapView, MapImageLayer]) => {

          // how do I implement app based login here once I have the access token?

          var layer3 = new MapImageLayer({
            url: "https://livefeeds.arcgis.com/arcgis/rest/services/LiveFeeds/NWS_Watches_Warnings_and_Advisories/MapServer"
          });

          const map = new Map({
            basemap: "hybrid",
            layers: [layer3]
          });

          const view = new MapView({
            container: "viewDiv",
            map,
            center: [this.props.latLng.lng, this.props.latLng.lat],
            zoom: 5,
          });

          view.when(() => {
            this.setState({
              map,
              view,
              status: 'loaded'
            });
          });
        })

    }
        renderMap() {
          if(this.state.status === 'loading') {
            return <h1>loading</h1>;
          }
        }

        render() {
          if(this.state.view){
            this.state.view.goTo([this.props.latLng.lng, this.props.latLng.lat])
          }

          return(
                <div id='parent' style={styles.container}>
                  <div id='viewDiv' style={ styles.mapDiv } >
                    {this.renderMap()}
                  </div>
                </div>
          )
        }
      }

Answer 1

请遵循以下说明：https://developers.arcgis.com/javascript/latest/guide/access-services-with-oauth-2/

但快速总结一下：

1. 去https://developers.arcgis.com
2. 使用ArcGIS Online帐户信息登录
3. 转到“应用程序”并创建一个“新应用程序”：https://developers.arcgis.com/applications
4. 请务必将重定向URI更新到应用程序所在的位置，然后记下“客户端ID”
5. 在您的应用中，使用esri/identity/OAuthInfo将您上一步的appId放入代码中。

Answer 2

我最终使用了这个解决方案代码在我的例子中的解决方案。

esriId.registerToken({
        server: 'https://www.arcgis.com/sharing',
        token: 'access token here'
      });

以前我一直在使用registerToken方法和特定的服务器，这些服务器只在我们在其下注册令牌时授予我访问这些特定服务器的权限。使用“https://www.arcgis.com/sharing”作为服务器值似乎可以让我访问我想要同时使用的所有公共/高级资源。

它适用于我的用例，虽然我在文档中找不到任何类似的例子。