Настройка входа в систему с помощью ArcGIS JavaScript API - PullRequest
Новая
       14

Настройка входа в систему с помощью ArcGIS JavaScript API

0 голосов
/ 06 апреля 2019

Я пытаюсь внедрить карту ArcGIS в существующее приложение JavaScript (Node.js / React) и начал видеть всплывающее окно входа в ArcGIS, появляющееся в моем приложении при попытке загрузить слои из ArcGIS Online.Поскольку не у всех моих пользователей будут учетные записи ArcGIS, я хочу включить вход в систему на основе приложений.

Из документации (которая, кажется, приводит меня в круги), похоже, мне нужно настроить свой сервер Nodejs с помощьюмой идентификатор клиента / секрет, чтобы он мог получать токены доступа и затем отправлять их клиенту, чтобы клиент в свою очередь имел доступ к ресурсам из ArcGIS Online.

Серверная часть этого кажется достаточно простой - просто сделайте запрос и получите верный токен.Но мне не ясно, что делать, когда мое клиентское приложение получает токен с моего сервера Nodejs.Поскольку мой код на стороне клиента написан с использованием React, я использую пакет @ esri / реагировать-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>
          )
        }
      }

Ответы [ 2 ]

0 голосов
/ 07 апреля 2019

Я в конечном итоге использовал это решение, где код комментария в моем примере.

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

Ранее я использовал метод registerToken с конкретными серверами, которые предоставляли мне доступ к этим конкретным серверам только тогда, когда под ними был зарегистрирован токен.Использование "https://www.arcgis.com/sharing" в качестве значения сервера, по-видимому, дает мне доступ ко всем общедоступным / платным ресурсам, которые я хотел использовать одновременно.

Это работает для моего варианта использования, хотя я не могунайти подобные примеры в документации.

0 голосов
/ 06 апреля 2019

Следуйте этим инструкциям: 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 перенаправления в том месте, где будет размещаться ваше приложение, а затем запишите «Идентификатор клиента»
  5. В своем приложении используйте esri/identity/OAuthInfo, чтобы вставить свой идентификатор приложения с предыдущего шага в код.
...