자습서: 네이티브 인증 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() 로그인 흐름을 시작합니다.

      메모

      이 매개 변수는 username 테넌트의 사용자 흐름에서 Username 기본 제공 사용자 특성을 사용하도록 설정한 경우 사용자의 이메일 주소 또는 사용자 이름(별칭)을 허용합니다. 사용자는 두 값을 입력하여 로그인할 수 있습니다. 특성을 사용하도록 설정하려면 로그인 식별자 정책에서 사용자 이름 사용을 참조하세요.

      • 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. 기존 계정에 로그인하려면 세부 정보를 입력하고 로그인 단추를 선택한 다음 프롬프트를 따릅니다.

다음 단계

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

  • Last updated on