다음을 통해 공유

자습서: 네이티브 인증 JavaScript SDK를 사용하여 Angular SPA에서 사용자 로그인

적용 대상: 외부 테넌트에 다음 내용이 적용되었음을 나타내는 흰색 확인 표시 기호가 있는 녹색 원입니다. 외부 테넌트(자세한 정보)

이 자습서에서는 네이티브 인증 JavaScript SDK를 사용하여 사용자를 Angular SPA(단일 페이지 앱)에 로그인하는 방법을 알아봅니다.

이 자습서에서는 다음을 수행합니다.

  • 사용자를 로그인하도록 Angular 앱을 업데이트합니다.
  • 로그인 흐름을 테스트합니다.

필수 조건

로그인 구성 요소 만들기

  1. Angular CLI를 사용하여 다음 명령을 실행하여 구성 요소 폴더 내에서 로그인 페이지에 대한 새 구성 요소를 생성합니다 .

    cd components
ng generate component sign-in

  2. 로그인/sign-in.component.ts 파일을 열고 해당 내용을 sign-in.component.ts 콘텐츠로 바꿉니다.

  3. 로그인/sign-in.component.html 파일을 열고 sign-in.component.html콘텐츠를 추가합니다.

    • sign-in.component.ts 다음 논리는 초기 로그인 시도 후 다음 단계를 결정합니다. 결과에 따라 사용자가 로그인 프로세스의 적절한 부분을 안내하도록 sign-in.component.html 암호 또는 일회성 코드 양식을 표시합니다.

          const result: SignInResult = await client.signIn({ username: this.username });

    if (result.isPasswordRequired()) {
        this.showPassword = true;
        this.showCode = false;
    } else if (result.isCodeRequired()) {
        this.showPassword = false;
        this.showCode = true;
    } else if (result.isCompleted()) {
        this.isSignedIn = true;
        this.userData = result.data;
    }

      • SDK의 인스턴스 메서드는 signIn() 로그인 흐름을 시작합니다.

      • sign-in.component.html 파일에서 다음을 수행합니다.

      <form *ngIf="showPassword" (ngSubmit)="submitPassword()">
    <input type="password" [(ngModel)]="password" name="password" placeholder="Password" required />
    <button type="submit" [disabled]="loading">{{ loading ? 'Verifying...' : 'Submit Password' }}</button>
</form>
<form *ngIf="showCode" (ngSubmit)="submitCode()">
    <input type="text" [(ngModel)]="code" name="code" placeholder="OTP Code" required />
    <button type="submit" [disabled]="loading">{{ loading ? 'Verifying...' : 'Submit Code' }}</button>
</form>

라우팅 모듈 업데이트

src/app/app.routes.ts 파일을 열고 로그인 구성 요소에 대한 경로를 추가합니다.

import { SignInComponent } from './components/sign-in/sign-in.component';

export const routes: Routes = [
    ...
    { path: 'sign-in', component: SignInComponent },
];

로그인 기능 테스트

  1. CORS 프록시 서버를 시작하려면 터미널에서 다음 명령을 실행합니다.

    npm run cors

  2. Angular 앱을 시작하려면 다른 터미널 창을 연 다음, 다음 명령을 실행합니다.

    npm start

  3. 웹 브라우저를 열고 http://localhost:4200/sign-in로 이동합니다. 로그인 양식이 나타납니다.

  4. 기존 계정에 로그인하려면 세부 정보를 입력하고 로그인 단추를 선택한 다음 프롬프트를 따릅니다.

별칭 또는 사용자 이름으로 로그인 사용

전자 메일 주소 및 암호로 로그인하는 사용자가 사용자 이름 및 암호로 로그인하도록 허용할 수도 있습니다. 대체 로그인 식별자라고도 하는 사용자 이름은 고객 ID, 계정 번호 또는 사용자 이름으로 사용하도록 선택한 다른 식별자일 수 있습니다.

Microsoft Entra 관리 센터를 통해 사용자 계정에 사용자 이름을 수동으로 할당하거나 Microsoft Graph API를 통해 앱에서 사용자 이름을 자동화할 수 있습니다.

별칭 또는 사용자 이름으로 로그인 문서의 단계를 사용하여 사용자들이 애플리케이션에서 사용자 이름으로 로그인할 수 있도록 합니다.

  1. 로그인에서 사용자 이름을 사용하도록 설정합니다.
  2. 관리 센터에서 사용자 이름을 가진 사용자를 만들 거나 사용자 이름을 추가하여 기존 사용자를 업데이트합니다. 또는 Microsoft Graph API를 사용하여 앱에서 사용자 만들기 및 업데이트를 자동화할 수도 있습니다.

다음 단계

자습서: 네이티브 인증 JavaScript SDK를 사용하여 Angular 단일 페이지 앱에서 암호 재설정

  • Last updated on