Aplicativo de página única: Configuração de código

Aplica-se a: Inquilinos da força de trabalho (saiba mais)

Saiba como configurar o código para seu aplicativo de página única (SPA).

Pré-requisitos

• Registre um novo aplicativo no centro de administração do Microsoft Entra, configurado para Contas somente neste diretório organizacional. Consulte Registar uma candidatura para obter mais detalhes. Registre os seguintes valores na página Visão geral do aplicativo para uso posterior:
  • ID da aplicação (cliente)
  • ID do diretório (inquilino)
• Adicione os seguintes URIs de redirecionamento na configuração da plataforma de aplicação de página única. Consulte Como adicionar um URI de redirecionamento em seu aplicativo para obter mais detalhes.
  • Redirecionar URI: http://localhost:3000/.

Bibliotecas da Microsoft que suportam aplicações de página única

As seguintes bibliotecas da Microsoft suportam aplicações de página única:

Linguagem / estrutura	Projeto sobre GitHub	Pacote	Como obter começado	Iniciar sessão de utilizador	Aceder a APIs Web
Reagir	MSAL Reagir2	msal-react	Início rápido
JavaScript	MSAL.js2	msal-navegador	Início rápido
Angular	MSAL Angular2	msal-angular	Início rápido

Configuração do código do aplicativo

Em uma biblioteca MSAL, as informações de registro do aplicativo são passadas como configuração durante a inicialização da biblioteca.

Reagir

import { PublicClientApplication } from "@azure/msal-browser";
import { MsalProvider } from "@azure/msal-react";

// Configuration object constructed.
const config = {
    auth: {
        clientId: 'your_client_id'
    }
};

// create PublicClientApplication instance
const publicClientApplication = new PublicClientApplication(config);

// Wrap your app component tree in the MsalProvider component
ReactDOM.render(
    <React.StrictMode>
        <MsalProvider instance={publicClientApplication}>
            <App />
        </ MsalProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

Javascript

import * as Msal from "@azure/msal-browser"; // if using CDN, 'Msal' will be available in global scope

// Configuration object constructed.
const config = {
    auth: {
        clientId: 'your_client_id'
    }
};

// create PublicClientApplication instance
const publicClientApplication = new Msal.PublicClientApplication(config);

Angular

// In app.module.ts
import { MsalModule } from '@azure/msal-angular';
import { PublicClientApplication } from '@azure/msal-browser';

@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            auth: {
                clientId: 'Enter_the_Application_Id_Here',
            }
        }), null, null)
    ]
})
export class AppModule { }

Para obter mais informações sobre as opções configuráveis, consulte Inicializando o aplicativo com MSAL.js.

Próximo passo

• Adicione o código de entrada e saída.