La API del selector de contactos proporciona una manera fácil para que los usuarios compartan contactos de su lista de contactos.
¿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.](https://developer.chrome.com/static/docs/capabilities/web-apis/contact-picker/image/screen-shot-users-choos-d939e544a9bcf.jpg?hl=es-419)
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.](https://developer.chrome.com/static/docs/capabilities/web-apis/contact-picker/image/screen-shot-picker-site-60e23bc587f31.jpg?hl=es-419)
name
, email
y
tel
, un contacto seleccionado.
![Captura de pantalla del selector del sitio que solicita solo números de teléfono](https://developer.chrome.com/static/docs/capabilities/web-apis/contact-picker/image/screen-shot-picker-site-e1490d566fbfd.jpg?hl=es-419)
tel
, se seleccionó un contacto.
![Captura de pantalla del selector cuando se mantiene presionado un contacto](https://developer.chrome.com/static/docs/capabilities/web-apis/contact-picker/image/screen-shot-picker-a-co-d66001cb05793.jpg?hl=es-419)
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.
- Comparte cómo piensas usarlo en la conversación del discurso de WICG.
- Envía un tweet a @ChromiumDev con el hashtag
#ContactPicker
y cuéntanos dónde y cómo lo utilizas.
Vínculos útiles
- Explicación pública
- Especificación del selector de contactos
- Demostración de la API de Contact Picker y Fuente de demostración de la API de Contact Picker
- Seguimiento de errores
- Entrada de ChromeStatus.com
- Componente de parpadeo:
Blink>Contacts
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.