Best practice per le autorizzazioni web

Marian Harbach

Thomas Steiner

Le richieste di autorizzazione sono il meccanismo principale del web per proteggere gli utenti da funzionalità potenti che potrebbero essere pericolose per la loro privacy e sicurezza. I browser mirano a confermare che un utente intende consentire una funzionalità su un sito web specifico. Puoi implementare le autorizzazioni per una serie di API, tra cui acquisizione multimediale (fotocamera e microfono), geolocalizzazione, accesso allo spazio di archiviazione, MIDI e notifiche.

Segui queste pratiche quando mostri le richieste di autorizzazione agli utenti, in base alle statistiche di utilizzo di Chrome e alla ricerca sugli utenti. Se seguite, gli utenti dovrebbero incontrare meno richieste non necessarie, il che porta a un minor numero di decisioni di blocco.

Questo documento termina con alcuni pattern di codice per le API protette da autorizzazioni e su come aiutare gli utenti a recuperare da uno stato bloccato.

Best practice per la creazione di prompt

Chiedi l'autorizzazione dopo un'interazione dell'utente, quando gli utenti hanno il contesto per capire perché stai chiedendo l'autorizzazione e quali vantaggi ottengono se la concedono.

Se possibile, fornisci mezzi alternativi per svolgere la stessa attività. Se scegli con attenzione il momento giusto per chiedere, riduci le probabilità che i tuoi utenti si trovino in uno stato di blocco da cui è difficile riprendersi.

Non chiedere mai al caricamento pagina o senza interazione utente

Chiedere l'autorizzazione durante il caricamento della pagina equivale a chiedere a un cliente informazioni sensibili quando entra in un negozio fisico. Visualizzare una richiesta di autorizzazione, magari tra diverse altre richieste di iscrizione alla newsletter e consenso all'utilizzo dei cookie, è un'esperienza spiacevole. Gli utenti non capiranno perché viene chiesto loro e quali vantaggi ne trarranno.

Anche se la tua applicazione web non può funzionare senza accedere a una determinata funzionalità, dai agli utenti la possibilità di capire perché è necessaria. Ad esempio, introduci la richiesta di autorizzazione spiegando perché è necessaria e offri agli utenti una scelta (ad esempio, fornendo mezzi alternativi per ottenere la stessa funzionalità). Se non riesci a trovare un momento migliore per chiedere l'autorizzazione rispetto al caricamento della pagina, in questa guida troverai alcuni esempi.

Chiedere l'autorizzazione senza interazione utente precedente è anche inefficace. Questo è noto come attivazione utente temporanea. La telemetria di Chrome mostra che il 77% delle richieste di autorizzazione sul computer vengono mostrate senza un segnale dell'intenzione dell'utente e, di conseguenza, solo il 12% di queste richieste viene consentito. Dopo un'interazione utente, i tassi di autorizzazione aumentano al 30%.

Chiedi l'autorizzazione solo dopo che l'utente ha interagito con la pagina.

Chiedi solo quando gli utenti possono capire il motivo

Le decisioni relative alle autorizzazioni sono spesso decisioni relative alla privacy. In base al framework di integrità contestuale, sappiamo che le decisioni in materia di privacy sono altamente contestuali. È fondamentale capire perché l'accesso è necessario. Devi richiedere solo le funzionalità necessarie per fornire valore, in cui gli utenti probabilmente concorderanno di trovare valore. Inoltre, chiedi l'autorizzazione quando per l'utente è evidente perché la funzionalità è utile. Consenti agli utenti di comprendere più facilmente il contesto di utilizzo.

La nostra ricerca sugli utenti mostra che gli utenti sono molto più propensi a consentire l'accesso quando capiscono perché un sito lo richiede e percepiscono anche un vantaggio. Inoltre, abbiamo notato che gli utenti preferiscono esplorare prima i siti sconosciuti per capire meglio il valore che possono ottenere in cambio dell'accesso. Nel frattempo, spesso rifiutano o ignorano le richieste di autorizzazione. Con le autorizzazioni una tantum, potrebbero consentire prima una singola visita. Supporta questi comportamenti nella tua applicazione.

Fornire alternative

Il risultato di alcune funzionalità potrebbe non essere utile agli utenti. Ad esempio, la geolocalizzazione di un dispositivo desktop senza sensore GPS potrebbe restituire la posizione errata perché la persona è connessa a una VPN. Altri utenti potrebbero non voler fornire l'accesso agli appunti perché preferiscono mantenere il controllo e attivare manualmente questi eventi con combinazioni di tasti. In queste situazioni, fornisci un modo alternativo per ottenere gli stessi risultati.

Ad esempio, se richiedi l'autorizzazione alla geolocalizzazione, offri un campo di testo in cui gli utenti possono inserire un codice postale o un indirizzo. Consente di selezionare e copiare gli elementi negli appunti con una scorciatoia da tastiera o il menu contestuale. Per le notifiche, offri l'email anziché le notifiche push.

Un pattern utile è utilizzare l'interfaccia utente alternativa anche come spiegazione del motivo per cui l'accesso potrebbe essere vantaggioso. Gli utenti che vedono un'opzione per inserire una posizione accanto a un pulsante che attiva l'API di geolocalizzazione si sentono in controllo, perché capiscono di poter digitare il proprio indirizzo. Allo stesso modo, se c'è una scelta tra ricevere notifiche tramite push o email o partecipare a una riunione senza consentire l'accesso alla videocamera e al microfono, gli utenti comprendono i compromessi.

Evitare gli stati bloccati

Una volta che un utente ha negato definitivamente l'accesso a una funzionalità protetta da autorizzazioni, i browser rispettano questa decisione. Se fosse possibile continuare a richiedere l'accesso, i siti dannosi bombarderebbero gli utenti con richieste. Il recupero dallo stato di blocco di una funzionalità richiede intenzionalmente impegno. Evita di chiedere l'autorizzazione in situazioni in cui è improbabile che gli utenti consentano l'accesso.

Un modo comune per farlo è utilizzare un cosiddetto pre-prompt, in cui spieghi agli utenti cosa sta per accadere e perché la tua applicazione ha bisogno della funzionalità che stai per richiedere. Solo quando gli utenti reagiscono in modo affermativo a un pre-prompt di questo tipo, devi attivare la richiesta di autorizzazione del browser. Esistono situazioni in cui gli utenti potrebbero legittimamente aver bisogno di ripristinare questo stato. Per saperne di più, consulta la sezione Aiutare gli utenti a ripristinare uno stato di blocco.

Presta attenzione ai contenuti di terze parti

Fai attenzione alle origini inattese delle richieste di autorizzazione. Gli script di terze parti sul tuo sito potrebbero attivare richieste di autorizzazione non intenzionali. Ciò può influire sull'esperienza utente, soprattutto se le richieste non seguono le best practice. Per mantenere il controllo dell'esperienza utente, leggi la documentazione di tutte le librerie e gli script di terze parti che aggiungi al tuo codice.

Quando richiedere l'autorizzazione

Ecco alcuni esempi di momenti in cui è opportuno chiedere l'autorizzazione, seguendo le best practice:

• Dopo che un utente fa clic su Usa la mia posizione accanto a un campo del modulo, quando inserisce manualmente un indirizzo.
• Dopo che un utente si è iscritto a un canale video o a un post e ha fatto clic su un pulsante di conferma in una finestra di dialogo che descrive che gli aggiornamenti possono essere inviati come email o notifiche.
• Dopo che un utente arriva a una pagina che lo prepara a partecipare a una videochiamata e risponde in modo affermativo a una richiesta preliminare in cui dichiara di voler essere visto e ascoltato. Scopri di più nel case study di Google Meet.

Pattern di codice

L'autorizzazione all'utilizzo di un'API viene concessa in modi diversi, a seconda dell'API. Alcune API meno recenti 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 chiami navigator.geolocation.getCurrentPosition().

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

Altre API utilizzano un modello in cui richiedi esplicitamente l'autorizzazione prima con 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.

Alcuni browser concedono automaticamente l'autorizzazione per determinate API. Ad esempio, Chrome consente sempre l'accesso all'orientamento del dispositivo, mentre Safari mostra un prompt.

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. */
}

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 uscire da uno stato di blocco

Per aiutare gli utenti a risolvere i problemi di accesso, rilevare che hanno bloccato l'accesso utilizzando l'API Permissions e offrire una guida su come modificare le impostazioni. Quando gli utenti interagiscono con gli elementi dell'interfaccia utente associati a una funzionalità con autorizzazioni controllate, utilizza lo stato di controllo delle autorizzazioni 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 offri descrizioni corrispondenti in base alla stringa user agent per i browser di uso comune.

In Chrome, gli utenti possono modificare le autorizzazioni da Visualizza informazioni sul sito > Impostazioni sito, che si trova nella barra degli indirizzi. In alcuni casi, potrebbero dover ricaricare la pagina prima di utilizzare una funzionalità. In questo caso, nella parte superiore della finestra viene visualizzata una barra dei messaggi che offre di ricaricare il sito.

Interfacce utente simili per il controllo delle autorizzazioni sono presenti in altri browser, ad esempio in Firefox.