Tutorial: Redefinir senha no aplicativo de página única angular usando o SDK javaScript de autenticação nativa

Aplica-se a: Locatários externos (saiba mais)

Neste tutorial, você aprenderá a habilitar a redefinição de senha no aplicativo de página única angular usando o SDK javaScript de autenticação nativa. A redefinição de senha está disponível para contas de usuário que usam email com fluxo de autenticação de senha.

Neste tutorial, você:

Pré-requisitos

• Conclua as etapas no Tutorial: inscrever usuários no aplicativo de página única Angular usando o SDK JavaScript de autenticação nativa.
• Habilite o SSPR (self-service password reset, redefinição de senha de autoatendimento) para usuários clientes no tenant externo. A SSPR está disponível para usuários clientes para aplicativos que usam email com fluxo de autenticação de senha.

Criar o componente de redefinição de senha

1. Use a CLI angular para gerar um novo componente para redefinição de senha dentro da pasta de componentes executando o seguinte comando:

   cd components
   ng generate component reset-password
   

2. Abra o arquivo reset-password/reset-password.component.ts e substitua seu conteúdo pelo conteúdo de reset-password.component.ts

3. Abra o arquivo de redefinição de senha/reset-password.component.html e adicione o conteúdo de reset-password.component.html.

   • A lógica a seguir em reset-password.component.ts determina a próxima etapa após a operação inicial de redefinição de senha. Dependendo do resultado, ele exibe o formulário de entrada de código no reset-password.component.html para continuar o processo de redefinição de senha:

     const result = await client.resetPassword({ username: this.email });
     if (result.isCodeRequired()) {
                 this.showCode = true;
                 this.isReset = false;
                 this.showNewPassword = false;
             }
     

     • O método de instância do SDK, resetPassword() inicia o fluxo de redefinição de senha.
     • No arquivo 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>
     

   • Depois submitCode() de invocado com êxito, o resultado determina a próxima etapa: se a senha for necessária, o novo formulário de senha será exibido para que o usuário continue o processo de redefinição de senha.

     if (result.isPasswordRequired()) {
         this.showCode = false;
         this.showNewPassword = true;
         this.isReset = false;
         this.resetState = result.state;
     }
     

     No arquivo 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>
   

   • Se você quiser que o usuário inicie o fluxo de login imediatamente após a conclusão da redefinição de senha, use este snippet:

     <div *ngIf="isReset">
         <p>The password has been reset, please click <a href="/sign-in">here</a> to sign in.</p>
     </div>
     

Entrar automaticamente após redefinir senha (opcional)

Você pode autenticar automaticamente os seus usuários após uma redefinição de senha bem-sucedida sem iniciar um novo fluxo de autenticação. Para fazer isso, use o trecho de código a seguir. Veja um exemplo completo em 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;
    }
}

Ao autenticar automaticamente um usuário, use o seguinte snippet no 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>

Atualizar o módulo de roteamento

Abra o arquivo src/app/app.routes.ts e adicione a rota para o componente de redefinição de senha:

import { ResetPasswordComponent } from './reset-password/reset-password.component';

const routes: Routes = [
    { path: 'reset-password', component: ResetPasswordComponent },
    ...
];

Testar a funcionalidade de redefinição de senha

1. Para iniciar o servidor proxy CORS, execute o seguinte comando em seu terminal:

   npm run cors
   

2. Para iniciar seu aplicativo, execute o seguinte comando em seu terminal:

   npm start
   

3. Abra um navegador da Web e navegue até http://localhost:4200/reset-password. Um formulário de inscrição é exibido.

4. Para redefinir a senha de uma conta de usuário existente, insira seus detalhes, selecione o botão Continuar e siga os prompts.

Configurar poweredByHeader: false em next.config.js

• Em Next.js, o cabeçalho x-powered-by é incluído por padrão em respostas HTTP para indicar que o aplicativo é alimentado por Next.js. No entanto, por motivos de segurança ou personalização, talvez você queira remover ou modificar esse cabeçalho.

  const nextConfig: NextConfig = {
    poweredByHeader: false,
    /* other config options here */
  };
  

Conteúdo relacionado

• Tutorial: Suporte ao fallback da web no SDK JavaScript de autenticação nativa.