1. Created an application in the enterprise portal, added redirect URLs
2. Used the ClientID in the code (see below)
3. Added the enterprise portal URL (line 66)
It loads the authentication page s in images below: once authenticated it goes to another login page asking sign in to ArcGIS Online
Any help will be appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>User authentication starter app (ArcGIS REST JS)</title>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: #f3f3f3;
z-index: 3;
}
.auth-buttons {
position: absolute;
top: 5px;
left: 5px;
width: 250px;
height: auto;
z-index: 5;
}
.hide {
display: none
}
</style>
<!-- ArcGIS REST JS used for user authentication. -->
<!-- Calcite components used for authentication buttons. -->
</head>
<body>
<calcite-panel class="auth-buttons">
<calcite-button id="login-button">Sign in with ArcGIS</calcite-button>
<calcite-button id="logout-button" class="hide" appearance="outline-fill">Sign out</calcite-button>
</calcite-panel>
<script>
require([
'esri/portal/Portal',
'esri/identity/OAuthInfo',
'esri/identity/IdentityManager',
], (Portal, OAuthInfo, IdentityManager) => {
// UI elements
const loginButton = document.querySelector('#login-button');
const logoutButton = document.querySelector('#logout-button');
const greeting = document.querySelector('h1');
const info = new OAuthInfo({
appId: 'GUUymtJk8H5MhWHw',
popup: false,
});
IdentityManager.registerOAuthInfos([info]);
loginButton.addEventListener('click', () =>
IdentityManager.getCredential(info.portalUrl + '/sharing')
);
logoutButton.addEventListener('click', () => {
IdentityManager.destroyCredentials();
window.location.reload();
});
const handleLoginSuccess = () => {
const portal = new Portal();
portal.authMode = 'immediate';
portal.load().then(() => {
debugger;
console.log(portal);
// When the user is successfully logged in...
// ... hide the login button
loginButton.style = 'display: none';
// ... show the logout button
logoutButton.style = 'display: inline-block';
// ... greet the user by the user's name
greeting.textContent = `Welcome back, ${portal.user.fullName}!`;
});
};
IdentityManager.checkSignInStatus(info.portalUrl + '/sharing')
.then(handleLoginSuccess)
.catch(() => console.log('Not logged in'));
});
</script>
</body>
</html>
