L'API Contact Picker fornisce agli utenti un modo semplice per condividere i contatti dal proprio elenco contatti.
Che cos'è l'API Contact Picker?
L'accesso ai contatti dell'utente su un dispositivo mobile è una funzionalità delle app per iOS/Android sin dall'aurora. È una delle richieste di funzionalità più comuni che mi vengono dagli sviluppatori web ed è spesso il motivo principale per cui creano un'app per iOS/Android.
Disponibile da Chrome 80 su Android M o versioni successive, la specifica dell'API Contact Picker è 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 loro di raggiungere più facilmente i propri amici e familiari ed entrare 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 voice-over-IP potrebbe cercare quale numero di telefono chiamare. Oppure un social network potrebbe aiutare un utente a scoprire quali amici si sono già abbonati.
Utilizzo dell'API Contact Picker
L'API Contact Picker richiede una chiamata al metodo con un parametro di opzioni che specifichi i tipi di informazioni di contatto che vuoi. Un secondo metodo indica quali informazioni vengono fornite dal sistema sottostante.
Rilevamento delle funzionalità
Per verificare se l'API Contact Picker è supportata, utilizza:
const supported = ('contacts' in navigator && 'ContactsManager' in window);
Inoltre, su Android, il selettore contatti richiede Android M o versioni successive.
Apertura del selettore contatti
Il punto di ingresso all'API Contact Picker è navigator.contacts.select()
.
Quando chiamato, restituisce una promessa e mostra il selettore di 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 si risolve con un array di contatti selezionati dall'utente.
Quando chiami select()
devi fornire un array di proprietà da
restituire come primo parametro (con i valori consentiti qualsiasi tra
'name'
, 'email'
, 'tel'
, 'address'
o 'icon'
)
e, facoltativamente, se più contatti possono essere
selezionati 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 sicuro di primo livello 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 indica le proprietà 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 di contatto potrebbero limitare le proprietà 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. Nella sezione Controllo utente, viene spiegato come l'utente sceglie le proprietà.
Ad esempio, se un sito richiede name
, email
e tel
e un utente
seleziona un singolo contatto che contiene 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 fondamentali definiti nella sezione Controllare l'accesso alle funzionalità avanzate della piattaforma web, tra cui controllo degli utenti, trasparenza ed ergonomia. Li spiegherò nel dettaglio.
Controllo utente
L'accesso ai contatti degli utenti avviene tramite il selettore, che può essere chiamato soltanto con un gesto dell'utente in un contesto di navigazione sicuro di primo livello. Ciò garantisce che un sito non possa mostrare il selettore al caricamento della pagina o mostrare in modo casuale il selettore senza alcun contesto.
Non è possibile selezionare collettivamente tutti i contatti, in modo che gli utenti siano invitati a selezionare solo i contatti che devono condividere per quel determinato sito web. Gli utenti possono anche controllare quali proprietà sono condivise con il sito attivando/disattivando il pulsante delle proprietà nella parte superiore del selettore.
Trasparenza
Per chiarire quali dettagli di contatto vengono condivisi, il selettore mostra sempre il nome e l'icona del contatto, oltre alle proprietà richieste dal sito. Ad esempio, se un sito richiede name
, email
e tel
,
tutte e tre le proprietà verranno mostrate nel selettore. In alternativa,
se un sito richiede solo tel
, il selettore mostrerà solo il nome e i
numeri di telefono.
Premi a lungo un contatto per visualizzare tutte le informazioni che verranno condivise se il contatto viene selezionato. (vedi l'immagine di contatto del Cheshire Cat).
Nessuna persistenza delle autorizzazioni
L'accesso ai contatti è on demand e non persistente. Ogni volta che un sito vuole l'accesso, 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 le tue esperienze con l'API Contact Picker.
Problemi con l'implementazione?
Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione è diversa dalle specifiche?
- Segnala un bug all'indirizzo https://new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile, fornisci istruzioni semplici per riprodurre il bug e imposta Componenti su
Blink>Contacts
. Glitch funziona benissimo per condividere riproduzioni rapide e semplici dei problemi.
Prevedi di utilizzare l'API?
Intendi utilizzare l'API Contact Picker? Il tuo supporto pubblico aiuta il team di Chrome a dare la priorità alle funzionalità e mostra ad altri fornitori di browser quanto è fondamentale supportarle.
- Condividi come prevedi di utilizzarlo nel thread del discorso WiCG.
- Invia un tweet a @ChromiumDev utilizzando l'hashtag
#ContactPicker
e facci sapere dove e come lo stai usando.
Link utili
- Spiegazione pubblica
- Specifiche del selettore contatti
- Demo API Contact Picker e Origine demo API Contact Picker
- Bug di monitoraggio
- Voce ChromeStatus.com
- Componente Blink:
Blink>Contacts
Grazie per aver deciso
Grazie a Finnur Thorarinsson e Rayan Kanso che stanno
implementando la funzionalità e a Peter Beverloo, il cui
codice ho sprezzantemente
ho rubato e la demo per la demo.
P.S.: i nomi nel mio selettore di contatti sono personaggi di Alice nel Paese delle Meraviglie.