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

Artigo
07/04/2024

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

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

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

Linguagem / framework	Projeto em GitHub	Pacote	Como obter começar	Geralmente disponível (GA) ou Pré-visualização^{pública 1}
Angular	MSAL Angular v2²	msal-angular	Início rápido	GA
Angular	MSAL Angular³	msal-angular	—	GA
AngularJS	MSAL AngularJS³	MSAL-AngularJS	—	Pré-visualização pública
JavaScript	MSAL.js v2²	msal-navegador	Tutorial	GA
JavaScript	MSAL.js 1,0³	msal-núcleo	—	GA
React	MSAL Reagir²	msal-react	Início rápido	GA

1 Os Termos de Licença Universal para Serviços Online aplicam-se às bibliotecas na Pré-visualização Pública.

2 Fluxo de código de autenticação apenas com PKCE (Recomendado).

3 Apenas fluxo de concessão implícito (Não recomendado).

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.

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

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

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

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

// create UserAgentApplication instance
const userAgentApplication = new Msal.UserAgentApplication(config);

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

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

// App.module.ts
import { MsalModule } from '@azure/msal-angular';
@NgModule({
    imports: [
        MsalModule.forRoot({
            auth: {
                clientId: 'your_app_id'
            }
        })
    ]
})
export class AppModule { }

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')
);

Próximos passos

Passe para o próximo artigo neste cenário, Entrar e sair.

Partilhar via

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

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

Configuração do código do aplicativo

Próximos passos

Comentários

Recursos adicionais