从静态HTML页面调用MSAL登录

Question

我正在使用Azure AD B2C来管理我的ReactJsSPA应用程序和MSAL.js库中的jwt身份验证,以管理令牌,身份验证等,这很有效.

我还有一个静态HTML页面,它位于SPA应用程序的前面,但不是它的一部分.这个HTML页面只是一个设计精美的公众登陆页面,它必须存在用于营销目的.

我需要MSAL从这个HTML页面调用登录,这样我才能获得良好而顺畅的登录体验.目前,HTML页面上的登录按钮只是将用户重定向到我的ReactJs应用程序中的受保护区域.当用户点击受保护的SPA应用程序时,MSAL启动并自动将用户重定向到Azure AD B2C登录页面,该页面工作正常,但体验很难看.这就是我想从HTML页面调用登录过程的原因.我可以用一些帮助.

这是我到目前为止所做的:

首先,我MSAL.js使用以下内容在HTML页面中创建了一个引用:

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

然后,我<script>在HTML页面中添加了一个部分,以添加必要的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>

我认为最后一步是onClick()在HTML页面上的按钮中添加一个功能.

<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);