Compartilhar via

Migrar um aplicativo de página única em JavaScript de concessão implícita para o fluxo de código de autorização

A Biblioteca de Autenticação da Microsoft para JavaScript (MSAL.js) v2.0 dá suporte para o fluxo do código de autorização com PKCE e CORS para aplicativos de página única na plataforma de identidade da Microsoft. Siga as etapas nas seções abaixo para migrar seu aplicativo MSAL.js 1.x usando a concessão implícita para MSAL.js 2.0+ (posteriormente 2.x) e o fluxo de código de autenticação.

A MSAL.js 2.x tem aprimoramentos em comparação com a MSAL.js 1.x, dando suporte ao fluxo do código de autorização no navegador em vez do fluxo de concessão implícita. MSAL.js 2.x não dá suporte ao fluxo implícito.

Executar etapas de migração

Para atualizar seu aplicativo para MSAL.js 2.x e o fluxo do código de autorização, há três etapas principais:

  1. Alterne o URI(s) de redirecionamento de registro do aplicativo da plataforma Web para a plataforma de aplicativo de página única .
  2. Atualize seu código de MSAL.js 1.x para 2.x.
  3. Desabilite a concessão implícita no registro do aplicativo quando todos os aplicativos que compartilham o registro tiverem sido atualizados para MSAL.js 2.x e o fluxo de código de autenticação.

As seções a seguir descrevem cada etapa com detalhes adicionais.

Alterne os URIs de redirecionamento para a plataforma SPA

Caso deseje continuar usando o registro de aplicativo existente para seus aplicativos, use o centro de administração do Microsoft Entra para atualizar os URIs de redirecionamento do registro para a plataforma SPA. Isso habilita o fluxo do código de autorização com suporte a PKCE e CORS para aplicativos que usam registro (você ainda precisa atualizar o código do aplicativo para MSAL.js v2.x).

Siga estas etapas para registros de aplicativo que estão atualmente configurados com URIs de redirecionamento da plataforma Web :

  1. Entre no Centro de administração do Microsoft Entra.

  2. Navegue até Entra ID>registros do aplicativo, selecione seu aplicativo e, em seguida, Autenticação.

  3. No bloco da plataforma Web em URIs de Redirecionamento, selecione o banner de aviso indicando que você deve migrar suas URIs.

    Banner de alerta de fluxo implícito no bloco do aplicativo Web no Centro de administração do Entra.

  4. Selecione apenas as URIs de redirecionamento cujos aplicativos usarão MSAL.js 2.x e selecione Configurar.

    Selecione o painel URI de redirecionamento no painel SPA no Centro de administração do Entra.

Essas URIs de redirecionamento agora devem aparecer no bloco da plataforma de aplicativo de página única , mostrando que o CORS é compatível com o fluxo de código de autorização e o PKCE está habilitado para essas URIs.

Bloco de aplicativo de página única no registro de aplicativo no portal do Azure

Atualize seu código para MSAL.js 2.x

No MSAL 1.x, você criou uma instância do aplicativo inicializando um UserAgentApplication da seguinte maneira:

// MSAL 1.x
import * as msal from "msal";

const msalInstance = new msal.UserAgentApplication(config);

No MSAL 2.x, inicialize em vez disso um [PublicClientApplication][msal-js-publicclientapplication]:

// MSAL 2.x
import * as msal from "@azure/msal-browser";

const msalInstance = new msal.PublicClientApplication(config);

Para obter alterações adicionais que talvez seja necessário fazer em seu código, consulte o guia de migração no GitHub.

Desabilitar as configurações de concessão implícita

Depois de atualizar todos os aplicativos de produção que usam esse registro de aplicativo e sua ID do cliente para MSAL 2.x e o fluxo de código de autorização, você deve desmarcar as configurações de concessão implícitas no menu Autenticação do registro do aplicativo.

Quando você desmarca as configurações de concessão implícita no registro do aplicativo, o fluxo implícito é desabilitado para todos os aplicativos que usam o registro e seu ID de cliente.

Não desabilite o fluxo de concessão implícita antes de atualizar todos os seus aplicativos para MSAL.js 2.x e [PublicClientApplication][msal-js-publicclientapplication].

Próximas etapas

  • Last updated on