Un selettore di contatti per il Web

L'API Contact Picker consente agli utenti di condividere facilmente i contatti dal loro elenco contatti.

Pete LePage

Che cos'è l'API Contact Selecter?

L'accesso ai contatti dell'utente su un dispositivo mobile è una funzionalità delle app iOS/Android fin dal (quasi) l'alba del tempo. È una delle richieste di funzionalità più comuni Ho sentito parlare degli sviluppatori web e spesso è il motivo principale per cui sviluppano un sistema operativo iOS/Android dell'app.

Disponibile a partire da Chrome 80 su Android M o versioni successive, la specifica API Contact Selecter è un un'API on demand che consente agli utenti di selezionare voci dal proprio elenco contatti e condividono dettagli limitati delle voci selezionate con un sito web. Consente agli utenti di solo ciò che vogliono e quando lo vogliono, e permette agli utenti di raggiungere ed entrare in contatto con amici e familiari.

Ad esempio, un client di posta basato sul web potrebbe utilizzare l'API Contact Selecter per selezionare i destinatari di un'email. Un'app con voce fuori campo potrebbe cercare quale numero di telefono chiamare. Oppure un social network può aiutare un utente a scoprire amici si sono già uniti.

Utilizzo dell'API Contact Selecter

L'API Contact Selecter richiede una chiamata al metodo con un parametro options che specifica i tipi di dati di contatto desiderati. Un secondo metodo indica le informazioni fornite dal sistema sottostante.

Rilevamento delle caratteristiche

Per verificare se l'API Contact Selecter è 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 accesso all'API Contact Picker è navigator.contacts.select(). Quando viene chiamato, restituisce una promessa e mostra il selettore di contatti, consentendo all'utente di selezionare i contatti da condividere con il sito. Dopo il giorno selezionando cosa condividere e facendo clic su Fine, la promessa si risolve con dell'array di contatti selezionati dall'utente.

Quando chiami select(), devi fornire un array di proprietà che preferisci restituito come primo parametro (i valori consentiti sono uno qualsiasi tra 'name', 'email', 'tel', 'address' o 'icon'), e facoltativamente se è possibile aggiungere più contatti selezionato 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 selettore può essere chiamata solo da un indirizzo sicuro, contesto di navigazione di primo livello e, come altre potenti API, richiede una gesto dell'utente.

Rilevamento delle proprietà disponibili

Per rilevare quali proprietà sono 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 trasferire questi valori a select().

Ricorda che le proprietà non sono sempre disponibili e che potrebbero esserlo aggiunto. In futuro, altre piattaforme e fonti di contatto potrebbero limitare quali proprietà condivise.

Gestione dei risultati

L'API Contact Selecter restituisce un array di contatti e ogni contatto include un array delle proprietà richieste. Se un contatto non dispone di dati per proprietà richiesta oppure l'utente sceglie di disattivare la condivisione di una , l'API restituisce un array vuoto. Descrivi in che modo l'utente sceglie le proprietà nella sezione Controllo utente.

Ad esempio, se un sito richiede name, email e tel e un utente seleziona un singolo contatto con dati nel campo del nome, fornisce due numeri di telefono, ma non dispone di 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 le API definiti in Controllo dell'accesso a potenti funzionalità della piattaforma web tra cui controllo dell'utente, trasparenza ed ergonomia. Vediamole singolarmente.

Controllo utenti

L'accesso al profilo dell'utente di contatti è tramite il selettore e può essere chiamato solo gesto dell'utente, in un contesto di navigazione sicuro e di primo livello. Ciò garantisce che un sito non possa mostrare il selettore durante il caricamento pagina o mostrare in modo casuale il selettore senza alcun contesto.

Screenshot, gli utenti possono scegliere quali proprietà condividere.
. Gli utenti possono scegliere di non condividere alcune proprietà. In questo screenshot, l'utente ha deselezionato "Numeri di telefono" . Anche se il sito vengono richiesti i numeri di telefono, questi non verranno condivisi con il sito.

Non esiste un'opzione per selezionare collettivamente tutti i contatti in modo che gli utenti siano incoraggiati di selezionare solo i contatti che devono condividere per quel particolare sito web. Gli utenti possono anche controllare quali proprietà sono 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 il nome e l'icona del contatto, più eventuali proprietà del sito richiesto. 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 numeri di telefono.

Screenshot del selettore per il sito che richiede tutte le proprietà.
. Selettore, sito che richiede name, email e tel, un contatto selezionato.
di Gemini Advanced.
.
. Screenshot del selettore per il sito che richiede solo numeri di telefono.
Selettore, sito che richiede solo tel, un contatto selezionato.
Screenshot del selettore quando un contatto viene premuto a lungo.
. Il risultato di una pressione prolungata su un contatto.

Una pressione prolungata su un contatto mostrerà tutte le informazioni che condiviso se il contatto è selezionato. (vedi l'immagine di contatto del gatto Cheshire).

Persistenza nessuna autorizzazione

L'accesso ai contatti è on demand e non permanente. Ogni volta che un sito vuole accesso, deve chiamare navigator.contacts.select() con un gesto dell'utente, e l'utente deve scegliere singolarmente i contatti da condividere con il sito.

Feedback

Il team di Chrome vuole conoscere la tua esperienza con il selettore contatti tramite Google Cloud CLI o tramite l'API Compute Engine.

Problemi con l'implementazione?

Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione rispetto alle specifiche?

  • Segnala un bug all'indirizzo https://new.crbug.com. Assicurati di includere fornire maggiori dettagli possibili, fornire semplici istruzioni per riprodurre il bug e imposta Componenti su Blink>Contacts. Glitch funziona benissimo per condividere riproduzioni di problemi semplici e veloci.

Hai intenzione di utilizzare l'API?

Intendi utilizzare l'API Contact Picker? Il tuo supporto pubblico aiuta Il team di Chrome assegna la priorità alle funzionalità e mostra ad altri fornitori di browser come è fondamentale supportarli.

Link utili

Grazie

Grazie a Finnur Thorarinsson e Rayan Kanso, che sono la funzionalità e Peter Beverloo, la cui code: vergognosamente rubati e sottoposti a refactoring per la demo.

P.S.: i nomi nel selettore contatti sono caratteri di Alice nel Paese delle Meraviglie.