Руководство. Регистрация метода строгой проверки подлинности в одностраничном приложении Angular с помощью собственного пакета SDK JavaScript для проверки подлинности

Применяется: Внешние клиенты (дополнительные сведения)

В этом руководстве вы регистрируете надежный метод аутентификации для пользователя в вашем одностраничном приложении Angular (SPA) с помощью JavaScript SDK для нативной аутентификации.

Если включить многофакторную проверку подлинности (MFA), но у пользователя нет зарегистрированного метода строгой проверки подлинности, необходимо зарегистрировать пользователя перед выдачой маркеров.

Процесс регистрации для сильной аутентификации выполняется в трёх случаях:

• Во время входа: пользователь входит в систему, но не зарегистрирован надежный метод проверки подлинности.
• После регистрации: пользователь успешно регистрируется и автоматически переходит к входу.
• После самостоятельного сброса пароля (SSPR) пользователь успешно сбрасывает пароль и автоматически переходит к входу.

Если требуется регистрация метода строгой проверки подлинности, пользователь выбирает метод из списка поддерживаемых методов. Доступные методы — это одноразовый секретный код электронной почты и SMS .

На схеме потоков ниже показаны три сценария:

Необходимые условия

• Выполните действия, описанные в руководстве по регистрации, входу и сбросу пароля.
• Visual Studio Code или другой редактор кода.
• Node.js 20.x или более поздней версии.
• Angular CLI , установленный глобально. В этом примере используется версия 19.2.1.
• Включите многофакторную проверку подлинности (MFA) для приложения.

Разрешить приложению выполнение регистрации метода строгой проверки подлинности

Чтобы включить регистрацию метода строгой проверки подлинности в приложении React, обновите конфигурацию приложения, добавив необходимую возможность:

1. Найдите файл src/app/config/auth-config.ts .

2. customAuth В объекте добавьте или обновите capabilities свойство, чтобы включить registration_required значение в массив, как показано в следующем фрагменте кода:

   const customAuthConfig: CustomAuthConfiguration = {
       customAuth: {
           ...
           capabilities: ["registration_required"],
           ...
       },
       ...
   };
   

Значение возможности registration_required сообщает Microsoft Entra, что ваше приложение может обрабатывать процесс регистрации для метода строгой аутентификации. Узнайте больше о типах и возможностях собственных вызовов проверки подлинности.

Создание компонентов пользовательского интерфейса

Требуется, чтобы компоненты формы обрабатывали регистрацию метода строгой проверки подлинности. В следующих разделах показано, как добавить компоненты формы.

Создание формы выбора метода строгой проверки подлинности

1. В консоли перейдите в папку src/app/components/shared , а затем используйте Angular CLI для создания компонента, например auth-method-selection-form , с помощью следующей команды:

   ng generate component auth-method-selection-form
   

   Эта команда создает файлы auth-method-selection-form.component.html и auth-method-selection-form.component.ts в папке src/app/components/shared/auth-method-selection-form/.

2. Откройте файл auth-method-selection-form.component.ts, а затем замените его содержимое содержимым в auth-method-selection-form.component.ts.

3. Откройте файл auth-method-selection-form.component.html, а затем добавьте содержимое в auth-method-selection-form.component.html

Создание формы вызова для метода строгой проверки подлинности

1. В консоли перейдите в папку src/app/components/shared , а затем используйте Angular CLI для создания компонента, например auth-method-challenge-form с помощью следующей команды:

   ng generate component auth-method-challenge-form
   

   Эта команда создает файлы auth-method-challenge-form.component.ts и auth-method-challenge-form.component.html в папке src/app/components/shared/auth-method-challenge-form/.

2. Откройте файл auth-method-challenge-form.component.ts, а затем замените его содержимое содержимым в auth-method-challenge-form.component.ts.

3. Откройте файл auth-method-challenge-form.component.html, а затем добавьте содержимое в auth-method-challenge-form.component.html

Регистрация метода строгой проверки подлинности во время входа

Обновите файл src/app/components/sign-in/sign-in.component.ts, чтобы ваше приложение могло обрабатывать процесс регистрации метода строгой аутентификации во время входа. Полный код см. в sign-in.component.ts:

1. Импортируйте необходимые типы и компоненты:

   import {
       AuthMethodRegistrationRequiredState,
       AuthenticationMethod,
       AuthMethodVerificationRequiredState,
   } from "@azure/msal-browser/custom-auth";
   import { AuthMethodSelectionFormComponent } from "../shared/auth-method-selection-form/auth-method-selection-form.component";
   import { AuthMethodChallengeFormComponent } from "../shared/auth-method-challenge-form/auth-method-challenge-form.component";
   
   @Component({
       selector: "app-sign-in",
       templateUrl: "./sign-in.component.html",
       standalone: true,
       imports: [
           ...
           AuthMethodSelectionFormComponent,
           AuthMethodChallengeFormComponent,
           ...
       ],
   })
   

2. Добавьте новые переменные для регистрации метода строгой проверки подлинности:

   showAuthMethodsForRegistration = false;
   showChallengeForRegistration = false;
   authMethodsForRegistration: AuthenticationMethod[] = [];
   selectedAuthMethodForRegistration: AuthenticationMethod | undefined = undefined;
   verificationContactForRegistration: string | undefined = undefined;
   challengeForRegistration: string | undefined = undefined;
   

3. Обновите функции startSignIn, handlePasswordSubmit и handleCodeSubmit, чтобы проверить, требуется ли регистрация метода строгой проверки подлинности:

   async startSignIn() {
       const client = await this.auth.getClient();
       const result: SignInResult = await client.signIn({ username: this.username });
   
       ...
   
       if (result.isAuthMethodRegistrationRequired()) {
           this.showAuthMethodsForRegistration = true;
           this.showPassword = false;
           this.showCode = false;
           this.showChallengeForRegistration = false;
           this.showMfaAuthMethods = false;
           this.showMfaChallenge = false;
           this.authMethodsForRegistration = result.state.getAuthMethods();
           // Set default selection to the first auth method
           this.selectedAuthMethodForRegistration =
               this.authMethodsForRegistration.length > 0 ? this.authMethodsForRegistration[0] : undefined;
           this.signInState = result.state;
       }
   
       ...
   }
   
   async submitPassword() {
       if (this.signInState instanceof SignInPasswordRequiredState) {
           const result = await this.signInState.submitPassword(this.password);
   
           ...
   
           if (result.isAuthMethodRegistrationRequired()) {
               this.showAuthMethodsForRegistration = true;
               this.showPassword = false;
               this.showCode = false;
               this.showChallengeForRegistration = false;
               this.showMfaAuthMethods = false;
               this.showMfaChallenge = false;
               this.authMethodsForRegistration = result.state.getAuthMethods();
               // Set default selection to the first auth method
               this.selectedAuthMethodForRegistration =
                   this.authMethodsForRegistration.length > 0 ? this.authMethodsForRegistration[0] : undefined;
               this.signInState = result.state;
           }
   
           ...
       }
   }
   
   async submitCode() {
       if (this.signInState instanceof SignInCodeRequiredState) {
           const result = await this.signInState.submitCode(this.code);
   
           ...
   
           if (result.isAuthMethodRegistrationRequired()) {
               this.showAuthMethodsForRegistration = true;
               this.showPassword = false;
               this.showCode = false;
               this.showChallengeForRegistration = false;
               this.showMfaAuthMethods = false;
               this.showMfaChallenge = false;
               this.authMethodsForRegistration = result.state.getAuthMethods();
               // Set default selection to the first auth method
               this.selectedAuthMethodForRegistration =
                   this.authMethodsForRegistration.length > 0 ? this.authMethodsForRegistration[0] : undefined;
               this.signInState = result.state;
           }
       }
   }
   

   В каждой функции обратите внимание, что мы проверяем, требуется ли регистрация метода строгой проверки подлинности с помощью следующего фрагмента кода:

   if (result.isAuthMethodRegistrationRequired()) {...}
   

4. Добавьте обработчик для выбора метода строгой проверки подлинности:

   async submitAuthMethodForRegistration() {
       this.error = "";
       this.loading = true;
   
       if (!this.selectedAuthMethodForRegistration || !this.verificationContactForRegistration) {
           this.error = "Please select an authentication method and enter a verification contact.";
           this.loading = false;
           return;
       }
   
       if (this.signInState instanceof AuthMethodRegistrationRequiredState) {
           const result = await this.signInState.challengeAuthMethod({
               authMethodType: this.selectedAuthMethodForRegistration,
               verificationContact: this.verificationContactForRegistration,
           });
   
           if (result.isFailed()) {
               if (result.error?.isInvalidInput()) {
                   this.error = "Incorrect verification contact.";
               } else if (result.error?.isVerificationContactBlocked()) {
                   this.error =
                       "The verification contact is blocked. Consider using a different contact or a different authentication method.";
               } else {
                   this.error =
                       result.error?.errorData?.errorDescription ||
                       "An error occurred while verifying the authentication method.";
               }
           }
   
           if (result.isCompleted()) {
               this.isSignedIn = true;
               this.userData = result.data;
               this.showAuthMethodsForRegistration = false;
               this.signInState = result.state;
           }
   
           if (result.isVerificationRequired()) {
               this.showAuthMethodsForRegistration = false;
               this.showChallengeForRegistration = true;
               this.signInState = result.state;
           }
       }
       this.loading = false;
   }
   

5. Добавьте обработчик для проверки метода строгой аутентификации:

   async submitChallengeForRegistration() {
       this.error = "";
       this.loading = true;
   
       if (!this.challengeForRegistration) {
           this.error = "Please enter a code.";
           this.loading = false;
           return;
       }
   
       if (this.signInState instanceof AuthMethodVerificationRequiredState) {
           const result = await this.signInState.submitChallenge(this.challengeForRegistration);
   
           if (result.isFailed()) {
               if (result.error?.isIncorrectChallenge()) {
                   this.error = "Incorrect code.";
               } else {
                   this.error =
                       result.error?.errorData?.errorDescription ||
                       "An error occurred while verifying the challenge response.";
               }
           }
   
           if (result.isCompleted()) {
               this.isSignedIn = true;
               this.userData = result.data;
               this.showChallengeForRegistration = false;
               this.signInState = result.state;
           }
       }
       this.loading = false;
   }
   

6. Обновите файл sign-in.component.html , чтобы включить формы регистрации метода проверки подлинности. Полный пример см. в sign-in.component.html:

   <!-- Use shared auth method selection form -->
   <app-auth-method-selection-form *ngIf="showAuthMethodsForRegistration" [authMethods]="authMethodsForRegistration"
       [selectedAuthMethod]="selectedAuthMethodForRegistration"
       [verificationContact]="verificationContactForRegistration" [loading]="loading"
       [getPlaceholderText]="getPlaceholderTextForVerificationContact.bind(this)"
       (selectedAuthMethodChange)="selectedAuthMethodForRegistration = $event"
       (verificationContactChange)="verificationContactForRegistration = $event"
       (submitForm)="submitAuthMethodForRegistration()">
   </app-auth-method-selection-form>
   
   <!-- Use shared challenge form -->
   <app-auth-method-challenge-form *ngIf="showChallengeForRegistration" [challenge]="challengeForRegistration"
       [loading]="loading" (challengeChange)="challengeForRegistration = $event"
       (submitForm)="submitChallengeForRegistration()">
   </app-auth-method-challenge-form>
   

Регистрация метода строгой проверки подлинности после регистрации или сброса пароля

Поток регистрации метода строгой проверки подлинности после регистрации и сброса пароля похож на процесс регистрации метода во время входа в систему. После успешной регистрации или сброса пароля пакет SDK может автоматически продолжить процесс входа. Если у пользователя нет зарегистрированного метода строгой проверки подлинности, поток переходит к состояниям регистрации метода проверки подлинности.

Регистрация метода строгой проверки подлинности после регистрации

Для регистрации метода строгой проверки подлинности после потока регистрации необходимо обновить файл src/app/components/sign-up/sign-up.component.ts . Полный код см. в sign-up.component.ts:

1. Убедитесь, что вы импортируете необходимые типы и компоненты.

2. Управляйте состояниями регистрации метода строгой аутентификации аналогично тому, как это происходит в процессе входа. После успешного завершения регистрации можно использовать результат для автоматического активации входа, как показано в следующем фрагменте кода:

   // In your sign-up completion handler
   if (this.signUpState instanceof SignUpCompletedState) {
       const result = await this.signUpState.signIn();
   
       ...
   
       if (result.isAuthMethodRegistrationRequired()) {
           this.showAuthMethodsForRegistration = true;
           this.showPassword = false;
           this.showCode = false;
           this.showChallengeForRegistration = false;
           this.showMfaAuthMethods = false;
           this.showMfaChallenge = false;
           this.authMethodsForRegistration = result.state.getAuthMethods();
           // Set default selection to the first auth method
           this.selectedAuthMethodForRegistration =
               this.authMethodsForRegistration.length > 0 ? this.authMethodsForRegistration[0] : undefined;
           this.signUpState = result.state;
       } 
   
       ...
   }
   

3. Обновите файл sign-up.component.html, чтобы добавить формы регистрации метода аутентификации (auth-method-selection-form и auth-method-challenge-form) таким же образом, как показано в потоке входа. Полный пример см. в sign-up.component.html.

Регистрация метода строгой проверки подлинности после сброса пароля

Для регистрации метода строгой проверки подлинности после SSPR необходимо обновить файл /src/app/components/reset-password/reset-password.component.ts . Полный код см. в reset-password.component.ts:

1. Убедитесь, что вы импортируете необходимые типы и компоненты.

2. Обработайте состояния регистрации метода строгой проверки подлинности так же, как и в процессе входа. После успешного завершения SSPRS можно использовать результат для автоматического активации входа, как показано в следующем фрагменте кода:

   if (this.resetState instanceof ResetPasswordCompletedState) {
       const result = await this.resetState.signIn();
   
       ...
   
       if (result.isAuthMethodRegistrationRequired()) {
           this.showAuthMethodsForRegistration = true;
           this.showCode = false;
           this.showNewPassword = false;
           this.showChallengeForRegistration = false;
           this.showMfaAuthMethods = false;
           this.showMfaChallenge = false;
           this.isReset = false;
           this.authMethodsForRegistration = result.state.getAuthMethods();
           // Set default selection to the first auth method
           this.selectedAuthMethodForRegistration =
               this.authMethodsForRegistration.length > 0 ? this.authMethodsForRegistration[0] : undefined;
           this.resetState = result.state;
       }
   
       ...
   }    
   

3. Обновите файл reset-password.component.html, чтобы добавить формы регистрации метода проверки подлинности (auth-method-selection-form и auth-method-challenge-form) аналогично тому, как это показано в процессе входа. Полный пример см. в reset-password.component.html.

Запуск и тестирование приложения

Выполните действия, описанные в разделе "Запуск и тестирование приложения " для запуска приложения, но на этот раз проверьте поток регистрации метода строгой проверки подлинности.

Проверка регистрации метода аутентификации после создания учётной записи

1. Перейдите на http://localhost:4200/sign-up, чтобы отобразить форму регистрации.

2. Введите необходимые сведения, а затем зарегистрируйтесь, выполнив следующие запросы. После успешной регистрации приложение автоматически продолжает вход, отображая форму регистрации метода строгой проверки подлинности.

3. Выберите метод строгой проверки подлинности, например OTP электронной почты, а затем введите адрес электронной почты.

4. Нажмите кнопку "Продолжить", чтобы отправить сведения о форме. Код проверки должен быть получен по адресу электронной почты.

5. Введите код проверки в текстовое поле формы проверки, а затем нажмите кнопку «Продолжить». После проверки кода регистрируется надежный метод проверки подлинности и выполняется вход.

Проверка регистрации метода строгой проверки подлинности во время входа

Чтобы проверить регистрацию метода строгой проверки подлинности во время входа, убедитесь, что у вас нет учетной записи пользователя, которая не имеет строгого метода проверки подлинности.

1. Перейдите к http://localhost:4200/sign-in, чтобы открыть форму входа.

2. Введите сведения, нажмите кнопку "Продолжить ", а затем следуйте инструкциям. Приложение вводит поток регистрации метода строгой проверки подлинности.

3. Следуйте инструкциям приложения, чтобы завершить регистрацию метода строгой проверки подлинности.

Проверка регистрации метода аутентификации после сброса пароля

Чтобы протестировать регистрацию метода строгой проверки подлинности после SSPR, убедитесь, что у вас есть учетная запись пользователя, для которой не зарегистрирован метод строгой проверки подлинности.

1. Перейдите к http://localhost:4200/reset-password, чтобы открыть форму сброса пароля.

2. Введите сведения, нажмите кнопку "Продолжить ", а затем следуйте запросам приложения, чтобы завершить поток сброса пароля. После успешного сброса пароля приложение продолжает процесс входа, отображая форму регистрации для метода строгой проверки подлинности.

3. Следуйте инструкциям приложения, чтобы завершить регистрацию метода строгой проверки подлинности.

Следующий шаг

Руководство. Включение многофакторной проверки подлинности в Angular SPA с помощью собственного пакета SDK JavaScript для проверки подлинности