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

Artigo
03/05/2025

A Biblioteca de Autenticação da Microsoft para JavaScript (MSAL.js) v2.0 traz suporte para o fluxo de 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+ (doravante 2.x) e o fluxo de código de autenticação.

MSAL.js 2.x melhora o MSAL.js 1.x suportando o fluxo de código de autorização no navegador em vez do fluxo de concessão implícito. MSAL.js 2.x NÃO suporta o fluxo implícito.

Passos da Migração

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

Altere o URI de redirecionamento do registo da sua aplicação da plataforma Web para a plataforma de aplicação de página única.
Atualize seu código de MSAL.js 1.x para 2.x.
Desative a concessão implícita no registo do seu aplicativo quando todos os aplicativos que partilham o registo 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.

Alternar URIs de redirecionamento para a plataforma SPA

Se você quiser continuar usando seu 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 permite o fluxo de código de autorização com suporte a PKCE e CORS para aplicativos que usam o registro (você ainda precisa atualizar o código do aplicativo para MSAL.js v2.x).

Siga estas etapas para registros de aplicativos atualmente configurados com URIs de redirecionamento de plataforma Web :

Inicie sessão no centro de administração do Microsoft Entra.
Navegue para Identidade, Aplicações, Registos de Aplicações. Selecione a sua aplicação e, em seguida, Autenticação.
No bloco Plataforma Web, em Redirecionar URIs, selecione o banner de aviso indicando que você deve migrar seus URIs.
Selecione apenas os URIs de redirecionamento cujos aplicativos usarão o MSAL.js 2.x e, em seguida, selecione Configurar.

Esses URIs de redirecionamento agora devem aparecer na seção de plataforma Aplicação de página única, indicando que o suporte a CORS com o fluxo de código de autorização e PKCE está habilitado para esses URIs.

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

Você também pode criar um novo registro de aplicativo em vez de atualizar os URIs de redirecionamento em seu registro existente.

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

No MSAL 1.x, você criou uma instância de 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 alterações adicionais que você pode precisar fazer em seu código, consulte o guia de migração no GitHub.

Desativar configurações de concessão implícitas

Depois de atualizar todas as suas aplicações de produção que usam este registo de aplicação e a sua ID de cliente para o MSAL 2.x e o fluxo de código de autorização, você deve desmarcar as definições de concessão implícita no menu Autenticação do registo da aplicação.

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

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

Próximos passos

Para saber mais sobre o fluxo de código de autorização, incluindo as diferenças entre os fluxos de código implícito e de autenticação, consulte a plataforma de identidade da Microsoft e o fluxo de código de autorização do OAuth 2.0.
Saiba mais desenvolvendo uma aplicação de página única (SPA) em React que permite aos utilizadores iniciar sessão na seguinte série de tutoriais dividida em várias partes.

Partilhar via