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 javaScript de autenticação nativa.

Criar um componente de entrada

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

3. Abra o arquivo de entrada/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 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.

     • 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 entrada

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.

Habilitar o login com um alias ou nome de usuário

Você pode permitir que os usuários que entrarem com um endereço de email e senha também entrem com um nome de usuário e senha. O nome de usuário também chamado de identificador de entrada alternativo pode ser uma ID do cliente, um número de conta ou outro identificador que você escolhe usar como nome de usuário.

Você pode atribuir nomes de usuário à conta de usuário manualmente por meio do Centro de administração do Microsoft Entra ou automatizá-la em seu aplicativo por meio da API do Microsoft Graph.

Use as etapas no artigo Entrar com um alias ou nome de usuário para permitir que os usuários façam login usando um nome de usuário no seu aplicativo.

1. Habilitar nome de usuário no login.
2. Crie usuários com nome de usuário no centro de administração ou atualize os usuários existentes adicionando um nome de usuário. Como alternativa, você também pode automatizar a criação e a atualização do usuário em seu aplicativo usando a API do Microsoft Graph.

Próxima etapa