Inscrever usuários em um SPA angular usando o SDK de autenticação nativa - Microsoft identity platform

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

Conclua as etapas no Início Rápido: Conectar usuários em um aplicativo de página única angular usando o SDK javaScript de autenticação nativa. Este guia de início rápido mostra como executar um exemplo de código Angular.
Conclua as etapas na configuração do servidor proxy CORS para gerenciar cabeçalhos CORS para autenticação nativa.
Visual Studio Code ou qualquer outro editor de código.
Node.js.
Angular CLI

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,

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, localize o espaço reservado:

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.

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

Crie um diretório chamado /app/components.
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
```
Abra o arquivo sign-up/sign-up.component.ts e substitua o conteúdo por aquele que está em sign-up.component

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>

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

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 autoconectar um usuário, use o seguinte snippet no arquivo sign-up/sign-up.component.html do seu 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

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

Para iniciar o servidor proxy CORS, execute o seguinte comando em seu terminal:
```
npm run cors
```
Para iniciar seu aplicativo, execute o seguinte comando em seu terminal:
```
npm start
```
Abra um navegador da Web e navegue até http://localhost:4200/sign-up. Um formulário de inscrição é exibido.
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

Comentários

Esta página foi útil?

Last updated on 2025-11-18

Compartilhar via

Tutorial: Inscrever usuários em um aplicativo de página única angular usando o SDK javaScript de autenticação nativa (versão prévia)

Pré-requisitos

Criar um projeto do React e instalar dependências

Adicionar o SDK do JavaScript ao seu projeto

Adicionar configuração do cliente

Criar um componente de inscrição

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

Atualizar roteamento de aplicativo

Testar o fluxo de inscrição

Próxima etapa

Comentários

Recursos adicionais