I am trying to include user authentication into a webpage. I want to use `BeginOAuth2` method from the rest-js library.
I have found some examples with the property `popup` set to `true`, for example, https://github.com/Esri/arcgis-rest-js/tree/master/demos/oauth2-browser
I do not want to redirect the user to any other site, just open the authentication in the same window and then go back to the original page (storing the obtained token in the local storage). However, I can't figure out how to deal with the `redirect uri` in those settings. Do you have any exemplary code snippets which deal with the `popup` set to false? Also, do I also need to use the `CompleteOAuth2` method to get the token?
Solved! Go to Solution.
Hi, yes you can do that. Simply move the arcgisRest.UserSession.completeOAuth2() call into the main page. The key is to detect if you're in the state where the access_token has been passed by the URL. One way to do it would be something like this:
// Define a global session variable.
let session = null;
// ADDED: ---------------------------------
const clientIdFromURL = new URLSearchParams(window.location.search).get('clientID');
const parsedHash = new URLSearchParams(
window.location.hash.substr(1) // skip the first char (#)
);
var accessTokenFromURL = parsedHash.get('access_token');
// only call completeOAuth2 if we have the clientID and access token:
if(clientIdFromURL && accessTokenFromURL) {
session = arcgisRest.UserSession.completeOAuth2({
clientId: clientIdFromURL,
});
localStorage.setItem('__ARCGIS_REST_USER_SESSION__', session.serialize());
}
// END ADDED SECTION: ---------------------------------
// Check to see if there is a serialized session in local storage.
const serializedSession = localStorage.getItem('__ARCGIS_REST_USER_SESSION__');
If you do this, the thing to think about would be: since you're not doing the "redirect via authenticate.html" thing, the access_token is right in the URL bar:
which is not ideal, security-wise. So I would recommend using some JavaScript to remove that.
Hi, @GavinRehkemper and thank you for your reply. Yes, I have set the "popup" property to false based on the examples you linked. I am not sure if I was clear enough with my explanation so let me ask again. How can I use the OAuth2 without using the authenticate file? Can I implement the authentication in a single script? How do I deal with the `completeOAuth2` method then?
Hi, yes you can do that. Simply move the arcgisRest.UserSession.completeOAuth2() call into the main page. The key is to detect if you're in the state where the access_token has been passed by the URL. One way to do it would be something like this:
// Define a global session variable.
let session = null;
// ADDED: ---------------------------------
const clientIdFromURL = new URLSearchParams(window.location.search).get('clientID');
const parsedHash = new URLSearchParams(
window.location.hash.substr(1) // skip the first char (#)
);
var accessTokenFromURL = parsedHash.get('access_token');
// only call completeOAuth2 if we have the clientID and access token:
if(clientIdFromURL && accessTokenFromURL) {
session = arcgisRest.UserSession.completeOAuth2({
clientId: clientIdFromURL,
});
localStorage.setItem('__ARCGIS_REST_USER_SESSION__', session.serialize());
}
// END ADDED SECTION: ---------------------------------
// Check to see if there is a serialized session in local storage.
const serializedSession = localStorage.getItem('__ARCGIS_REST_USER_SESSION__');
If you do this, the thing to think about would be: since you're not doing the "redirect via authenticate.html" thing, the access_token is right in the URL bar:
which is not ideal, security-wise. So I would recommend using some JavaScript to remove that.