Configurare un proxy inverso per un'app a pagina singola che chiama l'API di autenticazione nativa usando l'app per le funzioni di Azure (anteprima)

Si applica a: cerchio bianco inquilini della forza lavoro inquilini esterni (ulteriori informazioni)

In questo articolo, spieghiamo come configurare un proxy inverso utilizzando Azure Functions App per gestire le intestazioni CORS in un ambiente di prova per un'applicazione a pagina singola che utilizza l'API di autenticazione nativa .

L'API di autenticazione nativa non supporta la condivisione di risorse tra le origini (CORS). Pertanto, un'applicazione a pagina singola (SPA) che utilizza questa API per l'autenticazione dell'utente non può inviare con successo richieste dal codice JavaScript del "front-end". Per risolvere questo problema, è necessario aggiungere un server proxy tra l'applicazione a pagina singola e l'API di autenticazione nativa. Questo server proxy inserisce le intestazioni CORS appropriate nella risposta.

Questa soluzione è a scopo di test e deve NON essere usata in un ambiente di produzione. Se si sta cercando una soluzione da usare in un ambiente di produzione, è consigliabile usare una soluzione Frontdoor di Azure, vedere le istruzioni in Usare Frontdoor di Azure come proxy inverso per gestire le intestazioni CORS per SPA nell'ambiente di produzione.

Prerequisiti

• Una sottoscrizione di Azure. Crea un account gratuitamente.
• Registrare Microsoft.App il provider di risorse, vedere Come registrare il provider di risorse. È necessario completare questo passaggio una sola volta per ogni sottoscrizione appena creata.
• Installare l'interfaccia della riga di comando per sviluppatori di Azure (azd).
• Un esempio di applicazione a pagina singola a cui è possibile accedere tramite un URL, ad esempio http://www.contoso.com:
  • È possibile usare l'app React descritta in Avvio rapido: Effettuare l'accesso per gli utenti in un'applicazione React SPA di esempio usando L'API di autenticazione nativa. Tuttavia, non configurare o eseguire il server proxy, come illustrato in questa guida.
  • Dopo aver eseguito l'app, registrare l'URL dell'app per usarlo in seguito in questa guida.

Creare un proxy inverso in un'app per funzioni di Azure usando il modello di Azure Developer CLI (azd)

1. Per inizializzare il modello azd, eseguire il comando seguente:

   azd init --template https://github.com/azure-samples/ms-identity-extid-cors-proxy-function
   

   Quando richiesto, immettere un nome per l'ambiente azd. Questo nome viene usato come prefisso per il gruppo di risorse in modo che sia univoco all'interno della sottoscrizione di Azure.

2. Per accedere ad Azure, eseguire il comando seguente:

   azd auth login
   

3. Per compilare, effettuare il provisioning e distribuire le risorse dell'app, eseguire il comando seguente:

   azd up
   

   Quando richiesto, immettere le informazioni seguenti per completare la creazione delle risorse:

   • Azure Location: La posizione di Azure in cui sono distribuite le risorse.
   • Azure Subscription: sottoscrizione di Azure in cui vengono distribuite le risorse.
   • corsAllowedOrigin: dominio di origine per consentire le richieste CORS nel formato SCHEME://DOMAIN:PORT, ad esempio http://localhost:3000.
   • tenantSubdomain: il sottodominio del vostro tenant esterno che stiamo proxyando. Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non hai il sottodominio del tuo tenant, scopri come leggere i dettagli del tuo tenant.

Testare l'applicazione a pagina singola di esempio con il proxy inverso

1. Nell'applicazione di esempio a pagina singola, apri il file API\React\ReactAuthSimple\src\config.ts e sostituisci:

   • valore di BASE_API_URL, http://localhost:3001/api, con https://Enter_App_Function_Name_Here.azurewebsites.net.
   • Il segnaposto Enter_App_Function_Name_Here con il nome della tua applicazione delle funzioni. Se necessario, rieseguire la SPA di esempio.

2. Passare all'URL spa di esempio, quindi testare i flussi di iscrizione, accesso e reimpostazione della password. L'app SPA dovrebbe funzionare correttamente poiché il proxy inverso gestisce correttamente le intestazioni CORS.

Contenuto correlato

• Usare Frontdoor di Azure come proxy inverso nell'ambiente di produzione per un'applicazione a pagina singola che usa l'autenticazione nativa.