从静态 HTML 页面调用 MSAL 登录

Question

我正在使用 Azure AD B2C 在我的 ReactJs SPA 应用程序中管理身份验证，并使用 MSAL.js 库来管理 jwt 令牌、身份验证等，效果很好。

我还有一个静态 HTML 页面，它位于 SPA 应用程序的前面，但不是它的一部分。此 HTML 页面只是为一般 public 精心设计的登录页面，必须出于营销目的而存在。

我需要从这个 HTML 页面调用 MSAL 登录，这样我才能获得流畅的登录体验。目前，HTML 页面上的登录按钮只是将用户重定向到我的 ReactJs 应用程序中的受保护区域。当用户点击受保护的 SPA 应用程序时，MSAL 启动并自动将用户重定向到 Azure AD B2C 登录页面，该页面工作正常但体验很差。这就是为什么我想从 HTML 页面调用登录过程。我需要一些帮助。

这是我目前所做的：

首先，我使用以下内容在 HTML 页面中创建了对 MSAL.js 的引用：

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.1.3/js/msal.min.js"></script>

然后我在 HTML 页面中添加了一个 <script> 部分以添加必要的 Azure AD B2C 租户信息。这些是我在 ReactJs 应用程序中使用的相同参数：

<script>
   var instance = 'https://login.microsoftonline.com/tfp/';
   var tenant = 'myazureadb2ctenant.onmicrosoft.com';
   var signInPolicy = 'B2C_1_SignUp_SignIn';
   var applicationId = 'my-application-id';
   var scopes = ['https://myazureadb2ctenant.onmicrosoft.com/webclient/readaccess'];
   var redirectUri = 'https://example.com/member';

   // My function to redirect user to Azure AD B2C sign in/sign up page
   var mySignInFunction() {

       // What's next here?
   };

</script>

我认为最后一步是向 HTML 页面上的按钮添加 onClick() 功能。

<button onClick="mySignInFunction()">Click here to login</button>

如果能帮我填空，特别是登录功能，我将不胜感激。

Answer 1

在 mySignInFunction 函数之外，您创建一个 Msal.UserAgentApplication 实例：

var authority = `${instance}${tenant}/${signInPolicy}`;

var clientApplication = new Msal.UserAgentApplication(
  applicationId,
  authority,
  function (errorDescription, token, error, tokenType) {
    // Called if error has occurred.
  },
  {
    redirectUri: redirectUri
  });

在 mySignInFunction 函数中，调用 Msal.UserAgentApplication.loginRedirect 函数：

clientApplication.loginRedirect(scopes);

从静态 HTML 页面调用 MSAL 登录

Invoking MSAL sign in from static HTML page

azure-active-directory

azure-ad-b2c

msal