Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. iOS SDK

Inicio de sesión rápidos con contraseña de auto-completado en iOS 11

by
Length:ShortLanguages:

Spanish (Español) translation by Rene Soto (you can also view the original English article)

Final product image
What You'll Be Creating

Autocompletado de contraseña en iOS 11

El inicio de sesión es el primer paso que un usuario tiene que hacer cuando ellos comienzan a usar una app que requiere una cuenta. Usualmente esto lleva algunos segundos si el usuario recuerda sus credenciales y sea capaz de escribirlas correctamente. Otros usuarios, por otro parte , tal vez tengan que cambiar su servicio de administración de contraseñas preferido ( llavero iCloud, 1Password, LastPass, etc.) para copiar su nombre de usuario y contraseña. Sobra decir que, esta interacción ralentiza a los usuarios y algunos de ellos simplemente abandonarán el proceso.

Ha habido algunos intentos por mejorar esta experiencia. 1Password, por ejemplo, ofrece una extensión agradable de la cual los desarrolladores de aplicaciones puede aprovechar. Otra solución ya incluida en iOS desde la WWDC 2014 es Credenciales Compartidas de Safari.

Sin embargo, en iOS 11, Apple ha introducido una forma aún más perfecta para optimizar el proceso de inicio de sesión: Con la nueva API de Autocompletado de Contraseña. En comparación con soluciones anteriores, es más fácil de utilizar para los usuarios y más rápido de implementar para los desarrolladores.

En este artículo te enseñaré como acelerar el proceso de inicio de sesión y mejor la retención de usuarios con el Autocompletado de Contraseña, una nueva API introducida en iOS 11.

Introducción

El AutoCompletado de Contraseñas permite a los usuarios rellenar sus credenciales de inicio de sesión directamente en tu aplicación interactuando por medio de la barra QuickType la cual se muestra arriba del teclado. Al mejorar el flujo de inicio de sesión aumentará la retención de usuarios, así como la reputación de tu aplicación. Al terminar este tutorial, serás capaz de acortar la duración del flujo de inicio de sesión a sólo unos pocos segundos.

Hay dos pasos para implementar el AutoCompletado de Contraseñas en tu app:

  • Mostrar la barra QuickType con el icono de llave y permitir a los usuarios elijan manualmente el inicio correcto.
  • Opcionalmente enlazar tu aplicación y sitio web de forma segura, para que la barra QuickType pueda sugerir el inicio de sesión al usuario para acelerar el proceso aún más.

La Barra QuickType

El primer paso es hacer que la barra QuickType aparezca con el botón de llave. Después de ese paso, los usuarios serán capaces de tocarlo y seleccionar manualmente la forma correcta de inicio de sesión desde el view controller presentado. La única propiedad necesaria para que la barra QuickType aparezca es establecer la propiedad textContent en tu objeto UITextField o UITextView. Sí tienes un control personalizado que forme parte de <UITextInput>, aplicará el mismo código. 

Deberás agregar esa propiedad a tus campos email/nombre de usuario y contraseña. Una implementación común sería la siguiente:

iOS mostrará la barra QuickType en todos los dispositivos que ejecuten iOS 11 cuando al menos una contraseña sea guardada en el llavero. Sí estás probando en el Simulador y no ves que aparezca la barra QuickType, lo más probable es que tu llavero esté vacío.

The QuickType bar with the simple key icon

Después que el usuario presione el icono de llave y se autentique vía TouchID, se mostrará una lista de todas las contraseñas guardadas. El usuario puede buscar o desplazarse a través de ella y cuando haya encontrado las credenciales correctas, con un solo toque se rellenarán los campos del inicio de sesión

Como puedes ver, la parte más lenta en este proceso es encontrar el inicio de sesión correcto en el llavero. En la siguiente sección veremos como nosotros podemos remover este paso y mejorar aún más la experiencia.

Sugerencias de Credenciales

También puedes decirle a iOS el sitio web con el cual tu app está asociada. Sí el llavero contiene credenciales guardadas para Safari en iOS o macOS, aquellas credenciales serán sugeridas - eliminando la molestia de buscarlos manualmente en el llavero.

Si ya estás usando Enlaces Universales, tu app debe mostrar las credenciales para tu sitio web en la barra QuickType. iOS sabe cual sitio web está asociado con tu app, por lo tanto está 100% preparado para sugerir credenciales.

Otra manera de vincular fuertemente tu aplicación con el sitio web, sin necesidad de Enlaces Universales, es un servicio de dominio asociado a las credenciales web.

Ve a la configuración de tu proyecto Xcode,  selecciona la pestaña Capabilities y establece en ON la opción Associated Domains. Agregar la url de tu sitio web aquí. Supongamos que el nombre de dominio de tu sitio web es amazingwebsite.com: el nombre de dominio listado deberá ser webcredentials:amazingwebsite.com.

Xcode Capabilities section with Associated Domains turned on

Eso es todo en cuanto la configuración del proyecto Xcode. iOS ahora conoce el sitio web asociado de tu aplicación. El último paso es subir un archivo a tu servidor, para que iOS pueda verificar que tú eres el dueño del sitio web que estás intentando asociar con la aplicación. ( Esto es para prevenir que apps maliciosas roben las credenciales desde otros sitios web.)

Crea un nuevo archivo de texto ( fuera del proyecto Xcode si así lo deseas) llamado apple-app-site-association. Este es un nombre estándar que iOS busca en tu servidor mediante una conexión segura (debes tener un SSL configurado en tu servidor). El contenido de ese archivo también es un estándar. Solamente copia y pega el siguiente código.

Deberás cambiar la cadena en el arreglo apps por tu Team ID ( el cual puedes obtener en el portal de desarrollador debajo de la sección membresía) , seguido de un punto y el identificador del paquete de la aplicación. Crea una carpeta llamada .well-know en el directorio raíz de tu servidor y sube el archivo ahí.

Para asegurarse que todo vaya conforme lo esperado, revisa en un navegador web si el archivo existe en la dirección especificada. Esta es mi dirección para el ejemplo:  https://patrickbalestra.com/.well-known/apple-app-site-association.

Si ves el archivo JSON correctamente, como en la imagen siguiente, ya está todo configurado.

Site association JSON file content

Al lanzar la app notarás que la barra QuickType sugiere las credenciales de tu sitio web por lo tanto podrás iniciar sesión con un solo toque.

Credentials suggestion in the QuickType bar

Si tu deseas aprender más acerca del AutoCompletado de Contraseñas , consulta la Sesión 206 en WWWDC 2017

Conclusion

Como ya hemos visto, implementar el AutoCompletado de Contraseñas es muy fácil. Debes considerar tomar algunos minutos para implementarlo para la comodidad de tus usuarios y negocios. Acelerará el proceso de inicio de sesión y mejorará la retención de tu aplicación.

Estén atentos de los nuevos tutoriales que cubren las nuevas APIs de iOS 11, mientras tanto, echa un vistazo a algunos de nuestros otros artículos sobre desarrollo de aplicaciones iOS.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.