Condividi tramite


Accesso alle informazioni utente in App Web statiche di Azure

App Web statiche di Azure fornisce informazioni sull'utente correlate all'autenticazione tramite un endpoint di accesso diretto e a funzioni API.

Molte interfacce utente si basano principalmente sui dati di autenticazione utente. L'endpoint di accesso diretto è un'API di utilità che espone informazioni utente senza dover implementare una funzione personalizzata. Senza considerare la praticità, l'endpoint di accesso diretto non è soggetto a ritardi di avvio a freddo associati all'architettura serverless.

Questo articolo illustra come leggere le informazioni utente da un'applicazione distribuita. Per leggere le informazioni utente emulate durante lo sviluppo locale, vedere Emulazione dell'autorizzazione e dell'autenticazione.

Dati principali del client

L'oggetto dati principale del client espone le informazioni identificabili dall'utente all'app. L'oggetto principale del client presenta le seguenti proprietà:

Proprietà Descrizione
identityProvider Nome del provider di identità.
userId Identificatore univoco specifico di App Web statiche di Azure per l'utente.
  • Il valore è univoco in base alla singola app. Ad esempio, lo stesso utente restituisce un valore userId diverso in un'altra risorsa di App Web statiche.
  • Il valore persiste per l'esistenza di un utente. Se si elimina e si aggiunge di nuovo lo stesso utente all'app, viene generato un nuovo userId.
userDetails Nome utente o indirizzo di posta elettronica dell'utente. Alcuni provider restituiscono l'indirizzo di posta elettronica dell'utente, mentre altri inviano il nome utente.
userRoles Matrice dei ruoli assegnati dell'utente.
claims Elenco di attestazioni restituite dal tuo provider di autenticazione personalizzato. Accessibile solo nell'endpoint di accesso diretto.

L'esempio seguente si riferisce a un oggetto principale del client.

{
  "identityProvider": "github",
  "userId": "abcd12345abcd012345abcdef0123450",
  "userDetails": "username",
  "userRoles": ["anonymous", "authenticated"],
  "claims": [{
    "typ": "name",
    "val": "Azure Static Web Apps"
  }]
}

Endpoint di accesso diretto

È possibile inviare una richiesta GET alla route /.auth/me e ricevere l'accesso diretto ai dati del client principale. Quando lo stato della visualizzazione si basa sui dati di autorizzazione, questo approccio garantisce prestazioni ottimali.

Per gli utenti connessi, la risposta contiene un oggetto JSON del principale client. Le richieste che provengono da utenti non autenticati restituiscono null.

È possibile accedere ai dati principali del client usando l'API fetch1 con la sintassi seguente.

async function getUserInfo() {
  const response = await fetch('/.auth/me');
  const payload = await response.json();
  const { clientPrincipal } = payload;
  return clientPrincipal;
}

(async () => {
console.log(await getUserInfo());
})();

Funzioni API

Le funzioni API disponibili in App Web statiche tramite il back-end di Funzioni di Azure hanno accesso alle stesse informazioni utente di un'applicazione client, ad eccezione della matrice claims. Anche se l'API riceve informazioni identificabili dall'utente, non esegue controlli propri se l'utente è autenticato o se corrisponde a un ruolo obbligatorio. Le regole di controllo di accesso vengono definite nel file staticwebapp.config.json.

I dati principali del client vengono passati alle funzioni API nell'intestazione della richiesta x-ms-client-principal. I dati principali del client vengono inviati come stringa con codifica Base64 che contiene un oggetto JSON serializzato.

La funzione di esempio seguente mostra come leggere e restituire informazioni utente.

module.exports = async function (context, req) {
  const header = req.headers.get('x-ms-client-principal');
  const encoded = Buffer.from(header, 'base64');
  const decoded = encoded.toString('ascii');

  context.res = {
    body: {
      clientPrincipal: JSON.parse(decoded),
    },
  };
};

Presupponendo che la funzione sopra indicata sia denominata user, è possibile usare l'API fetch1 del browser per accedere alla risposta dell'API con la sintassi seguente.

async function getUser() {
  const response = await fetch('/api/user');
  const payload = await response.json();
  const { clientPrincipal } = payload;
  return clientPrincipal;
}

console.log(await getUser());

Quando un utente è connesso, l'intestazione x-ms-client-principal viene aggiunta alle richieste di informazioni utente tramite i nodi perimetrali di App Web statiche.

Nota

L'intestazione x-ms-client-principal accessibile nella funzione API non contiene la matrice claims.

1 L'API fetch e l'operatore await non sono supportati in Internet Explorer.

Passaggi successivi