Connexions plus rapides avec la saisie automatique de mot de passe dans iOS 11

Saisie automatique du mot de passe dans iOS 11

La connexion est la première étape qu’un utilisateur doit franchir lorsqu’il démarre avec une application nécessitant un compte. Cela prend généralement plusieurs secondes si l’utilisateur se souvient de ses informations d’identification et est capable de les saisir immédiatement. À la place, d’autres utilisateurs devront peut-être basculer vers leur service de gestion de mots de passe préféré (Porte-clés iCloud, 1Mot de passe, Dernier passage, etc.) pour copier leur nom d’utilisateur et leur mot de passe. Inutile de dire que cette interaction ralentit les utilisateurs et que certains d’entre eux abandonneront tout simplement le processus.

Il y a eu quelques tentatives pour améliorer cette expérience. 1Password, par exemple, offre un belle extension dont les développeurs d’applications peuvent profiter. Une autre solution déjà incluse dans iOS depuis la WWDC 2014 est Identifiants partagés Safari.

Dans iOS 11, cependant, Apple a introduit un moyen encore plus transparent de rationaliser le processus de connexion: la nouvelle API Password AutoFill. Par rapport aux solutions précédentes, il est plus facile à utiliser pour les utilisateurs et plus rapide à mettre en œuvre pour les développeurs.

Dans cet article, vous apprendrez comment accélérer le processus de connexion et améliorer la rétention des utilisateurs avec le remplissage automatique de mot de passe, une nouvelle API introduite dans iOS 11.

introduction

La saisie automatique du mot de passe permet aux utilisateurs de remplir leurs informations de connexion directement dans votre application en interagissant avec la barre QuickType qui est affichée au-dessus du clavier. L’amélioration du flux de connexion augmentera la rétention de vos utilisateurs ainsi que la réputation de votre application. Après ce tutoriel, vous pourrez réduire la durée du flux de connexion à quelques secondes.

Il y a deux étapes pour implémenter la saisie automatique de mot de passe dans votre application:

  • Affichez la barre QuickType avec l’icône de clé et laissez les utilisateurs choisir manuellement la connexion correcte.
  • Associez éventuellement votre application et votre site Web de manière sécurisée, de sorte que la barre QuickType puisse suggérer la connexion correcte à l’utilisateur pour accélérer encore le processus.

La barre QuickType

La première étape consiste à faire apparaître la barre QuickType avec le bouton clé. Après cette étape, les utilisateurs pourront appuyer dessus et sélectionner manuellement la connexion correcte à partir du contrôleur de vue présenté. La seule propriété requise pour faire apparaître la barre QuickType est de définir le textContent propriété dans votre UITextField ou UITextView objet. Si vous disposez d’un contrôle personnalisé conforme à <UITextInput>, le même code s’appliquera.

En relation :  Devenir ami avec votre Nemesis: le temps

Vous devez ajouter cette propriété à vos champs e-mail / nom d’utilisateur et mot de passe. Une mise en œuvre courante serait la suivante:

iOS affichera la barre QuickType sur tous les appareils exécutant iOS 11 lorsqu’au moins un mot de passe est enregistré dans le trousseau. Si vous testez sur le simulateur et que vous ne voyez pas la barre QuickType apparaître, c’est probablement parce que votre trousseau est vide.

La barre QuickType avec l'icône de clé simple

Une fois que l’utilisateur a appuyé sur l’icône de clé et s’est authentifié via Touch ID, une liste de tous les mots de passe enregistrés est présentée. L’utilisateur peut rechercher ou faire défiler, et lorsque les bonnes informations d’identification sont trouvées, d’un simple clic, les champs de connexion seront remplis.

Comme vous pouvez le voir, la partie la plus lente de ce processus est de trouver la bonne connexion dans le trousseau. Dans la section suivante, nous verrons comment nous pouvons supprimer cette étape et améliorer encore plus l’expérience.

Suggestions d’informations d’identification

Vous pouvez également indiquer à iOS le site Web auquel votre application est associée. Si le trousseau contient des informations d’identification enregistrées à partir de Safari sur iOS ou macOS, ces informations seront suggérées, éliminant ainsi les tracas de les rechercher manuellement dans le trousseau.

Si vous utilisez Liens universels déjà, votre application doit afficher les informations d’identification de votre site Web dans la barre QuickType. iOS sait quel site Web est associé à votre application, il est donc prêt à 100% à suggérer des informations d’identification.

Un autre moyen de lier fortement votre application et votre site Web, sans avoir besoin de liens universels, est un service de domaine associé aux informations d’identification Web.

Basculez vers les paramètres de votre projet Xcode, accédez à la Capacités onglet et activez Domaines associés. Ajoutez l’URL de votre site Web ici. Disons que le nom de domaine de votre site Web est amazingwebsite.com: le nom de domaine listé doit être identifiants Web: amazingwebsite.com.

Section des capacités Xcode avec les domaines associés activés

Voilà pour la configuration dans le projet Xcode. iOS connaît désormais le site Web associé à votre application. La dernière étape consiste à télécharger un fichier sur votre serveur, afin qu’iOS puisse vérifier que vous possédez le site Web que vous essayez d’associer à l’application. (Ceci afin d’empêcher les applications malveillantes de voler les informations d’identification d’autres sites Web.)

Créez un nouveau fichier texte (en dehors de votre projet Xcode si vous préférez) nommé association-site-app-pomme. Il s’agit d’un nom standard que iOS recherche sur votre serveur à l’aide d’une connexion sécurisée (vous devez avoir configuré SSL sur votre serveur). Le contenu du fichier est également assez standard. Copiez et collez simplement le code suivant.

Vous devez changer la chaîne dans le apps tableau pour être votre ID d’équipe (qui se trouve dans le portail des développeurs sous la section abonnement), suivi d’un point et de l’identifiant du bundle de l’application. Créez un dossier nommé .well-known dans le répertoire racine de votre serveur et téléchargez-y le fichier.

En relation :  Personnalisez Chrome avec 10 extensions de navigateur uniques

Pour vous assurer que tout s’est déroulé comme prévu, vérifiez dans un navigateur Web si le fichier existe à l’adresse spécifiée. Voici mon adresse par exemple: https://patrickbalestra.com/.well-known/apple-app-site-association.

Si vous voyez correctement le fichier JSON, comme dans l’image suivante, vous êtes prêt.

Contenu du fichier JSON d'association de site

Lancez l’application et notez que la barre QuickType suggère les informations d’identification de votre site Web afin que vous puissiez vous connecter en un seul clic.

Suggestion d'informations d'identification dans la barre QuickType

Si vous souhaitez en savoir plus sur la saisie automatique des mots de passe, consultez Session 206 à la WWDC 2017.

Conclusion

Comme nous venons de le voir, la mise en œuvre de la saisie automatique des mots de passe est très simple. Vous devriez envisager de prendre quelques minutes pour le mettre en œuvre pour la commodité de vos utilisateurs et de votre entreprise. Cela accélérera le processus de connexion et améliorera la rétention de votre application.

Restez à l’écoute pour de nouveaux tutoriels couvrant les nouvelles API iOS 11, et en attendant, consultez certains de nos autres articles sur le développement d’applications iOS.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.