Oauth typescript example but it does not work JS 4.11
582
0
06-02-2019 10:09 PM
by
follow the example for oauth, https://developers.arcgis.com/labs/javascript/access-services-with-oauth-2/ attempted to write it in typescript, the main.js seems ok or transpiled with no errors, but does not seem to work not sure why I have 404 errors for dojo_en_us.js and main.js even though files are there
main.ts
import Portal from "esri/portal/Portal";
import OAuthInfo from "esri/identity/OAuthInfo";
import IdentityManager from "esri/identity/IdentityManager";
import Map from "esri/Map";
import MapView from "esri/views/MapView";
import MapImageLayer from "esri/layers/MapImageLayer";
import DomStyle from "dojo/dom-style"
import DomAtrr from "dojo/dom-attr";
import On from "dojo/on";
import Dom from "dojo/dom";
// ArcGIS Online or your portal address
//const portalUrl = "https://www.arcgis.com/sharing";
const portalUrl = "https://<server>.maps.arcgis.com/";
// subsitute your own client id to identify who spawned the login and check for a matching redirect URI
const info = new OAuthInfo({
// appId: "JTpyML5GgvA1jEoo", //*** Your Client ID value goes here ***//
appId:"", // removed the appID
popup: false // inline redirects don't require any additional app configuration
});
IdentityManager.registerOAuthInfos([info]);
// send users to arcgis.com to login
On(Dom.byId("sign-in"), "click", function() {
IdentityManager.getCredential(portalUrl);
});
// log out and reload
On(Dom.byId("sign-out"), "click", function() {
IdentityManager.destroyCredentials();
window.location.reload();
});
IdentityManager.checkSignInStatus(portalUrl).then(function() {
DomStyle.set(Dom.byId('anonymousPanel'), "display",'none');
DomStyle.set(Dom.byId('personalizedPanel'), "display", 'block');
});
class DisplayMap {
displayMap() {
const portal = new Portal();
// Once the portal has loaded, the user is signed in
portal.load().then(function() {
DomStyle.set(Dom.byId('viewDiv'), "display", 'flex');
const map = new Map({
basemap: "topo"
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 14,
center: [-118.24,34.05]
});
const traffic = new MapImageLayer({
url: 'https://traffic.arcgis.com/arcgis/rest/services/World/Traffic/MapServer'
})
map.add(traffic);
});
}
}
IdentityManager.checkSignInStatus(portalUrl).then(function() {
DomStyle.set(Dom.byId('anonymousPanel'), "display", 'none');
DomStyle.set(Dom.byId('personalizedPanel'),"display", 'block');
//*** ADD ***//
let displaymap = new DisplayMap()
displaymap.displayMap();
});
index.html
<!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"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ArcGIS JS API Tutorials: Access traffic using OAuth2</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<style>
html,
body, #viewDiv{
font-family: Avenir Next W00;
font-size: 14px;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.action {
color: blue;
cursor: pointer;
text-decoration: underline;
}
</style>
<script>
var locationPath = location.pathname.replace(/\/[^\/]+$/, "");
window.dojoConfig = {
async: true,
baseUrl: '.',
isDebug: true,
packages: [
{
name: "app",
location: locationPath + "/app"
},
"custom",
'dijit',
'dojo',
'dojox'
],
selectorEngine: 'lite',
tlmSiblingOfDojo: false
};
</script>
<script src="https://js.arcgis.com/4.11"></script>
</head>
<body>
<div id="anonymousPanel" style="display: block; padding: 5px; text-align: center;">
<span id="sign-in" class="action">Sign In</span> to see live traffic.
</div>
<div id="personalizedPanel" style="display: none; padding: 5px; text-align: center;">
Welcome <span id="userId" style="font-weight: bold;"></span> -
<span id="sign-out" class="action">Sign Out</span>
</div>
<!-- for the map -->
<div id="viewDiv" style="display: none;"></div>
<script>require(["app/main"]);</script>
</body>
</html>
