从静态HTML页面调用MSAL登录 [英] Invoking MSAL sign in from static HTML page

问题描述

我正在使用Azure AD B2C来管理我的ReactJsSPA应用程序中的身份验证，并使用MSAL.js库来管理jwt令牌、身份验证等，它们工作得很好。

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

我需要从此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>

如果您能帮助我填写此处的空白，尤其是登录功能，我将不胜感激。

推荐答案

在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登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！