Tutorial: Iniciar sessão de utilizadores no Angular SPA usando o SDK nativo de autenticação JavaScript

Aplica-se a: Inquilinos externos (saiba mais)

Neste tutorial, você aprenderá a fazer login de usuários em um aplicativo de página única (SPA) Angular usando o SDK JavaScript de autenticação nativa.

Neste tutorial, você:

Pré-requisitos

• Conclua as etapas em Inscrever usuários no aplicativo de página única Angular usando o JavaScript SDK de autenticação nativa.

Criar um componente de início de sessão

1. Use a CLI Angular para gerar um novo componente para a página de entrada dentro da pasta de componentes executando o seguinte comando:

   cd components
   ng generate component sign-in
   

2. Abra o ficheiro sign-in/sign-in.component.ts e substitua o seu conteúdo pelo conteúdo de sign-in.component.ts

3. Abra o ficheiro sign-in/sign-in.component.html e adicione o conteúdo de sign-in.component.html.

   • A lógica a seguir no sign-in.component.ts determina a próxima etapa após a tentativa de entrada inicial. Dependendo do resultado, ele exibe ou o formulário de senha ou o de código único no sign-in.component.html para guiar o usuário pela parte apropriada do processo de início de sessão:

         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;
         }
     

     • O método de instância do SDK, signIn() inicia o fluxo de entrada.

     Note

     O parâmetro username aceita o endereço de e-mail do utilizador ou o respetivo nome de utilizador (alias) quando o atributo de utilizador incorporado Username está ativado no fluxo de utilizador do seu inquilino. O utilizador pode introduzir qualquer um dos valores para iniciar sessão. Para ativar o atributo, consulte Ativar nome de utilizador na política de identificador de entrada.

     • No ficheiro 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>
     

Atualizar o módulo de roteamento

Abra o arquivo src/app/app.routes.ts e adicione a rota para o componente de entrada:

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

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

Testar a funcionalidade de início de sessão

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

   npm run cors
   

2. Para iniciar o aplicativo Angular, abra outra janela do terminal e execute o seguinte comando:

   npm start
   

3. Abra um navegador da Web e navegue até http://localhost:4200/sign-in. É apresentado um formulário de início de sessão.

4. Para iniciar sessão numa conta existente, introduza os seus dados, selecione o botão Iniciar sessão e, em seguida, siga as instruções.

Próximo passo