Use the BeginOAuth2 without a popup

AgnieszkaRozniak

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?

GavinRehkemper

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.