Problem with using OAuth2.0 app credential authentication
Hello,
I'm new to the ArcGIS API for Javascript. I'm currently working on a project that requires me to use a rest endpoint on our enterprise portal. This will be public facing, so there is no need to have people accessing this page to ask for login information. The user should be able to click the link to the webpage and it should open up.
I've read up on the documentation here:
https://developers.arcgis.com/documentation/mapping-apis-and-services/security/app-credential-authen...
Going with OAuth2.0 with app credential authentication. I've created my clientid and client secret. I've created my small project. Here's the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<title>Public Map with App Credentials Authentication</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.28/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.28/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/identity/OAuthInfo",
"esri/identity/IdentityManager",
"esri/arcgis-rest-auth/ApplicationSession",
], (Map, MapView, FeatureLayer, OAuthInfo, IdentityManager, ApplicationSession) => {
const session = new ApplicationSession({
clientId: 'my_client_id',
clientSecret: 'my_client_secret',
grant_type:'client_credentials',
duration: 60
});
session.getToken("https://www.arcgis.com/sharing/rest/oauth2/token")
.then(function(response) {
console.log('this is the response ', response);
}).catch(function(error) {
// request failed, handle errors
console.log('error ', error);
});
// App Credentials configuration
const oauthInfo = new OAuthInfo({
appId: "my_client_id",
popup: false, // No popup for user login
portalUrl: "my_enterprise_portal",
});
IdentityManager.registerOAuthInfos([oauthInfo]);
// Initialize the map and view
const map = new Map({
basemap: "topo-vector",
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 12,
center: [-122.64, 47.577],
});
// Load the feature layer after signing in with App Credentials
IdentityManager.checkSignInStatus(oauthInfo.portalUrl).then(() => {
// Create a feature layer from the REST endpoint
const featureLayer = new FeatureLayer({
url: "my_rest_endpoint",
});
map.layers.add(featureLayer); // Add the feature layer to the map
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Because of security, I've chosen to withhold my clientid, client secret, enterprise portal url, and rest endpoint.
When I run this code and check the console via developer tools, I'm getting these errors.
Failed to load resource: the server responded with a status of 404 ()
(index):31. ApplicationSession.js:1 Failed to load resource: the server
Error: scriptError: https://js.arcgis.com/4.28/esri/arcgis-rest-auth/ApplicationSession.js
at h ((index):6)
at HTMLScriptElement.<anonymous> ((index):30)
(anonymous) @ (index):31
This leads me to believe there is a problem with ApplicationSession.js? I've double checked my node directory and see it exists. It is in this directory (which is in a subdirectory of my main project):
Can anyone point me in the right direction? I've been lost on this for the past few days and am not sure how to move forward from here.
