Вызов входа MSAL со статической HTML-страницы

Question

Я использую Azure AD B2C для управления аутентификацией в моем ReactJs приложении SPA и библиотеку 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>

Затем я добавил на 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>

Думаю, последним шагом будет добавление функции 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);