L'API Contact Picker permet aux utilisateurs de partager facilement des contacts depuis leur liste de contacts.
Qu'est-ce que l'API Contact Picker ?
L'accès aux contacts de l'utilisateur sur un appareil mobile est une fonctionnalité des applications iOS/Android depuis (presque) la nuit des temps. Il s'agit de l'une des demandes de fonctionnalités les plus courantes que j'entends de la part des développeurs Web. C'est souvent la raison principale pour laquelle ils créent une application iOS/Android.
Disponible à partir de Chrome 80 sur Android M ou version ultérieure, la spécification de l'API Contact Picker est une API à la demande qui permet aux utilisateurs de sélectionner des entrées dans leur liste de contacts et de partager des informations limitées sur les entrées sélectionnées avec un site Web. Il permet aux utilisateurs de partager uniquement ce qu'ils veulent, quand ils le souhaitent, et de rester en contact plus facilement avec leurs amis et leur famille.
Par exemple, un client de messagerie Web peut utiliser l'API Contact Picker pour sélectionner le ou les destinataires d'un e-mail. Une application VoIP peut rechercher le numéro de téléphone à appeler. Un réseau social peut aussi aider un utilisateur à découvrir quels amis se sont déjà inscrits.
Utiliser l'API Contact Picker
L'API Contact Picker nécessite un appel de méthode avec un paramètre d'options qui spécifie les types de coordonnées souhaités. Une deuxième méthode vous indique quelles informations le système sous-jacent fournira.
Détection de fonctionnalités
Pour vérifier si l'API Contact Picker est compatible, utilisez:
const supported = ('contacts' in navigator && 'ContactsManager' in window);
De plus, sur Android, le sélecteur de contacts nécessite Android M ou une version ultérieure.
Ouverture du sélecteur de contacts
Le point d'entrée de l'API Contact Picker est navigator.contacts.select()
.
Lorsqu'il est appelé, il renvoie une promesse et affiche le sélecteur de contacts, ce qui permet à l'utilisateur de sélectionner le ou les contacts qu'il souhaite partager avec le site. Après avoir sélectionné ce qu'il souhaite partager et cliqué sur OK, la promesse est résolue avec un tableau de contacts sélectionnés par l'utilisateur.
Lorsque vous appelez select()
, vous devez fournir un tableau de propriétés que vous souhaitez renvoyer en tant que premier paramètre (les valeurs autorisées étant 'name'
, 'email'
, 'tel'
, 'address'
ou 'icon'
), et éventuellement si plusieurs contacts peuvent être sélectionnés en tant que deuxième paramètre.
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 Sélecteur de contacts ne peut être appelée qu'à partir d'un contexte de navigation de niveau supérieur sécurisé. Comme les autres API puissantes, elle nécessite un geste utilisateur.
Détecter les propriétés disponibles
Pour détecter les propriétés disponibles, appelez navigator.contacts.getProperties()
.
Il renvoie une promesse qui se résout avec un tableau de chaînes indiquant les propriétés disponibles. Exemple : ['name', 'email', 'tel', 'address']
.
Vous pouvez transmettre ces valeurs à select()
.
N'oubliez pas que les propriétés ne sont pas toujours disponibles et que de nouvelles propriétés peuvent être ajoutées. À l'avenir, d'autres plates-formes et sources de contacts pourront restreindre les propriétés à partager.
Gérer les résultats
L'API Contact Picker renvoie un tableau de contacts, et chaque contact inclut un tableau des propriétés demandées. Si un contact ne dispose pas de données pour la propriété demandée ou si l'utilisateur choisit de ne pas partager une propriété particulière, l'API renvoie un tableau vide. (Je décris comment l'utilisateur choisit des propriétés dans la section Contrôle utilisateur.)
Par exemple, si un site demande name
, email
et tel
, et qu'un utilisateur sélectionne un contact dont le champ de nom contient des données et fournit deux numéros de téléphone, mais ne possède pas d'adresse e-mail, la réponse renvoyée est la suivante:
[{
"email": [],
"name": ["Queen O'Hearts"],
"tel": ["+1-206-555-1000", "+1-206-555-1111"]
}]
Sécurité et autorisations
L'équipe Chrome a conçu et implémenté l'API Contact Picker en suivant les principes de base définis dans Contrôler l'accès aux fonctionnalités puissantes de la plate-forme Web, y compris le contrôle utilisateur, la transparence et l'ergonomie. Je vais vous expliquer chacune d'elles.
Contrôle des utilisateurs
L'accès aux contacts des utilisateurs s'effectue via le sélecteur et ne peut être appelé qu'avec un geste utilisateur, dans un contexte de navigation de premier niveau sécurisé. Cela garantit qu'un site ne peut pas afficher le sélecteur au chargement de la page ni l'afficher de manière aléatoire sans contexte.
Il n'est pas possible de sélectionner tous les contacts de manière groupée. Les utilisateurs sont donc invités à ne sélectionner que les contacts qu'ils doivent partager pour ce site Web particulier. Les utilisateurs peuvent également contrôler les propriétés partagées avec le site en activant ou désactivant le bouton de la propriété en haut du sélecteur.
Transparence
Pour indiquer clairement quelles coordonnées sont partagées, le sélecteur affiche toujours le nom et l'icône du contact, ainsi que toutes les propriétés que le site a demandées. Par exemple, si un site demande name
, email
et tel
, les trois propriétés s'affichent dans le sélecteur. Si un site ne demande que tel
, le sélecteur n'affiche que le nom et les numéros de téléphone.
Appuyer de manière prolongée sur un contact affiche toutes les informations qui seront partagées si le contact est sélectionné. (Voir l'image du contact Cheshire Cat.)
Aucune persistance d'autorisation
L'accès aux contacts est à la demande et n'est pas conservé. Chaque fois qu'un site souhaite accéder à ces informations, il doit appeler navigator.contacts.select()
avec un geste utilisateur, et l'utilisateur doit choisir individuellement le ou les contacts qu'il souhaite partager avec le site.
Commentaires
L'équipe Chrome souhaite connaître votre expérience avec l'API Contact Picker.
Problème d'implémentation ?
Avez-vous trouvé un bug dans l'implémentation de Chrome ? Ou l'implémentation est-elle différente de la spécification ?
- Signalez un bug sur https://new.crbug.com. Veillez à inclure autant de détails que possible, à fournir des instructions simples pour reproduire le bug et à définir Components sur
Blink>Contacts
. Glitch est idéal pour partager des reproductions de problèmes rapides et faciles.
Vous prévoyez d'utiliser l'API ?
Prévoyez-vous d'utiliser l'API Contact Picker ? Votre assistance publique aide l'équipe Chrome à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge.
- Expliquez comment vous prévoyez de l'utiliser dans le fil de discussion Discourse de la WICM.
- Envoyez un tweet à @ChromiumDev en utilisant le hashtag
#ContactPicker
et indiquez-nous où et comment vous l'utilisez.
Liens utiles
- Explication publique
- Spécifications du sélecteur de contacts
- Démonstration de l'API Contact Picker et Source de démonstration de l'API Contact Picker
- Bug de suivi
- Enregistrement sur ChromeStatus.com
- Composant Blink:
Blink>Contacts
Merci
Un grand merci à Finnur Thorarinsson et Rayan Kanso qui implémentent la fonctionnalité, et à Peter Beverloo dont j'ai volé et refactorisé le code sans vergogne pour la démonstration.
P.S. : Les noms dans mon sélecteur de contacts sont des personnages d'Alice au pays des merveilles.