L'API Contact Picker offre agli utenti un modo semplice per condividere i contatti dal loro elenco contatti.
Che cos'è l'API Contact Picker?
L'accesso ai contatti dell'utente su un dispositivo mobile è una funzionalità delle app iOS/Android sin dagli albori. È una delle richieste di funzionalità più comuni che ricevo dagli sviluppatori web ed è spesso il motivo principale per cui creano un'app per iOS/Android.
Disponibile a partire da Chrome 80 su Android M o versioni successive, la specifica dell'API Contact Selecter è un'API on demand che consente agli utenti di selezionare le voci dal proprio elenco contatti e di condividere dettagli limitati delle voci selezionate con un sito web. Consente agli utenti di condividere solo ciò che vogliono, quando vogliono, e permette di raggiungere più facilmente amici e familiari e restare in contatto con loro.
Ad esempio, un client di posta basato sul web potrebbe utilizzare l'API Contact Picker per selezionare i destinatari di un'email. Un'app VoIP potrebbe cercare il numero di telefono da chiamare. In alternativa, un social network potrebbe aiutare un utente a scoprire quali amici hanno già aderito.
Utilizzo dell'API Contact Picker
L'API Contact Picker richiede una chiamata al metodo con un parametro options che specifica i tipi di dati di contatto che ti interessano. Un secondo metodo ti dice quali informazioni fornirà il sistema di base.
Rilevamento di funzionalità
Per verificare se l'API Contact Picker è supportata, utilizza:
const supported = ('contacts' in navigator && 'ContactsManager' in window);
Inoltre, su Android, il selettore di contatti richiede Android M o versioni successive.
Apertura del selettore contatti
Il punto di contatto dell'API Contact Picker è navigator.contacts.select()
.
Quando viene chiamato, restituisce una promessa e mostra il selettore dei contatti, consentendo all'utente di selezionare i contatti che vuole condividere con il sito. Dopo
aver selezionato cosa condividere e aver fatto clic su Fine, la promessa viene risolta con un
array di contatti selezionati dall'utente.
Quando chiami select()
, devi fornire un array di proprietà che vuoi
che vengano restituite come primo parametro (i valori consentiti sono
'name'
, 'email'
, 'tel'
, 'address'
o 'icon'
),
e, facoltativamente, se è possibile selezionare più contatti come
secondo parametro.
const props = ['name', 'email', 'tel', 'address', 'icon'];
const opts = {multiple: true};
try {
const contacts = await navigator.contacts.select(props, opts);
handleResults(contacts);
} catch (ex) {
// Handle any errors here.
}
L'API Contacts Picker può essere chiamata solo da un contesto di navigazione di primo livello sicuro e, come altre potenti API, richiede un gesto dell'utente.
Rilevamento delle proprietà disponibili
Per rilevare le proprietà disponibili, chiama navigator.contacts.getProperties()
.
Restituisce una promessa che si risolve con un array di stringhe che indicano quali proprietà sono disponibili. Ad esempio: ['name', 'email', 'tel', 'address']
.
Puoi passare questi valori a select()
.
Ricorda che le proprietà non sono sempre disponibili e che potrebbero essere aggiunte nuove proprietà. In futuro, altre piattaforme e origini contatto potrebbero limitare le proprietà che possono essere condivise.
Gestione dei risultati
L'API Contact Picker restituisce un array di contatti e ogni contatto include un array delle proprietà richieste. Se un contatto non dispone di dati per la proprietà richiesta o se l'utente sceglie di disattivare la condivisione di una determinata proprietà, l'API restituisce un array vuoto. Descrivo come l'utente sceglie le proprietà nella sezione Controllo utente.
Ad esempio, se un sito richiede name
, email
e tel
e un utente selezione un singolo contatto con dati nel campo del nome, fornisce due numeri di telefono, ma non ha un indirizzo email, la risposta restituita sarà:
[{
"email": [],
"name": ["Queen O'Hearts"],
"tel": ["+1-206-555-1000", "+1-206-555-1111"]
}]
Sicurezza e autorizzazioni
Il team di Chrome ha progettato e implementato l'API Contact Picker utilizzando i principi di base definiti in Controllo dell'accesso a potenti funzionalità della piattaforma web, tra cui il controllo dell'utente, la trasparenza e l'ergonomia. Vediamole singolarmente.
Controllo utenti
L'accesso ai contatti degli utenti avviene tramite il selettore e può essere chiamato solo con un gesto dell'utente, in un contesto di navigazione di primo livello sicuro. In questo modo, un sito non può mostrare il selettore al caricamento della pagina o mostrarlo in modo casuale senza alcun contesto.
Non esiste un'opzione per selezionare collettivamente tutti i contatti, in modo che gli utenti siano invitati a selezionare solo i contatti che devono condividere per quel particolare sito web. Gli utenti possono anche controllare quali proprietà vengono condivise con il sito attivando/disattivando il pulsante della proprietà nella parte superiore del selettore.
Trasparenza
Per chiarire quali dati di contatto vengono condivisi, il selettore mostra sempre il nome e l'icona del contatto, oltre a eventuali proprietà richieste dal sito. Ad esempio, se un sito richiede name
, email
e tel
, tutte e tre le proprietà verranno visualizzate nel selettore. In alternativa, se un sito richiede solo tel
, il selettore mostrerà solo il nome e i numeri di telefono.
Se premi a lungo un contatto, vengono visualizzate tutte le informazioni che verranno condivise se il contatto viene selezionato. (vedi l'immagine di contatto del gatto Cheshire).
Nessuna persistenza delle autorizzazioni
L'accesso ai contatti è on demand e non persiste. Ogni volta che un sito vuole accedere, deve chiamare navigator.contacts.select()
con un gesto dell'utente e l'utente deve scegliere singolarmente i contatti che vuole condividere con il sito.
Feedback
Il team di Chrome vuole conoscere la tua esperienza con l'API Contact Picker.
Problemi con l'implementazione?
Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione è diversa dalla specifica?
- Segnala un bug all'indirizzo https://new.crbug.com. Assicurati di includere il maggior numero possibile di dettagli, fornisci istruzioni semplici per riprodurre il bug e imposta Componenti su
Blink>Contacts
. Glitch è perfetto per condividere riproduzioni di problemi in modo semplice e veloce.
Hai intenzione di utilizzare l'API?
Intendi utilizzare l'API Contact Picker? Il supporto pubblico aiuta il team di Chrome a dare priorità alle funzionalità e mostra agli altri fornitori di browser quanto sia fondamentale supportarle.
- Spiega come intendi utilizzarlo nel thread del discorso di WicG.
- Invia un tweet a @ChromiumDev utilizzando l'hashtag
#ContactPicker
e facci sapere dove e come lo utilizzi.
Link utili
- Spiegazione pubblica
- Specifiche del selettore di contatti
- Demo dell'API Contact Picker e origine della demo dell'API Contact Picker
- Bug di monitoraggio
- Voce ChromeStatus.com
- Componente lampeggiante:
Blink>Contacts
Grazie
Grazie mille a Finnur Thorarinsson e Rayan Kanso, che stanno
implementando la funzionalità, e a Peter Beverloo, il cui
codice che ho sfacciato
rubato e refactoring per la demo.
P.S.: i nomi nel selettore contatti sono caratteri di Alice nel Paese delle Meraviglie.