MicrosoftAzureのVM上で実行したWebサーバでのMSALのエラーについて

前提・実現したいこと

MicrosoftAzureのVM上で実行したWebサーバへの認証で、MSALを使いAzureADに登録したメンバーをWebサーバへサインインさせたいです。

VMの環境はWindowsServer2019です。

Azure Portal上からアプリを登録し、クイックスタートで

シングルページアプリケーション---JavaScript（認証コードフロー）

と進みVM上でnpmで実行したところ、VM上からのアクセスは問題なくMSALを使いサインインできるのですが、
インターネットを介して接続した場合は、Webページそのものにはアクセスできるものの、
サインインボタンを押したところで、ポップアップが[about:blank]と表示されてエラーになってしまう状況です。
どのようにしたらインターネットを介して接続した場合でも、エラーなくサインインできるようになるでしょうか？
一週間ほど試行錯誤しているのですが、解決に至らず…
アドバイスいただけたらありがたいです。

発生している問題・エラーメッセージ

ポップアップが[about:blank]と表示されエラーになる時の詳細を、ブラウザのコンソールで確認したところ下記の内容でした。


authPopup.js:51 BrowserAuthError: pkce_not_created: The PKCE code challenge and verifier could not be generated. Detail:TypeError: Cannot read property 'digest' of undefined
    at BrowserAuthError.AuthError [as constructor] (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:216:28)
    at new BrowserAuthError (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:6541:32)
    at Function.BrowserAuthError.createPkceNotGeneratedError (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:6551:20)
    at PkceGenerator.<anonymous> (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:6743:52)
    at step (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:80:27)
    at Object.throw (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:61:57)
    at rejected (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:52:69)

行動規範の内容に同意します

回答1件

ベストアンサー

インターネット越しのアクセスは、httpsでしょうか？

stackoverflowによると、当該エラーが発生しているPKCEに使われるWeb Crypto APIはセキュアオリジン（https://xxxやxxx://localhost）でないと、アクセスできないようです。

VM内からアクセスする場合は、http://localhost/になるのでアクセスできるのだと思います。

なお、私の手元でも再現し、httpsではアクセス可、httpではアクセス不可となりました。

httpアクセス時のエラー

Uncaught (in promise) BrowserAuthError: pkce_not_created: The PKCE code challenge and verifier could not be generated. Detail:TypeError: Cannot read property 'digest' of undefined
    at BrowserAuthError.AuthError [as constructor] (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:216:28)
    at new BrowserAuthError (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:6541:32)
    at Function.BrowserAuthError.createPkceNotGeneratedError (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:6551:20)
    at PkceGenerator.<anonymous> (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:6743:52)
    at step (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:80:27)
    at Object.throw (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:61:57)
    at rejected (https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js:52:69)

再現コード

javascript
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf8"/>
5    <title>example</title>
6  </head>
7  <body>
8    <pre></pre>
9    <script type="text/javascript" src="https://alcdn.msftauth.net/browser/2.7.0/js/msal-browser.js"></script>
10    <script>
11// ref https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-browser-samples/VanillaJSTestApp2.0/app/onPageLoad/authConfig.js
12(async () => {
13  const conf = {
14    auth: {
15      clientId: '<クライアントID>',
16      authority: 'https://login.microsoftonline.com/<テナント名>.onmicrosoft.com',
17    },
18  };
19  const flow = new msal.PublicClientApplication(conf);
20
21  const maybeCred = await flow.handleRedirectPromise();
22  if (!maybeCred) {
23    flow.loginRedirect({scope: 'https://graph.microsoft.com/User.Read'});
24  } else {
25    document.querySelector('pre').textContent = JSON.stringify(maybeCred, null, 2);
26  }
27})();
28    </script>
29  </body>
30</html>
31<!-- vim:set ts=2 sts=2 sw=2: -->