Un selector de contactos para la Web

La API del selector de contactos proporciona una manera fácil para que los usuarios compartan contactos de su lista de contactos.

Pete LePage

¿Qué es la API de Contact Picker?

Desde entonces, el acceso a los contactos del usuario en un dispositivo móvil es una función de las aplicaciones para iOS y Android. (casi) el inicio de los tiempos. Es una de las solicitudes de funciones más comunes Los desarrolladores web me dicen que suelen ser el motivo principal por el que crean un sistema operativo para iOS y Android. .

Disponible a partir de Chrome 80 en Android M o versiones posteriores, la especificación de la API del selector de contactos es una API a pedido que permite a los usuarios seleccionar entradas de su lista de contactos y compartir detalles limitados de las entradas seleccionadas con un sitio web. Permite que los usuarios comparten solo lo que quieren y cuando quieren, y facilita que los usuarios comunicarse y conectarse con sus amigos y familiares.

Por ejemplo, un cliente de correo electrónico basado en la Web podría usar la API del selector de contactos para lo siguiente: selecciona los destinatarios de un correo electrónico. Una app de voz en IP podría buscar a qué número de teléfono llamar. O una red social podría ayudar al usuario a descubrir a la que ya se han unido amigos.

Usa la API del selector de contactos

La API de Contact Picker requiere una llamada de método con un parámetro de opciones que especifica los tipos de información de contacto que deseas. Un segundo método te indica qué información proporcionará el sistema subyacente.

Detección de funciones

Para verificar si la API del selector de contactos es compatible, usa lo siguiente:

const supported = ('contacts' in navigator && 'ContactsManager' in window);

Además, en Android, el Selector de contactos requiere Android M o una versión posterior.

Cómo abrir el selector de contactos

El punto de entrada a la API del selector de contactos es navigator.contacts.select(). Cuando se lo llama, muestra una promesa y el selector de contactos, lo que permite que usuario seleccione los contactos que desea compartir con el sitio. Después del cuando seleccionas qué compartir y haces clic en Listo, la promesa se resuelve con un matriz de contactos que selecciona el usuario.

Cuando llames a select(), debes proporcionar el array de propiedades que quieras. se muestran como el primer parámetro (los valores permitidos son cualquiera de 'name', 'email', 'tel', 'address' o 'icon') y, opcionalmente, la posibilidad de que varios contactos seleccionarse como segundo parámetro.

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.
}

Solo se puede llamar a la API del selector de contactos desde un dispositivo seguro, contexto de navegación de nivel superior y, al igual que otras APIs potentes, requiere una gesto del usuario.

Cómo detectar las propiedades disponibles

Para detectar qué propiedades están disponibles, llama a navigator.contacts.getProperties(). Muestra una promesa que se resuelve con un array de cadenas que indica qué propiedades están disponibles. Por ejemplo: ['name', 'email', 'tel', 'address']. Puedes pasar estos valores a select().

Recuerda que las propiedades no siempre están disponibles, y es posible que las propiedades nuevas agregado. Es posible que otras plataformas y fuentes de contacto restrinjan el acceso a los datos qué propiedades se compartirán.

Cómo controlar los resultados

La API del selector de contactos muestra un array de contactos y cada uno incluye un array de las propiedades solicitadas. Si un contacto no tiene datos para la propiedad solicitada, o el usuario opta por dejar de compartir una propiedad , la API muestra un array vacío. (Describo la forma en que el usuario elige las propiedades en la sección Control de usuario).

Por ejemplo, si un sitio solicita name, email y tel, y un usuario selecciona un contacto único que tiene datos en el campo de nombre, proporciona dos números de teléfono, pero no tiene una dirección de correo electrónico, la respuesta será:

[{
  "email": [],
  "name": ["Queen O'Hearts"],
  "tel": ["+1-206-555-1000", "+1-206-555-1111"]
}]

Seguridad y permisos

El equipo de Chrome diseñó e implementó la API del selector de contactos utilizando el definidos en Controlar el acceso a las funciones potentes de la plataforma web, incluidos el control de usuario, la transparencia y la ergonomía. Vamos a explicar cada una.

Control de usuarios

Acceso a las contraseñas de los usuarios contactos es a través del selector, y solo es posible llamarlo con un gesto del usuario, en un contexto de navegación seguro y de nivel superior. Esto garantiza que un sitio no pueda mostrar el selector en la carga de la página ni mostrarlo de forma aleatoria el selector sin ningún contexto.

Captura de pantalla, los usuarios pueden elegir qué propiedades compartir.
Los usuarios pueden optar por no compartir algunas propiedades. En esta captura de pantalla, el usuario desmarcó las casillas de verificación “Números de teléfono” . Si bien el sitio solicitaron números de teléfono, estos no se compartirán con el sitio.

No existe la opción de seleccionar todos los contactos de forma masiva, por lo que se recomienda a los usuarios seleccionar solo los contactos que tienen que compartir para esa cuenta sitio web. Los usuarios también pueden controlar qué propiedades se comparten con el sitio. activando el botón de propiedad en la parte superior del selector.

Transparencia

Para aclarar qué detalles de contacto se comparten, el selector siempre Muestra el nombre y el ícono del contacto, además de las propiedades que tenga el sitio solicitado. Por ejemplo, si un sitio solicita name, email y tel, las tres propiedades se mostrarán en el selector. Por otro lado, si un sitio solo solicita tel, el selector solo mostrará el nombre. números de teléfono.

Captura de pantalla del selector del sitio que solicita todas las propiedades.
Selector, sitio que solicita name, email y tel, un contacto seleccionado.
Captura de pantalla del selector del sitio que solicita solo números de teléfono
. Selector, sitio que solicita solo tel, se seleccionó un contacto.
Captura de pantalla del selector cuando se mantiene presionado un contacto
Es el resultado de mantener presionado un contacto.

Si mantienes presionado un contacto, verás toda la información que se enviará se comparte si se selecciona el contacto. (consulta la imagen de contacto del gato de Cheshire).

Sin persistencia de permisos

El acceso a los contactos es a pedido y no se conserva. Cada vez que un sitio quiera debe llamar a navigator.contacts.select() con un gesto del usuario y el usuario debe elegir individualmente los contactos que quiere compartir con el sitio.

Comentarios

El equipo de Chrome quiere conocer tu experiencia con el Selector de contactos en la API de Cloud.

¿Tiene problemas con la implementación?

¿Encontraste un error en la implementación de Chrome? ¿O la implementación diferente de la especificación?

  • Informa un error en https://new.crbug.com. Asegúrate de incluir tantos detalles como puedas, proporcionar instrucciones simples para reproducir el error y establece Componentes en Blink>Contacts. Glitch funciona a la perfección. para compartir reproducciones de problemas rápidas y fáciles.

¿Piensas usar la API?

¿Planeas usar la API del selector de contactos? Tu apoyo público ayuda a El equipo de Chrome priorizará funciones y mostrará a otros proveedores de navegadores cómo esencial para respaldarlos.

Vínculos útiles

Gracias

Saludos, y gracias a Finnur Thorarinsson y Rayan Kanso, con la implementación de la función, y Peter Beverloo, cuyos miembros codificar descaradamente robó y refactorizó para la demostración.

P.D.: Los nombres de mi selector de contactos son personajes de Alicia en el país de las maravillas.