azure-active-directory - 从静态 HTML 页面调用 MSAL 登录

Question

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

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

我需要调用 MSAL从这个 HTML 页面登录，以便我有一个不错的和流畅的登录体验。目前，HTML 页面上的登录按钮只是将用户重定向到我的 ReactJs 中的 protected 区域。应用程序。当用户点击 protected 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);