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

Artigo
11/23/2024

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:

Mude o(s) URI(s) de redirecionamento de registro de aplicativo de plataforma Web para plataforma de aplicativo de página única.
Atualize seu código de MSAL.js 1.x para 2.x.
Desative a concessão implícita no registro do seu 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.

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 até Registros de aplicativosde identidade>, selecione seu aplicativo e, em seguida>
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 no bloco Plataforma de aplicativo de página única, mostrando 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 todos os seus aplicativos de produção que usam esse registro de aplicativo e sua ID de cliente para o 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 é 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 criando um aplicativo de página única (SPA) React que inicia sessão nos utilizadores na seguinte série de tutoriais com várias partes.

Partilhar via