Tutorial: Conectar usuários no Angular SPA usando o SDK javaScript de autenticação nativa

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

Neste tutorial, você aprenderá a conectar usuários em um SPA (aplicativo de página única) 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 SDK de autenticação nativa em JavaScript.

Criar um componente de login

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 arquivo sign-in/sign-in.component.ts e substitua seu conteúdo pelo conteúdo de sign-in.component.ts

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

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

         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 signIn() de instância do SDK inicia o fluxo de entrada.

     Note

     O username parâmetro aceita o endereço de email do usuário ou seu nome de usuário (alias) quando o atributo de usuário interno Username está habilitado no fluxo de usuário do locatário. O usuário pode inserir qualquer valor para entrar. Para habilitar o atributo, consulte Habilitar nome de usuário na política de identificador de entrada.

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

1. Para iniciar o servidor proxy CORS, execute o seguinte comando em 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. Um formulário de entrada é exibido.

4. Para entrar em uma conta existente, insira seus detalhes, selecione o botão Entrar e siga os prompts.

Próxima etapa