Hello,
I am rather new to developing with the JS API and have been working off of an HTML file stored on our portal server's inetpub folder (IIS)
Have been having some issues with authentication. Specifically with Azure AD. The button pops-up like it's suppposed to, but on-click, the pop-up window reports it can't find the URL (after I click to authenticate)
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.24/"></script>
<title></title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#srDiv{
height: 40px;
padding: 10px;
}
</style>
<script>
require([
"esri/WebMap",
"esri/views/MapView",
"esri/widgets/UtilityNetworkTrace",
"esri/config",
"esri/Map",
"esri/portal/Portal",
"esri/identity/OAuthInfo",
"esri/identity/IdentityManager"
], function (WebMap, MapView, UtilityNetworkTrace, esriConfig, Map, Portal, OAuthInfo, esriId) {
// Set the hostname to the on-premise portal
esriConfig.portalUrl = "myOrgPortalURL.net/portal";
const infoCode = new OAuthInfo({
// Swap this ID out with registered application ID
appId: "registeredappIDHere",
// Uncomment the next line and update if using your own portal
portalUrl: "portalurl",
// Uncomment the next line to prevent the user's signed in state from being shared with other apps on the same domain with the same authNamespace value.
// authNamespace: "portal_oauth_inline",
popup: false,
flowType: "auto",
//popupCallbackUrl: "https://FQDN.com/portal/ApplicationFolder/oauth-map-callback.html" // page should be relative to application. Make sure it's updated to handle two-step flow, see https://github.com/Esri/jsapi-resources/blob/master/oauth/oauth-callback.html for a sample of this.
});
esriId.registerOAuthInfos([infoCode]);
esriId.getCredential(infoCode.portalUrl + "/sharing/rest");
esriId.checkSignInStatus(infoCode.portalUrl + '/sharing/rest').then(function (evt) {
// try to match an access token in window.location.hash
const match = (window.location.hash) ? window.location.hash.match(infoCode) : false;
// if we found an access token in the URL pass the token up to a global function in
if(match[1]) {
const parentWindow = (window.opener && window.opener.parent) ? window.opener.parent : window
parentWindow.oauthCallback(match[1]);
}
window.close();
portal.load().then(
function () {
console.log(portal.user.username + ' is now connected to the portal')
// call my afterSuccessfulLogin function
},
function (error) {
console.log("couldn't successfully load the portal")
}
)
})
const map = new Map({
basemap: "arcgis-topographic" // Basemap layer service
});
const webmap = new WebMap({
portalItem: { // autocasts as new PortalItem()
id: "webmapidhere" // webmap id
}
});
console.log("here")
const view = new MapView({
container: "viewDiv",
map: webmap,
center: [-100, 35],
zoom: 10,
constraints: {
snapToZoom: false
}
});
})</script>
</head>
<body>
<div id = "viewDiv"></div>
<!-- <div id="webmap"></div> -->
<div id="srDiv"></div>
</body>
</html>
As you can see, i've experimented with the flowtype by changing it between implicit, auto, and "authorization-code".
The redirectURIs for the registered application are both the webadaptor version and FQDN version of the application location. Is there something I'm missing? The goal here is just to create a simple web app accessing secure services to test Utility Network trace functionality (ArcGIS Enterprise).
This seems a lot more complicated than it should be. I know that our Azure servers use the msappproxy, I don't know if that's the problem or not. Any thoughts?
Thanks!
