Tutorial: Inscreva utilizadores numa aplicação 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 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

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 utilizar funcionalidades de autenticação nativas, importe a partir 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ê 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,

  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, 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 depois, substitua-o pelo subdomínio do inquilino 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.

  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 ficheiro sign-up/sign-up.component.ts e, em seguida, substitua o seu conteúdo pelo conteúdo de 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 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>

  5. Abra o ficheiro src/app/app.component.scss e depois adicione o seguinte ficheiro de estilos.

Recolha um nome de utilizador (alias) durante o registo

Pode permitir que os utilizadores se inscrevam com um nome de utilizador (alias) além do email. O nome de utilizador (alias) é um identificador alternativo de iniciação de sessão, como um ID de cliente, número de conta ou outro valor que escolher.

Durante a inscrição, o nome de utilizador (email) é sempre necessário como identificador principal, e o nome de utilizador (alias) não o substitui. Por defeito, o nome de utilizador (alias) é opcional, embora um administrador possa configurá-lo conforme necessário. A tua aplicação recolhe sempre o nome de utilizador (email) e recolhe o alias como um atributo juntamente com o email. No início de sessão, o utilizador pode então iniciar sessão com o seu nome de utilizador (email) ou o seu nome de utilizador (alias). Para saber como o atributo Nome de Utilizador é configurado como opcional ou obrigatório, consulte Configurar os tipos de entrada do utilizador e o layout da página.

Para recolher um nome de utilizador (alias) durante o registo:

  1. Certifique-se de que o atributo de utilizador incorporado Nome de utilizador está ativado no seu fluxo de utilizador de registo. Para obter os passos, consulte Ativar o nome de utilizador na política de identificador de início de sessão.

  2. Adicione um campo flatUsername ao componente de registo, depois, inclua o atributo flatusername no UserAccountAttributes que passa a signUp():

    flatUsername = "";

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

  3. Adicione um campo de alias a sign-up.component.html juntamente com os campos existentes:

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

  4. Lidar com erros relacionados com o nome de utilizador (alias):

    • result.error?.isUserAlreadyExists() Cobre um email duplicado ou um nome de utilizador duplicado (alias). Atualize a mensagem em conformidade, por exemplo, já existe uma conta com este email ou nome de utilizador.
    • Um nome de utilizador inválido (alias) aparece em result.error?.isAttributesValidationFailed() vez de result.error?.isInvalidUsername(). Crie uma ramificação a partir deste método para apresentar uma mensagem específica para o nome de utilizador.

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

Pode iniciar automaticamente a sessão dos seus utilizadores após um registo bem-sucedido, sem iniciar um novo fluxo de autenticaçã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;
        }
    }

Ao iniciar sessão automaticamente de um utilizador, use o seguinte excerto no seu ficheiro 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 o roteamento de aplicativos

  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 no seu terminal:

    npm run cors

  2. Para iniciar a sua aplicação, execute o seguinte comando no seu terminal:

    npm start

  3. Abra um navegador da Web e navegue até http://localhost:4200/sign-up. É apresentado um formulário de inscrição.

  4. 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: Iniciar sessão de utilizadores numa aplicação React de página única com o SDK JavaScript de autenticação nativa

  • Last updated on