Compartilhar via


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

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 aos locatários da força de trabalho. Locatários da força de trabalho (saiba mais)

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

Pré-requisitos

Bibliotecas da Microsoft que dão suporte a aplicativos de página única

As seguintes bibliotecas da Microsoft dão suporte a aplicativos de página única:

Idioma / estrutura Projeto em
GitHub
Pacote Introdução
.
Conectar usuários Acessar APIs da Web
Reagir MSAL React2 msal-react Início Rápido A biblioteca pode solicitar tokens de ID para entrada do usuário. A biblioteca pode solicitar tokens de acesso para APIs da Web protegidas.
JavaScript MSAL.js2 msal-browser Início Rápido A biblioteca pode solicitar tokens de ID para entrada do usuário. A biblioteca pode solicitar tokens de acesso para APIs da Web protegidas.
Angular MSAL Angular2 msal-angular Início Rápido A biblioteca pode solicitar tokens de ID para entrada do usuário. A biblioteca pode solicitar tokens de acesso para APIs da Web protegidas.

Configuração de código do aplicativo

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

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

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

Próxima etapa