Gestire l'autenticazione in App Web statiche
L'app Web per la lista della spesa necessita di un modo per identificare in modo univoco gli utenti e offrire loro uno spazio personale per memorizzare i prodotti.
L'autenticazione è il modo in cui si verifica l'identità di un utente che sta tentando di accedere a un sistema di informazioni. Verrà ora illustrata l'autenticazione e il modo in cui è possibile implementarla in App Web statiche di Azure.
Provider di identità
App Web statiche di Azure semplifica l'esperienza di autenticazione grazie alla gestione dell'autenticazione con i provider seguenti:
- Microsoft Entra ID
- GitHub
Tutti i provider di autenticazione sono abilitati per impostazione predefinita. Più avanti verrà illustrato come limitare un provider di autenticazione con una regola di route personalizzata.
Cartella di sistema
La cartella di sistema /.auth fornisce l'accesso a tutte le API correlate all'autenticazione. È possibile usare questi endpoint per implementare un flusso di lavoro di autenticazione completo nell'app, che include l'accesso e la disconnessione e l'accesso alle informazioni utente.
Account di accesso
La tabella seguente elenca la route di accesso specifica del provider che è possibile usare nell'app.
| Provider di identità | Route di accesso |
|---|---|
| Microsoft Entra ID | /.auth/login/aad |
| GitHub | /.auth/login/github |
/.auth/login/twitter |
Ad esempio, per accedere con GitHub, è possibile includere un collegamento di accesso nell'app Web con il frammento di codice seguente:
<a href="/.auth/login/github">Login</a>
Se si vuole che un utente torni a una pagina specifica dopo l'accesso, è anche possibile specificare un URL nel parametro della stringa di query post_login_redirect_uri. Ad esempio:
<a href="/.auth/login/github?post_login_redirect_uri=/products">Login</a>
Disconnessione
La route /.auth/logout disconnette gli utenti dall'app Web. È possibile aggiungere un collegamento all'esplorazione del sito per consentire all'utente di disconnettersi come illustrato nell'esempio seguente.
<a href="/.auth/logout">Log out</a>
Come per l'accesso, è possibile specificare un URL a cui reindirizzare dopo la disconnessione usando il parametro della stringa di query post_logout_redirect_uri:
<a href="/.auth/logout?post_logout_redirect_uri=/home">Log out</a>
Accedere alle informazioni dell'utente
È possibile accedere alle informazioni utente correlate all'autenticazione tramite un endpoint di accesso diretto o un'intestazione speciale nelle funzioni API.
Se si invia una richiesta GET alla route /.auth/me, si riceverà un oggetto JSON con i dati per l'utente attualmente connesso. Le richieste che provengono da utenti non autenticati restituiscono null.
Di seguito è riportato un oggetto di risposta di esempio.
{
"identityProvider": "github",
"userId": "d75b260a64504067bfc5b2905e3b8182",
"userDetails": "github-user-example",
"userRoles": [ "anonymous", "authenticated" ]
}
Funzioni API
Tutte le funzioni API disponibili in App Web statiche di Azure hanno accesso alle stesse informazioni utente dell'applicazione client. I dati utente vengono passati alle funzioni nell'intestazione HTTP x-ms-client-principal. I dati vengono serializzati come oggetto JSON e codificati in Base64.
La funzione di esempio seguente mostra come leggere e restituire informazioni utente.
module.exports = async function (context, req) {
const header = req.headers["x-ms-client-principal"];
const encoded = Buffer.from(header, "base64");
const decoded = encoded.toString("ascii");
context.res = {
body: {
userInfo: JSON.parse(decoded)
}
};
};
Passaggi successivi
Successivamente si implementerà un flusso di lavoro di autenticazione completo nell'app.