Inicialize as aplicações do cliente utilizando MSAL.js

Este artigo descreve a inicialização da Biblioteca de Autenticação do Microsoft para o JavaScript (MSAL.js) com uma instância de uma aplicação de agente de utilizador.

A aplicação de agente de utilizador é uma forma de aplicação de cliente público na qual o código do cliente é executado num agente de utilizador, como um navegador web. Estes clientes não armazenam segredos porque o contexto do navegador é abertamente acessível.

Para saber mais sobre os tipos de aplicações do cliente e opções de configuração de aplicações, consulte aplicações de clientes públicos e confidenciais no MSAL.

Pré-requisitos

Antes de rubricar uma aplicação, primeiro precisa de a registar no portal Azure, estabelecendo uma relação de confiança entre a sua aplicação e a plataforma de identidade microsoft.

Depois de registar a sua aplicação, vai precisar de alguns ou todos os seguintes valores que podem ser encontrados no portal Azure.

Valor Obrigatório Descrição
ID da Aplicação (cliente) Necessário Um GUID que identifica exclusivamente a sua aplicação dentro da plataforma de identidade da Microsoft.
Autoridade Opcional O URL do fornecedor de identidade (o caso) e o público de inscrição para a sua aplicação. O caso e o público de inscrição, quando concatenated, compõem a autoridade.
ID do Diretório (inquilino) Opcional Especifique isto se estiver a construir uma aplicação de linha de negócio exclusivamente para a sua organização, muitas vezes referida como uma aplicação de um único inquilino.
URI de Redirecionamento Opcional Se estiver a construir uma aplicação web, redirectUri especifica onde o fornecedor de identidade (a plataforma de identidade da Microsoft) deve devolver os fichas de segurança que emitiu.

Inicialize MSAL.js aplicações 2.x

Inicialize o contexto de autenticação MSAL instantaneamente através da instantiação de uma Aplicação PublicClientApplication com um objeto de Configuração. A propriedade de configuração mínima exigida é a clientID da sua aplicação, mostrada como o ID da Aplicação (cliente) na página geral do registo da aplicação no portal Azure.

Aqui está um objeto de configuração de exemplo e instantâneo de um PublicClientApplication :

const msalConfig = {
    auth: {
        clientId: "11111111-1111-1111-111111111111",
        authority: "https://login.microsoftonline.com/common",
        knownAuthorities: [],
        redirectUri: "https://localhost:3001",
        postLogoutRedirectUri: "https://localhost:3001/logout",
        navigateToLoginRequestUrl: true
    },
    cache: {
        cacheLocation: "sessionStorage",
        storeAuthStateInCookie: false
    },
    system: {
        loggerOptions: {
            loggerCallback: (level: LogLevel, message: string, containsPii: boolean): void => {
                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;
                }
            },
            piiLoggingEnabled: false
        },
        windowHashTimeout: 60000,
        iframeHashTimeout: 6000,
        loadFrameTimeout: 0
    }
};

// Create an instance of PublicClientApplication
const msalInstance = new PublicClientApplication(msalConfig);

// Handle the redirect flows
msalInstance.handleRedirectPromise().then((tokenResponse) => {
    // Handle redirect response
}).catch((error) => {
    // Handle redirect error
});

handleRedirectPromise

Invoque o handleRedirectPromise quando a sua aplicação utilizar os fluxos de redirecionamento. Ao utilizar os fluxos de redireccionamento, handleRedirectPromise deve ser executado em cada carga de página.

Há três resultados possíveis da promessa:

  • .then é invocado e tokenResponse é verdade: A aplicação está a regressar de uma operação de redirecionamento que foi bem sucedida.
  • .then é invocado e tokenResponse é falsidade null (): O pedido não regressa de uma operação de redireccionamento.
  • .catch é invocado: A aplicação está a regressar de uma operação de redirecionamento e houve um erro.

Inicialize MSAL.js aplicações 1.x

Inicialize o contexto de autenticação MSAL 1.x instantaneamente através da instantânea aplicação do UserAgentApplication com um objeto de configuração. A propriedade de configuração mínima exigida é a clientID da sua aplicação, mostrada como o ID da Aplicação (cliente) na página geral do registo da aplicação no portal Azure.

Para métodos de autenticação com fluxos de redireccionamento(loginRedirect e adquirirTokenRedirect)em MSAL.js 1.2.x ou mais cedo, deve registar explicitamente uma chamada de retorno para sucesso ou erro através do handleRedirectCallback() método. O registo explícito da chamada é necessário em MSAL.js 1.2.x e mais cedo porque os fluxos de redirecionamento não devolvem promessas como os métodos com uma experiência pop-up fazem. Registar a chamada é opcional na versão 1.3.x MSAL.js e posterior.

// Configuration object constructed
const msalConfig = {
    auth: {
        clientId: "11111111-1111-1111-111111111111"
    }
}

// Create UserAgentApplication instance
const msalInstance = new UserAgentApplication(msalConfig);

function authCallback(error, response) {
    // Handle redirect response
}

// Register a redirect callback for Success or Error (when using redirect methods)
// **REQUIRED** in MSAL.js 1.2.x and earlier
// **OPTIONAL** in MSAL.js 1.3.x and later
msalInstance.handleRedirectCallback(authCallback);

Instância única e configuração

Ambos MSAL.js 1.x e 2.x são projetados para ter uma única instância e configuração do UserAgentApplication PublicClientApplication ou, respectivamente, para representar um único contexto de autenticação.

Várias instâncias de UserAgentApplication ou PublicClientApplication não são recomendadas, uma vez que causam entradas e comportamentos de cache conflituosos no navegador.

Passos seguintes

Esta MSAL.js amostra de código de 2.x no GitHub demonstra a instantiação de uma Aplicação deClient Público com um objeto de configuração:

Azure-Samples/ms-identidade-javascript-v2