OAuth 2.0 Invalid Redirect URI

2197
1
Jump to solution
10-13-2022 11:37 AM
DaltonR121
New Contributor II

I'm currently experiencing a problem implementing OAuth 2.0.  The application is written in HTML, CSS, and plain JavaScript but here's where it may get interesting... The code is then placed within a single Media Content Web Part within Sharepoint.  I don't believe a lot of the Sharepoint integration materials are relevant to my particular set up since ArcGIS isn't within its own webpart - it's just coded within the JavaScript and placed on the page within a viewDiv.

I have referenced this specific documentation page probably 100 times and believe I have followed all of the steps exactly.  I have also gone within my Developer Dashboard, registered the application, and tucked my site's URL within the "Redirect URLs" trying multiple ways including with trailing slashes and without. 

RedirectURIs.png

DaltonR121_0-1665685611330.png

I have confirmed the redirect_uri value in the Network tab and it does match one of my Redirect URIs within the application.

NetworkTab.png

I've tried to isolate mainly the auth portion itself away from the rest of the code for testing purposes and this is what I have:

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
    <link rel="stylesheet" href="../siteassets/css/style.css" />
    <script src="https://js.arcgis.com/4.24/"></script>
  </head>

  <body>
    <button id="signInBtn" type="button">Sign In</button>
    <div id="viewDiv"></div>

    <script type="text/javascript" src="../siteassets/js/script.js"></script>
  </body>
</html>

 

And the Javascript&colon;

require(["esri/portal/Portal", "esri/identity/OAuthInfo", "esri/identity/IdentityManager"], (Portal, OAuthInfo, esriId) => {
  let info = new OAuthInfo({
    appId: (App Client Id Here),
    flowType: "auto",
    popup: false,
  });

  esriId.registerOAuthInfos([info]);

  esriId
    .checkSignInStatus(info.portalUrl + "/sharing")
    .then(handleLoginSuccess)
    .catch(() => {
      console.log("Not logged in");
    });

  document.getElementById("signInBtn").addEventListener("click", () => {
    esriId.getCredential(info.portalUrl + "/sharing");
  });

  function handleLoginSuccess() {
    const portal = new Portal();
    portal.authMode = "immediate";
    portal.load().then(() => {
      console.log(portal);
    });

    loadMap();
  }
});

function loadMap() {
 // Code for map here
}

 

Thank you in advance for any help offered!  I have spent hours and hours trying to solve this to no avail.  I'm out of directions to attempt to even start in.

0 Kudos
1 Solution

Accepted Solutions
DaltonR121
New Contributor II

Well as embarrassing as this is... I discovered the Client Id was incorrect.  Leaving up as a reminder to check Client Id if you run into this error.

View solution in original post

0 Kudos
1 Reply
DaltonR121
New Contributor II

Well as embarrassing as this is... I discovered the Client Id was incorrect.  Leaving up as a reminder to check Client Id if you run into this error.

0 Kudos