我尝试了以下示例来实现AzureMap的Azure Active Directory令牌。
//Html
<html>
<body>
<input type="button" onclick="LoadMapControl(this)" value="Load Map" />
<div id="map"></div>
</body>
</html>
// Javascript
var map;
function LoadMapControl(elm) {
//Only load the map if is hasn't been loaded.
if (!LazyMapLoader.IsLoaded()) {
LazyMapLoader.LoadMapControl(GetMap);
} else if (map == null) {
GetMap();
}
//Hide the button
elm.style.display = 'none';
}
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('map', {
view: 'Auto',
//Add your Azure Maps subscription client ID to the map SDK.
authOptions: {
authType: "anonymous",
clientId: "04ec075f-3827-4aed-9975-d56301a2d663", //Your Azure Maps account Client ID is required to access your Azure Maps account.
getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Azure Active Directory Token.
var tokenServiceUrl = "https://azuremapscodesamples.azurewebsites.net/Common/TokenService.ashx";
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
}
}
});
}
//A reusable class that makes it easy to lazy load the Azure Maps Atlas map SDK.
var LazyMapLoader = new function () {
var _callback = null, _isLoading = false;
function isLoaded() {
//Verify that the atlas namespace is loaded and that the Map class is recognized.
return typeof (atlas) != 'undefined'
&& typeof (atlas.Map) != 'undefined';
}
this.LoadMapControl = function (callback) {
var loaded = isLoaded();
if (!_isLoading && !loaded) {
_callback = callback;
_isLoading = true;
//Load the Atlas CSS Styles.
var styles = document.createElement('link');
styles.setAttribute('type', 'text/css');
styles.setAttribute('rel', 'stylesheet');
styles.setAttribute('href', 'https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css');
document.body.appendChild(styles);
//Load the Atlas JavaScript SDK.
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js');
document.body.appendChild(script);
setTimeout('LazyMapLoader.__LoadCallback();', 100);
} else if (loaded) {
_callback();
}
};
this.IsLoaded = function () {
return isLoaded();
};
this.__LoadCallback = function () {
if (isLoaded()) {
_callback();
_isLoading = false;
} else {
setTimeout('LazyMapLoader.__LoadCallback();', 100);
}
};
};
// Css
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
我知道我们需要加入我们的身份验证服务,而不是“https://azuremapscodesamples.azurewebsites.net/Common/TokenService.ashx“。有人知道如何在Azure门户中执行此操作吗?
TokenServiceUrl
因为它未经授权,我得到了以下错误。
Error
如果有人能解释一下如何为Azure Map实现Azure Active Directory令牌,我将不胜感激。
1条答案
按热度按时间idfiyjo81#
您可以创建一个简单的Azure函数,或者如果使用Azure Web应用程序,则在其中添加一个简单的服务以获取令牌。
以下是我在HTTP触发器Azure函数中使用的代码,用于我的一个应用程序获取令牌(用C#编写):
然后我用来调用此服务的URL如下所示:
为了使该功能能够访问你的AzureMap帐户,你需要向AzureMap帐户“添加角色分配”。具体操作如下:
1.进入Azure门户,转到您的AzureMap帐户资源。
1.选择“访问控制(IAM)"。
1.单击“角色分配”。
1.单击“添加”,然后单击“添加角色分配”。
这可能需要5分钟的时间在系统中传播,所以如果它不能马上工作,不要紧张。
最后,请确保使用AzureMap帐户中的值更新JavaScript代码中的
clientId
(您可以在门户中AzureMap帐户资源的“身份验证”部分下找到该值)。