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

Aplica-se a: círculo verde com um símbolo de marca de seleção branco que indica que o conteúdo a seguir se aplica a locatários externos. Inquilinos 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ê:

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

Pré-requisitos

Conclua as etapas em Guia de início rápido: entre usuários em um aplicativo de página única do Angular usando o SDK JavaScript de autenticação nativa. Este guia de início rápido mostra que você executa um exemplo de código Angular de exemplo.
Conclua as etapas em Configurar o servidor proxy CORS para gerenciar cabeçalhos CORS para autenticação nativa.
Visual Studio Code ou outro editor de código.
Node.js.
CLI angular.

Criar um projeto React e instalar dependências

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

ng new angularspa
cd angularspa

Depois de executar os comandos com êxito, você deve 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 JavaScript SDK ao seu projeto

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

npm install @azure/msal-browser

Os recursos de autenticação nativos fazem parte da azure-msal-browser biblioteca. Para usar recursos de autenticação nativos, importe do @azure/msal-browser/custom-auth. Por exemplo:

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

Adicionar configuração do cliente

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

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 pelo ID do aplicativo (cliente) do aplicativo que você registrou anteriormente.
Enter_the_Tenant_Subdomain_Here em seguida, substitua-o pelo subdomínio do locatário no centro de administração do Microsoft Entra. Por exemplo, se o domínio principal do arrendatário for contoso.onmicrosoft.com, utilize contoso. Se 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 de inscrição/sign-up.component.ts e substitua seu conteúdo pelo conteúdo 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 em seguida 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 em 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 trecho:

<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 ficheiro src/app/app.component.scss e depois adicione o seguinte ficheiro de estilos.

Pode iniciar sessão automaticamente nos seus utilizadores após uma inscrição bem-sucedida sem iniciar um novo fluxo de início de sessão. Para fazer isso, use o seguinte trecho de código. Veja um exemplo completo em 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;
        }
    }

Quando você fizer login automático em um usuário, use o seguinte trecho em seu arquivo html de inscrição/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 o roteamento de aplicativos

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 no seu terminal:
```
npm run cors
```
Para iniciar a sua aplicação, execute o seguinte comando no seu terminal:
```
npm start
```
Abra um navegador da Web e navegue até http://localhost:4200/sign-up. É apresentado um formulário de inscrição.
Para se inscrever numa conta, introduza os seus dados, selecione o botão Continuar e, em seguida, siga as instruções.

Próximo passo

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

Feedback

Esta página foi útil?

Last updated on 2025-11-19

Partilhar via

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

Pré-requisitos

Criar um projeto React e instalar dependências

Adicionar JavaScript SDK ao seu projeto

Adicionar configuração do cliente

Criar um componente de inscrição

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

Atualizar o roteamento de aplicativos

Testar o fluxo de inscrição

Próximo passo

Feedback

Recursos adicionais