적용 대상: 
외부 테넌트(자세한 정보)
이 자습서에서는 네이티브 인증 JavaScript SDK를 사용하여 Angular 단일 페이지 앱에서 암호 재설정을 사용하도록 설정하는 방법을 알아봅니다. 암호 재설정은 암호 인증 흐름이 있는 전자 메일을 사용하는 사용자 계정에 사용할 수 있습니다.
이 자습서에서는 다음을 수행합니다.
- Angular 앱을 업데이트하여 사용자의 암호를 재설정합니다.
- 암호 재설정 흐름 테스트
필수 조건
- 자습서의 단계를 완료합니다. 네이티브 인증 JavaScript SDK를 사용하여 Angular 단일 페이지 앱에 사용자를 등록합니다.
- 외부 테넌트의 고객 사용자에 대해 SSPR(셀프 서비스 암호 재설정)을 사용하도록 설정합니다. SSPR은 암호 인증 흐름이 있는 전자 메일을 사용하는 앱에 대해 고객 사용자가 사용할 수 있습니다.
암호 재설정 구성 요소 만들기
Angular CLI를 사용하여 다음 명령을 실행하여 구성 요소 폴더 내에서 암호 재설정을 위한 새 구성 요소를 생성합니다.
cd components ng generate component reset-password암호 재설정/reset-password.component.ts 파일을 열고 해당 내용을 reset-password.component.ts 내용으로 바꿉니다.
암호 재설정/reset-password.component.html 파일을 열고 reset-password.component.html내용을 추가합니다.
reset-password.component.ts 다음 논리는 초기 암호 재설정 작업 후 다음 단계를 결정합니다. 결과에 따라reset-password.component.html코드 입력 양식을 표시하여 암호 재설정 프로세스를 계속합니다.
const result = await client.resetPassword({ username: this.email }); if (result.isCodeRequired()) { this.showCode = true; this.isReset = false; this.showNewPassword = false; }- SDK의 인스턴스 메서드인 resetPassword()는 암호 재설정 흐름을 시작합니다.
- reset-password.component.html 파일에서 다음을 수행합니다.
<form *ngIf="showCode" (ngSubmit)="submitCode()"> <input type="text" [(ngModel)]="code" name="code" placeholder="OTP Code" required /> <button type="button" (click)="submitCode()" [disabled]="loading">{{ loading ? 'Verifying...' : 'Verify Code' }}</button> </form>성공적으로 호출된 후
submitCode()결과는 다음 단계를 결정합니다. 암호가 필요한 경우 사용자가 암호 재설정 프로세스를 계속할 수 있도록 새 암호 양식이 표시됩니다.if (result.isPasswordRequired()) { this.showCode = false; this.showNewPassword = true; this.isReset = false; this.resetState = result.state; }reset-password.component.html 파일에서 다음을 수행합니다.
<form *ngIf="showNewPassword" (ngSubmit)="submitNewPassword()"> <input type="password" [(ngModel)]="newPassword" name="newPassword" placeholder="New Password" required /> <button type="button" (click)="submitNewPassword()" [disabled]="loading">{{ loading ? 'Submitting...' : 'Submit New Password' }}</button> </form>암호 재설정이 완료된 직후 사용자가 로그인 흐름을 시작하도록 하려면 다음 코드 조각을 사용합니다.
<div *ngIf="isReset"> <p>The password has been reset, please click <a href="/sign-in">here</a> to sign in.</p> </div>
암호 재설정 후 자동으로 로그인(선택 사항)
새 로그인 흐름을 시작하지 않고 암호 재설정에 성공한 후 자동으로 사용자를 로그인할 수 있습니다. 이렇게 하려면 다음 코드 조각을 사용합니다. reset-password.component.ts 전체 예제를 참조하세요.
if (this.resetState instanceof ResetPasswordCompletedState) {
const result = await this.resetState.signIn();
if (result.isFailed()) {
this.error = result.error?.errorData?.errorDescription || "An error occurred during auto sign-in";
}
if (result.isCompleted()) {
this.userData = result.data;
this.resetState = result.state;
this.isReset = true;
this.showCode = false;
this.showNewPassword = false;
}
}
사용자를 자동으로 로그인할 때는 reset-password.component.html 파일에서 다음 코드 스니펫을 사용하십시오.
<div *ngIf="userData && !isSignedIn">
<p>Password reset completed, and signed in as {{ userData?.getAccount()?.username }}</p>
</div>
<div *ngIf="isReset && !userData">
<p>Password reset completed! Signing you in automatically...</p>
</div>
라우팅 모듈 업데이트
src/app/app.routes.ts 파일을 연 다음 암호 재설정 구성 요소에 대한 경로를 추가합니다.
import { ResetPasswordComponent } from './reset-password/reset-password.component';
const routes: Routes = [
{ path: 'reset-password', component: ResetPasswordComponent },
...
];
암호 재설정 기능 테스트
CORS 프록시 서버를 시작하려면 터미널에서 다음 명령을 실행합니다.
npm run cors애플리케이션을 시작하려면 터미널에서 다음 명령을 실행합니다.
npm start웹 브라우저를 열고
http://localhost:4200/reset-password로 이동합니다. 등록 양식이 나타납니다.기존 사용자 계정의 암호를 재설정하려면 세부 정보를 입력하고 계속 단추를 선택한 다음 프롬프트를 따릅니다.
next.config.js에 poweredByHeader: false 설정하기
Next.jsx-powered-by 헤더는 기본적으로 HTTP 응답에 포함되어 애플리케이션이 Next.js의해 구동됨을 나타냅니다. 그러나 보안 또는 사용자 지정 이유로 이 헤더를 제거하거나 수정할 수 있습니다.
const nextConfig: NextConfig = { poweredByHeader: false, /* other config options here */ };