Tutorial: Cadastrar usuários em um aplicativo Angular de página única usando o SDK JavaScript de autenticação nativa

Aplica-se a: Círculo verde com um símbolo de marca de seleção branca que indica que o conteúdo a seguir se aplica a locatários externos. Locatários externos (saiba mais)

Neste tutorial, você aprenderá a criar um aplicativo de página única angular que inscreve usuários usando o SDK javaScript da autenticação nativa.

Neste tutorial, você:

  • Criar um projeto de Next.js Angular.
  • Adicione o SDK do JS da MSAL a ele.
  • Adicione componentes de interface do usuário do aplicativo.
  • Configure o projeto para inscrever usuários.

Pré-requisitos

Criar um projeto do React e instalar dependências

Em um local de escolha no computador, execute os seguintes comandos para criar um novo projeto Angular com o nome reactspa, navegue até a pasta do projeto e instale os pacotes:

ng new angularspa
cd angularspa

Depois de executar os comandos com êxito, você deverá ter um aplicativo com a seguinte estrutura:

angularspa/
└──node_modules/
   └──...
└──public/
   └──...
└──src/
   └──app/
      └──app.component.html
      └──app.component.scss
      └──app.component.ts
      └──app.modules.ts
      └──app.config.ts
      └──app.routes.ts
   └──index.html
   └──main.ts
   └──style.scss
└──angular.json
└──package-lock.json
└──package.json
└──README.md
└──tsconfig.app.json
└──tsconfig.json
└──tsconfig.spec.json

Adicionar o SDK do JavaScript ao seu projeto

Para usar o SDK javaScript de autenticação nativa em seu aplicativo, use o terminal para instalá-lo usando o seguinte comando:

npm install @azure/msal-browser

Os recursos de autenticação nativa fazem parte da azure-msal-browser biblioteca. Para usar recursos de autenticação nativa, você importa de @azure/msal-browser/custom-auth. Por exemplo:

  import CustomAuthPublicClientApplication from "@azure/msal-browser/custom-auth";

Adicionar configuração do cliente

Nesta seção, você definirá uma configuração para o aplicativo cliente público de autenticação nativa para permitir que ele interaja com a interface do SDK. Para fazer isso,

  1. Crie um arquivo chamado src/app/config/auth-config.ts e adicione o seguinte código:

    export const customAuthConfig: CustomAuthConfiguration = {
    customAuth: {
        challengeTypes: ["password", "oob", "redirect"],
        authApiProxyUrl: "http://localhost:3001/api",
    },
    auth: {
        clientId: "Enter_the_Application_Id_Here",
        authority: "https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com",
        redirectUri: "/",
        postLogoutRedirectUri: "/",
        navigateToLoginRequestUrl: false,
    },
    cache: {
        cacheLocation: "sessionStorage",
    },
    system: {
        loggerOptions: {
            loggerCallback: (level: LogLevel, message: string, containsPii: boolean) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                }
            },
        },
    },
};

    No código, encontre o marcador de posição:

    • Enter_the_Application_Id_Here em seguida, substitua-o pela ID do aplicativo (cliente) do aplicativo que você registrou anteriormente.

    • Enter_the_Tenant_Subdomain_Here em seguida, substitua-o pelo subdomínio de locatário no portal de administração do Microsoft Entra. Por exemplo, se o domínio primário do locatário for contoso.onmicrosoft.com, use contoso. Se você não tiver o nome do locatário, saiba como ler os detalhes do locatário.

  2. Crie um arquivo chamado src/app/services/auth.service.ts e adicione o seguinte código:

    import { Injectable } from '@angular/core';
import { CustomAuthPublicClientApplication, ICustomAuthPublicClientApplication } from '@azure/msal-browser/custom-auth';
import { customAuthConfig } from '../config/auth-config';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private authClientPromise: Promise<ICustomAuthPublicClientApplication>;
  private authClient: ICustomAuthPublicClientApplication | null = null;

  constructor() {
    this.authClientPromise = this.init();
  }

  private async init(): Promise<ICustomAuthPublicClientApplication> {
    this.authClient = await CustomAuthPublicClientApplication.create(customAuthConfig);
    return this.authClient;
  }

  getClient(): Promise<ICustomAuthPublicClientApplication> {
    return this.authClientPromise;
  }
}

Criar um componente de inscrição

  1. Crie um diretório chamado /app/components.

  2. Use a CLI angular para gerar um novo componente para a página de inscrição dentro da pasta de componentes executando o seguinte comando:

    cd components
ng generate component sign-up

  3. Abra o arquivo sign-up/sign-up.component.ts e substitua o conteúdo por aquele que está em sign-up.component

  4. Abra o arquivo de inscrição/sign-up.component.html e adicione o código no arquivo html.

    • A lógica a seguir no arquivo sign-up.component.ts determina o que o usuário precisa fazer depois de iniciar o processo de inscrição. Dependendo do resultado, ele mostra o formulário de senha ou o formulário de código de verificação no sign-up.component.html para que o usuário possa continuar com o fluxo de inscrição:

         const attributes: UserAccountAttributes = {
               givenName: this.firstName,
               surname: this.lastName,
               jobTitle: this.jobTitle,
               city: this.city,
               country: this.country,
           };
   const result = await client.signUp({
               username: this.email,
               attributes,
           });

   if (result.isPasswordRequired()) {
       this.showPassword = true;
       this.showCode = false;
   } else if (result.isCodeRequired()) {
       this.showPassword = false;
       this.showCode = true;
   }

      O método signUp() de instância do SDK inicia o fluxo de inscrição.

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

      <div *ngIf="isSignedUp">
    <p>The user has been signed up, please click <a href="/sign-in">here</a> to sign in.</p>
</div>

  5. Abra o arquivo src/app/app.component.scss e adicione o arquivo de estilos a seguir.

Coletar um nome de usuário (alias) durante a inscrição

Você pode permitir que os usuários se inscrevam com um nome de usuário (alias) além de seus emails. O nome de usuário (alias) é um identificador de entrada alternativo, como uma ID do cliente, um número de conta ou outro valor que você escolher.

Durante a inscrição, o nome de usuário (email) é sempre necessário como o identificador primário e o nome de usuário (alias) não o substitui. Por padrão, o nome de usuário (alias) é opcional, embora um administrador possa configurá-lo conforme necessário. Seu aplicativo sempre coleta o nome de usuário (email) e coleta o alias como um atributo junto com o email. Ao fazer login, o usuário pode usar seu nome de usuário (e-mail) ou seu alias. Para saber como o atributo Nome de usuário é configurado como opcional ou necessário, consulte Configurar os tipos de entrada do usuário e o layout da página.

Para coletar um nome de usuário (alias) durante a inscrição:

  1. Verifique se o atributo de usuário interno Username está habilitado no fluxo de usuário de inscrição. Para ver as etapas, consulte Habilitar nome de usuário na política de identificador de entrada.

  2. Adicione um campo flatUsername ao componente de cadastro e, em seguida, inclua o atributo flatusername no UserAccountAttributes que você passa para signUp():

    flatUsername = "";

const attributes: UserAccountAttributes = {
    givenName: this.firstName,
     //...
    flatusername: this.flatUsername,
};

  3. Adicione uma entrada de alias para sign-up.component.html junto com os campos existentes:

    <input type="text" [(ngModel)]="flatUsername" name="flatUsername" placeholder="Username (alias)" />

  4. Tratar erros relacionados ao nome de usuário (alias):

    • result.error?.isUserAlreadyExists() abrange um email duplicado ou um alias (nome de usuário) duplicado. Atualize a mensagem adequadamente, por exemplo, já existe uma conta com esse email ou nome de usuário.
    • Um nome de usuário inválido (alias) é exibido em result.error?.isAttributesValidationFailed() vez de result.error?.isInvalidUsername(). Crie uma ramificação neste método para exibir uma mensagem específica para o nome de usuário.

Entrar automaticamente após a inscrição (opcional)

Você pode conectar automaticamente seus usuários após uma inscrição bem-sucedida sem iniciar um novo fluxo de entrada. Para fazer isso, use o trecho de código a seguir. Veja um exemplo completo no sign-up/sign-up.component.ts:

    if (this.signUpState instanceof SignUpCompletedState) {
        const result = await this.signUpState.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.signUpState = result.state;
            this.isSignedUp = true;
            this.showCode = false;
            this.showPassword = false;
        }
    }

Ao realizar o logon automático de um usuário, utilize o seguinte trecho de código no seu arquivo HTML sign-up/sign-up.component.html.

    <div *ngIf="userData && !isSignedIn">
        <p>Signed up complete, and signed in as {{ userData?.getAccount()?.username }}</p>
    </div>
    <div *ngIf="isSignedUp && !userData">
        <p>Sign up completed! Signing you in automatically...</p>
    </div>

Atualizar roteamento de aplicativo

  1. Abra o arquivo src/app/app.route.ts e adicione a rota para o componente de inscrição:

    import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SignUpComponent } from './components/sign-up/sign-up.component';
import { AuthService } from './services/auth.service';
import { AppComponent } from './app.component';

export const routes: Routes = [
    { path: 'sign-up', component: SignUpComponent },
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes),
        SignUpComponent,
    ],
    providers: [AuthService],
    bootstrap: [AppComponent]
})
export class AppRoutingModule { }

Testar o fluxo de inscrição

  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/sign-up. Um formulário de inscrição é exibido.

  4. Para se inscrever em uma conta, insira seus detalhes, selecione o botão Continuar e siga os prompts.

Próxima etapa

Tutorial: Conectar usuários em um aplicativo de página única do React usando o SDK javaScript de autenticação nativa

  • Last updated on