javascript - 使用 ArcGIS JavaScript API 设置基于应用程序的登录
问题描述
我正在尝试将 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>
)
}
}
解决方案
请按照以下说明操作:https ://developers.arcgis.com/javascript/latest/guide/access-services-with-oauth-2/
但是快速总结一下:
- 转到https://developers.arcgis.com
- 使用您的 ArcGIS Online 帐户信息登录
- 转到“应用程序”并创建一个“新应用程序”:https ://developers.arcgis.com/applications
- 请务必将重定向 URI 更新到您的应用程序所在的位置,然后记下“客户端 ID”
- 在您的应用中,使用
esri/identity/OAuthInfo
将上一步中的 appId 放入您的代码中。
推荐阅读
- r - 如何始终在 geom_bar 中有固定数量的带有缺失值的 bin
- java - 如何使用改造处理布尔中的json对象
- vue.js - 如何从导入的文件中运行另一个 vue.file 中的函数
- c# - 为什么我的内部对象属性名称不是驼峰式的?
- azure-active-directory - 使用单点登录访问 Azure AD 上的多个租户
- sql - 如何在不出现 ORA-01460:未实现或不合理的转换错误的情况下将大字符串设置为参数?
- python - 如何将仿射变换应用于 3d numpy 数组?
- javascript - 试图将篡改脚本限制为页面部分
- c++ - 尝试将函数从类传递给可变参数模板函数
- angular - 当我单击锚按钮时,当 routerLink 不起作用时,我正在使用 Angular 7 它不起作用