Best practice per le autorizzazioni web

Marian Harbach

Thomas Steiner

Le richieste di autorizzazione sono il meccanismo principale del web di proteggere funzionalità potenti che sono potenzialmente pericolose per la privacy e la sicurezza degli utenti. Con le richieste di autorizzazione, i browser mirano a garantire che un utente intenda consentire al sito web richiedente di accedere alla funzionalità in questione. Le richieste di autorizzazione vengono utilizzate per un numero di API, tra cui l'acquisizione di contenuti multimediali (fotocamera e microfono), la geolocalizzazione, l'accesso allo spazio di archiviazione, MIDI e le notifiche (consulta la documentazione dell'API Permissions su MDN per ulteriori informazioni).

Questa guida illustra le best practice per mostrare richieste di autorizzazione agli utenti basate su statistiche sull'utilizzo di Chrome e ricerche sugli utenti. Se segui queste best practice, gli utenti dovrebbero visualizzare meno richieste non necessarie, il che significa che gli sviluppatori riceveranno meno decisioni di blocco. L'articolo termina con alcuni pattern di codice per lavorare con le API basate su autorizzazione e con le best practice per aiutare gli utenti a eseguire il ripristino da uno stato bloccato.

Best practice per i prompt

Devi chiedere l'autorizzazione dopo un'interazione da parte di un utente, in un momento in cui gli utenti possono capire perché lo stai chiedendo e quali vantaggi otterranno se la visualizzi. Se possibile, devi consentire agli utenti di utilizzare un mezzo alternativo per ottenere la stessa funzionalità. Come linea guida generale, chiedere l'autorizzazione meno frequentemente scegliendo con attenzione i momenti in cui chiederla riduce le probabilità che gli utenti entrino in uno stato bloccato da cui è difficile uscire. Le seguenti best practice forniscono maggiori dettagli su ciascuno di questi suggerimenti.

Non chiedere mai al caricamento della pagina o senza interazione dell'utente

Chiedere agli utenti l'autorizzazione durante il caricamento pagina equivale a chiedere a un cliente un'informazione sensibile quando si trova in un negozio fisico. Vedere una richiesta di autorizzazione (magari tra diverse altre richieste per l'iscrizione alla newsletter e il consenso per l'uso dei cookie) è un'esperienza molto spiacevole. Gli utenti non capiranno perché viene loro chiesto e quali vantaggi ne trarranno.

Anche se la tua applicazione web non può funzionare senza l'accesso a una determinata funzionalità, devi dare agli utenti la possibilità di capire perché è necessaria. Ad esempio, precedendo la richiesta di autorizzazione con una tua richiesta che spiega la necessità e offre agli utenti una scelta (ad esempio, se possibile, fornendo mezzi alternativi per ottenere la stessa funzionalità). Se non riesci a pensare a un momento migliore per chiedere l'autorizzazione rispetto al caricamento della pagina, di seguito sono riportati alcuni esempi.

Una situazione simile è chiedere l'autorizzazione senza un'interazione precedente dell'utente (nota anche come attivazione temporanea dell'utente). La telemetria di Chrome mostra che il 77% delle richieste di autorizzazione su Chrome per desktop viene visualizzato senza un segnale molto basilare dell'intenzione dell'utente e, di conseguenza, solo il 12% di queste richieste viene consentito. Dopo un'interazione dell'utente, i tassi di autorizzazione aumentano al 30%. Pertanto, chiedi l'autorizzazione solo dopo che l'utente ha interagito con la pagina in qualche modo.

Chiedi solo quando gli utenti possono capire perché lo fai

Le decisioni relative alle autorizzazioni sono spesso decisioni sulla privacy. In base al framework di integrità contestuale, sappiamo che le decisioni sulla privacy sono altamente contestuali. Capire perché è necessario un accesso può essere considerato un aspetto chiave. Pertanto, devi richiedere solo le funzionalità necessarie per offrire valore agli utenti (e per le quali gli utenti sono propensi a concordare con te sul fatto che riceveranno effettivamente valore). Inoltre, devi chiedere l'autorizzazione in un momento in cui è evidente per l'utente il motivo per cui la funzionalità è utile. L'obiettivo è semplificare al massimo la comprensione del contesto di utilizzo da parte degli utenti.

La nostra ricerca sugli utenti dimostra che gli utenti sono molto più propensi a consentire l'accesso quando capiscono perché un sito lo richiede e percepiscono anche un vantaggio. Abbiamo inoltre scoperto che gli utenti si aspettano di esplorare prima siti che non conoscono per capire meglio il valore che possono ottenere in cambio di un accesso. Nel frattempo, spesso ignorano o rifiutano le richieste di autorizzazione. Con le autorizzazioni una tantum, potrebbero consentire inizialmente una singola visita. L'applicazione deve supportare questi comportamenti.

Fornire mezzi alternativi per svolgere la stessa funzionalità, ove possibile

Il risultato di alcune funzionalità potrebbe non essere utile per gli utenti. Ad esempio, la geolocalizzazione di un computer senza un sensore GPS potrebbe restituire la posizione sbagliata perché la persona è connessa a una VPN. Altri utenti potrebbero non voler fornire accesso alla clipboard perché preferiscono mantenere il controllo e attivare manualmente questi eventi con combinazioni di tasti. In situazioni come queste, è importante fornire un mezzo alternativo per ottenere gli stessi risultati. Ad esempio, se richiedi l'autorizzazione di geolocalizzazione, offri un campo di testo in cui gli utenti possono inserire autonomamente un codice postale o un indirizzo. Con gli appunti, assicurati che gli elementi da copiare possano essere selezionati e copiati anche tramite una combinazione di tasti o il menu contestuale. Con le notifiche, offri la possibilità di ricevere email instead of push notifications.

Un pattern utile è utilizzare l'interfaccia utente alternativa anche per spiegare perché l'accesso potrebbe essere utile. Gli utenti che vedono un'opzione per inserire una località accanto a un pulsante che attiva l'API di geolocalizzazione avranno il controllo su ciò che sta accadendo, perché sanno che possono anche digitare il proprio indirizzo. Analogamente, se è possibile scegliere tra ricevere notifiche tramite push o email o partecipare a una riunione senza consentire l'accesso a videocamera e microfono, gli utenti comprendono più facilmente i compromessi che stanno facendo.

Non entrare in uno stato bloccato, è difficile risolvere il problema da

Una volta che un utente ha deciso di non consentire definitivamente l'accesso a una funzionalità soggetta a autorizzazione, i browser rispettano questa decisione. Se fosse possibile continuare a richiedere l'accesso, i siti malintenzionati continuerebbero a bombardare gli utenti con richieste. Pertanto, il recupero dallo stato bloccato di una funzionalità richiede intenzionalmente un po' di impegno da parte dell'utente. Di conseguenza, evita di chiedere l'autorizzazione agli utenti in situazioni in cui è probabile che molti utenti non consentano l'accesso.

Un modo comune per farlo è utilizzare una cosiddetta richiesta precedente, in cui spieghi ai tuoi utenti cosa sta per succedere e perché la tua applicazione ha bisogno della funzionalità che stai per richiedere. Solo quando gli utenti reagiscono in modo affermativo a questo pre-prompt, devi attivare la richiesta di autorizzazione del browser. Esistono situazioni in cui gli utenti potrebbero dover recuperare legittimamente da questo stato. Per saperne di più, consulta la sezione Aiutare gli utenti a recuperare da uno stato bloccato.

Presta attenzione ai contenuti di terze parti

Devi essere a conoscenza di una fonte imprevista di richieste di autorizzazione. Se includi script di terze parti sul tuo sito, potrebbero essere attivati prompt di autorizzazione che non intendevi mostrare. Ciò può influire sull'esperienza degli utenti sul tuo sito web, soprattutto se queste richieste non rispettano le best practice già descritte. Per mantenere il controllo sulle esperienze degli utenti, devi leggere attentamente la documentazione di eventuali librerie e script di terze parti che aggiungi al tuo codice.

Quando chiedere l'autorizzazione

Ecco alcuni esempi di momenti che si prestano bene per chiedere l'autorizzazione, in base alle best practice già descritte:

• Dopo che un utente fa clic su un pulsante "Usa la mia posizione" accanto a un campo del modulo per inserire un indirizzo manualmente.
• Dopo che un utente si è iscritto a un canale video o a dei post e ha fatto clic su un pulsante di conferma in una finestra di dialogo che spiega che gli aggiornamenti potrebbero essere inviati come email o notifiche sul suo smartphone o computer.
• Dopo che un utente arriva a una pagina che lo prepara a partecipare a una videochiamata e risponde affermativamente a un prompt precedente che chiede se vuole essere visto e ascoltato (consulta questo case study di Google Meet).

Pattern di codice per la richiesta di autorizzazione

L'autorizzazione per l'utilizzo di un'API avviene in modi diversi, a seconda dell'API. Alcune API (in genere più vecchie) utilizzano un modello in cui il browser chiede automaticamente l'autorizzazione la prima volta che provi a utilizzare l'API. Un esempio è l'API Geolocation quando viene chiamata navigator.geolocation.getCurrentPosition().

try {
  navigator.geolocation.getCurrentPosition((pos) => console.log(pos));
} catch (error) {
  console.error(error);
}

Altre API utilizzano un modello in cui devi prima richiedere esplicitamente l'autorizzazione utilizzando un metodo statico. Un buon esempio è Notification.requestPermission() per consentire le notifiche o il meno comune DeviceOrientationEvent.requestPermission(), che fa parte dell'API Device Orientation Events. Tieni presente che alcuni browser potrebbero concedere automaticamente l'autorizzazione a determinate API. Ad esempio, Chrome consente sempre di accedere all'orientamento di un dispositivo, mentre Safari mostra una richiesta.

const result = await DeviceOrientationEvent.requestPermission();
console.log(`The user's decision when prompted to use the Device Orientation
Events API was: ${result}.`);
if (result === 'granted') {
  /* Use the API. */
}

Come controllare lo stato delle autorizzazioni

Per verificare se puoi utilizzare una determinata API, utilizza il metodo navigator.permissions.query() dell'API Permissions.

const result = await navigator.permissions.query({ name: 'geolocation' });
console.log(`The result of querying for the Geolocation API is:
${result.state}.`);
if (result.state === 'granted') {
  // Use the API.
}

Aiutare gli utenti a recuperare da uno stato bloccato

Per aiutare gli utenti a risolvere i problemi di accesso, rileva se hanno bloccato l'accesso utilizzando l'API Permissions e offri loro una guida su come modificare le impostazioni. Ad esempio, quando gli utenti interagiscono con elementi dell'interfaccia utente associati a una funzionalità basata sulle autorizzazioni, utilizza il pattern descritto nella sezione precedente e apri una finestra di dialogo per la risoluzione dei problemi. I passaggi esatti per modificare lo stato dell'autorizzazione variano in base al browser, pertanto ti consigliamo di offrire descrizioni corrispondenti in base alla stringa dello user agent e ai browser più utilizzati nel tuo prodotto.

In Chrome, gli utenti devono accedere a Controlli del sito facendo clic sull'icona "Ottimizza" sul lato sinistro della barra degli indirizzi. Qui possono attivare la rispettiva autorizzazione. In alcuni casi, potrebbe essere necessario ricaricare la pagina prima di utilizzare la funzionalità. In questo caso, nella parte superiore della finestra viene visualizzata una barra dei messaggi che offre la possibilità di ricaricare facendo clic sul rispettivo pulsante.

UI simili per il controllo delle autorizzazioni esistono in altri browser (ad esempio, scopri come funziona in Firefox).