can't reach this page.Check if there is a typo in ngblhofnpockbiaghoejgicnmbkejkcg.chromiumapp.org.

[jinsonbits]

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.30.0

Wrapper Library

Not Applicable

Wrapper Library Version

None

Public or Confidential Client?

Public

Description

Problem: The redirect URL is giving the error message "can't reach this page. Check if there is a typo in ngblhofnpockbiaghoejgicnmbkejkcg.chromiumapp.org."

It all looks good initially.

Until it gives this message.

I do have the below redirect URI given in the AAD registration. https://ngblhofnpockbiaghoejgicnmbkejkcg.chromiumapp.org/

Help Needed: Am I doing something incorrectly? Any help to resolve this issue OR a code example where this is successfully implemented in "manifest version 3" is appreciated.

Scenario: I am trying to develop a browser extension in manifest version 3. Need to make an API call within this extension. This API call needs a bearer token using AAD for authentication. That's how I reached trying MSAL.js. Below is how I am using it inside popup.js file of my extension.

popup.js

const clientId = ""; const authority = "https://login.microsoftonline.com/microsoft.onmicrosoft.com"; const scope = ["user.read"];

const redirectUri = chrome.identity.getRedirectURL(); console.log('getRedirectURL=',redirectUri);

const pca = new msal.PublicClientApplication({ auth: { clientId: clientId, authority: authority, redirectUri: redirectUri } });

async function getToken() { try { const accounts = pca.getAllAccounts(); const silentRequest = { scopes: scope, account: accounts[0] }; const result = await pca.acquireTokenSilent(silentRequest); console.log('accessToken=', result.accessToken) return result.accessToken; } catch (error) { console.log(error); return null; } }

const escalateNowBtn=document.getElementById("escalateNow-btn") escalateNowBtn.addEventListener("click",async ()=>{ console.log('Hello from escalate button'); const redirectUri = typeof chrome !== "undefined" && chrome.identity ? chrome.identity.getRedirectURL() : ${window.location.origin}/popup.html; console.log('redirectUri=',redirectUri); try { // Login the user and get an access token const loginRequest = { scopes: scope }; await pca.loginPopup(loginRequest);

  // Get the access token
  const accessToken = await getToken();
  console.log(accessToken);
} catch (error){
  console.log(error);
}

})

MSAL Configuration

popup.js
--------------------
const clientId = "<ClientID>";
const authority = "https://login.microsoftonline.com/microsoft.onmicrosoft.com";
const scope = ["user.read"];

const redirectUri = chrome.identity.getRedirectURL();
console.log('getRedirectURL=',redirectUri);

const pca = new msal.PublicClientApplication({
  auth: {
    clientId: clientId,
    authority: authority,
    redirectUri: redirectUri
  }
});

async function getToken() {
  try {
    const accounts = pca.getAllAccounts();
    const silentRequest = {
      scopes: scope,
      account: accounts[0]
    };
    const result = await pca.acquireTokenSilent(silentRequest);
    console.log('accessToken=', result.accessToken)
    return result.accessToken;
  } catch (error) {
    console.log(error);
    return null;
  }
}

const escalateNowBtn=document.getElementById("escalateNow-btn")
escalateNowBtn.addEventListener("click",async ()=>{
    console.log('Hello from escalate button');
    const redirectUri = typeof chrome !== "undefined" && chrome.identity ?
    chrome.identity.getRedirectURL() : 
    `${window.location.origin}/popup.html`;
    console.log('redirectUri=',redirectUri);
    try {
      // Login the user and get an access token
      const loginRequest = {
        scopes: scope
      };
      await pca.loginPopup(loginRequest);

      // Get the access token
      const accessToken = await getToken();
      console.log(accessToken);
    } catch (error){
      console.log(error);
    }
})

Relevant Code Snippets

Manifest.json
--------------------
{
    "manifest_version": 3,
    "name": "Extension_22ndMarch",
    "description": "Extension_22ndMarch",
    "version": "1.0",
    "icons": {
      "16": "icon.png",
      "48": "icon.png",
      "128": "icon.png"
    },
    "action": {
      "default_icon": {
        "16": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
      },
      "default_title": "Extension_22ndMarch",
      "default_popup": "popup.html"
    },

    "permissions":["storage","search","tabs","contextMenus","activeTab", "scripting","identity"],
    "oauth2": {
      "client_id": "<clientID>",
      "scopes": ["user.read"],
      "redirect_uri": "https://ngblhofnpockbiaghoejgicnmbkejkcg.chromiumapp.org"
    },
    "background":{
      "service_worker":"background.js"
    },
    "content_scripts":[
      {
        "matches":["https://onesupport.crm.dynamics.com/*"],
        "exclude_matches":["https://www.google.com/*"],
        "js":["contentScript.js"]
      }
    ],
    "web_accessible_resources": [
      {
        "resources": [
          "popup.html"

        ],
        "matches": [
          "<all_urls>"
        ]
      }
    ]
  }

popup.html
--------------------------
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./msal-browser-2_30_0.js"></script>
    <link rel="stylesheet" href="popup.css" />
    <title>Extension_22ndMarch</title>
  </head>
  <body>
      <div class="header">
      <img src="icon.png" />
    </div>
    <h1 id="popup-title">Extension_22ndMarch!</h1>
    <div id="btn-container">
        <button id="escalateNow-btn">TriggerAPICall</button>
    </div>
    <h2 id="time"></h2>
    <h2 id="name"></h2>      
  </body>
  <script src="popup.js"></script>
</html>

Identity Provider

Azure AD / MSA

Source

Internal (Microsoft)

[jinsonbits]

Hi AzureAD/microsoft-authentication-library-for-js,

No way. The extension is properly installed. Other functionalities are working fine. See a screenshot below. I have tried this in edge and chrome. [image: image.png] Still if you want to verify, feel free to use the poup.html, manifest.json, popup.js files which I have included in this issue.

I think I am doing something wrong in the way of obtaining the authentication from AAD. But not sure what. Any help to resolve or a a code example where this is successfully implemented in "manifest version 3" is appreciated.

Thank you Jinson.

On Mon, Mar 27, 2023 at 5:12 PM Hector Morales @.***> wrote:

Hi @jinsonbits https://github.com/jinsonbits , based on your description it seems like MSAL and AAD are correctly handling the redirect. The issue is the browser can't find the page that your redirect URI points to, which is unrelated to MSAL/AAD. Could it be that the extension isn't properly installed or running on your browser?

— Reply to this email directly, view it on GitHub https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/5820#issuecomment-1485423885, or unsubscribe https://github.com/notifications/unsubscribe-auth/AS7WLSFUO5XOOSMGXQG6ELTW6G35ZANCNFSM6AAAAAAWGZ5KRE . You are receiving this because you were mentioned.Message ID: <AzureAD/microsoft-authentication-library-for-js/issues/5820/1485423885@ github.com>

-- The information contained in this electronic communication is intended solely for the individual(s) or entity to which it is addressed. It may contain proprietary, confidential and/or legally privileged information. Any review, retransmission, dissemination, printing, copying or other use of, or taking any action in reliance on the contents of this information by person(s) or entities other than the intended recipient is strictly prohibited and may be unlawful. If you have received this communication in error, please notify us by responding to this email or telephone and immediately and permanently delete all copies of this message and any attachments from your system(s). The contents of this message do not necessarily represent the views or policies of BITS Pilani.

[hectormmg]

@jinsonbits it has come to my attention that we don't support manifest v3 yet. @EmLauber could you take a look at this as a feature request?

[jinsonbits]

@jinsonbits it has come to my attention that we don't support manifest v3 yet. @EmLauber could you take a look at this as a feature request?

Seriously ? That is news to me. Please confirm. Based on that I will see if I need to go back to version 2. Meanwhile, please do share if you have a code example where this is accomplished in version 2.

[EmLauber]

Yes, manifest v3 is on our backlog but I don't have a timeline yet. A related issue for tracking is #3923. We are monitoring the deprecation of manifest v2 as Chrome reviews their timelines.

[jinsonbits]

Thanks for the confirmation @EmLauber . Note that I am facing the same problem in the Chrome browser as well. So, I don't think this issue is due to version 3.

[jinsonbits]

Also on manifest version v2, I am facing another problem.

Clicking on the button doesn't do anything apart from closing the window.

[hectormmg]

@jinsonbits have you tried a different account? There may be some permission restrictions you're unaware of on your @ microsoft account.

I'll add that the screenshots and places where your demo is getting errors are actually outside MSAL control and happen between redirects, so I don't believe this is an issue related to MSAL. MSAL will create the initial auth request, but what happens after the initial redirect and before you redirect back to the original app calling MSAL is all on the authorization service side.

[jinsonbits]

Hi @hectormmg -- Yes, you are right. I am able to get the token successfully in a personal domain. of course with V2 only. Unfortunately, I have to generate the token with the "microsoft.onmicrosoft.com" domain as the APIs which I am trying to leverage inside the browser extension are authenticated within this domain. Do you have some POC for browser extension support?

[hectormmg]

@jinsonbits here's our only ChromiumExtensionSample as a POC. Unfortunately, this doesn't deal with restricted permissions for corporate accounts since that I believe is managed by whoever manages the tenant.

[ghost]

@jinsonbits This issue has been automatically marked as stale because it is marked as requiring author feedback but has not had any activity for 5 days. If your issue has been resolved please let us know by closing the issue. If your issue has not been resolved please leave a comment to keep this open. It will be closed automatically in 7 days if it remains stale.