Un outil de sélection de contacts pour le Web

L'API Contact Picker permet aux utilisateurs de partager facilement des contacts à partir de 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. C'est l'une des fonctionnalités les plus demandées par les développeurs Web et c'est souvent la principale raison 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 les informations que le système sous-jacent fournira.

Détection de fonctionnalités

Pour vérifier si l'API Contact Picker est prise en charge, 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(). Elle 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 désactiver le partage d'une propriété spécifique, l'API renvoie un tableau vide. (Je décris comment l'utilisateur choisit les 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 seul contact qui contient des données dans le champ de nom, fournit deux numéros de téléphone, mais ne dispose 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.

Capture d'écran : les utilisateurs peuvent choisir les propriétés à partager.
Les utilisateurs peuvent choisir de ne pas partager certaines propriétés. Sur cette capture d'écran, l'utilisateur a décoché le bouton "Numéros de téléphone". Même si le site a demandé des numéros de téléphone, ils ne seront pas partagés avec le site.

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 sont affichées 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.

Capture d'écran du sélecteur pour le site demandant toutes les propriétés.
Picker, site requesting name, email, and tel, one contact selected.
Capture d'écran du sélecteur pour un site qui ne demande que des numéros de téléphone.
Sélecteur, site ne demandant que tel, un contact sélectionné.
Capture d'écran du sélecteur lorsqu'un contact est enfoncé de manière prolongée.
Résultat d'un appui de manière prolongée sur un contact.

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 de contact du chat Cheshire.)

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.

Vous rencontrez un problème lors de l'implémentation ?

Avez-vous détecté 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 soutien public 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.

Liens utiles

Merci

Merci beaucoup à Finnur Thorarinsson et Rayan Kanso qui implémentent cette fonctionnalité, ainsi qu'à Peter Beverloo, dont le code que j'ai déchargé et refactorisé pour la démonstration sans honte.

P.S. : Les noms dans mon sélecteur de contacts sont des personnages d'Alice au pays des merveilles.