Saisie automatique dans Compose

Certaines applications, telles que les gestionnaires de mots de passe, peuvent renseigner les composants d'autres applications à l'aide des données fournies par l'utilisateur. Ces applications sont ce que l'on appelle des services de saisie automatique. La fonctionnalité Autofill Framework gère la communication entre une application et un service de saisie automatique.

Remplir des identifiants et des formulaires est une tâche fastidieuse sujette aux erreurs. La saisie automatique permet aux utilisateurs de gagner du temps lors du remplissage des champs et de limiter les erreurs de saisie.

Avec seulement quelques lignes de code, vous pouvez implémenter la saisie automatique dans Compose. Cette fonctionnalité offre les avantages suivants aux utilisateurs :

Remplir les identifiants

La saisie automatique permet aux utilisateurs de renseigner leurs identifiants de différentes manières :

  • Le système affiche des suggestions de saisie automatique pour l'utilisateur lorsqu'il appuie sur un champ où la sémantique de saisie automatique est définie.
  • Le système affiche des suggestions de saisie automatique pour l'utilisateur et les filtre en fonction de ce qu'il saisit.

Enregistrer les identifiants

Les utilisateurs peuvent enregistrer des identifiants via la saisie automatique de différentes manières :

  • Le système déclenche une boîte de dialogue d'enregistrement, qui invite l'utilisateur à enregistrer les informations lorsqu'il saisit des informations nouvelles ou mises à jour dans un champ compatible avec la saisie automatique. Vous pouvez enregistrer de deux manières :
    • Explicitement, en validant des informations (par exemple, en cliquant sur un bouton)
    • Implicitement, lorsqu'un utilisateur quitte la page
  • Selon votre fournisseur d'identifiants, le système peut suggérer un mot de passe sécurisé à l'utilisateur lorsqu'un champ est défini sur ContentType.NewPassword.

Vous pouvez utiliser la saisie automatique dans votre application pour simplifier la récupération des données enregistrées pour les utilisateurs. La saisie automatique est compatible avec les composants de texte via BasicTextField et tous les champs de texte Material qui s'appuient sur ce composant.

Conf. saisie auto

Avant d'utiliser les API de saisie automatique sur votre appareil ou votre émulateur, vous devez activer la saisie automatique dans les paramètres. Vous pouvez y spécifier un fournisseur d'identifiants pour que la saisie automatique stocke vos identifiants.

Page de paramètres montrant comment spécifier un fournisseur d'identifiants.
Figure 1. Page de paramètres montrant comment spécifier un fournisseur d'identifiants.

Ajouter la saisie automatique à votre champ de texte à l'aide du type de contenu

Pour indiquer qu'un TextField est compatible avec la saisie automatique, définissez la sémantique ContentType avec les types que le champ peut accepter. Cela indique aux services de saisie automatique le type de données utilisateur qui peut être pertinent pour ce champ spécifique. Utilisez ContentType.Username pour définir un TextField que les utilisateurs peuvent remplir avec leur nom d'utilisateur.

En définissant la sémantique ContentType, vos utilisateurs peuvent accéder aux informations de saisie automatique déjà enregistrées dans le fournisseur d'identifiants de leur appareil. Par exemple, si un utilisateur s'est déjà connecté à votre application via le navigateur Chrome sur son ordinateur portable et qu'il a enregistré son mot de passe via un fournisseur d'identifiants, ses identifiants lui sont fournis via la saisie automatique.

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics { contentType = ContentType.Username }
)

Ajouter des champs de saisie automatique avec plusieurs types

Dans certains cas, vous pouvez souhaiter que votre TextField prenne plusieurs ContentType. Par exemple, un champ de connexion peut accepter une adresse e-mail ou un nom d'utilisateur. Vous pouvez ajouter plusieurs types de contenu à votre TextField avec l'opérateur +.

Pour connaître tous les types de données pouvant être enregistrés avec la saisie automatique, consultez la documentation de référence sur ContentType.

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)

Remplir des données avec la saisie automatique

Lorsque vous ajoutez un ContentType dans un TextField, vous n'avez rien d'autre à faire pour que les utilisateurs puissent saisir leurs identifiants.

Lorsqu'un utilisateur clique sur un champ pour lequel la saisie automatique est activée, s'il existe des données pertinentes stockées, un chip s'affiche dans la barre d'outils au-dessus du clavier pour l'inviter à saisir ses identifiants.

Chips dans la barre d'outils de texte affichant les identifiants enregistrés.
Figure 2. Chips dans la barre d'outils de texte affichant les identifiants enregistrés.

Enregistrer des données avec la saisie automatique via la navigation

Compose tente automatiquement de déterminer quand un utilisateur quitte une page et valide les identifiants saisis. Une fois qu'un champ est activé pour la saisie automatique, il enregistre automatiquement les informations d'identification lorsqu'un utilisateur quitte la page, sans nécessiter de code supplémentaire.

Enregistrer explicitement des données avec la saisie automatique

Pour enregistrer explicitement de nouveaux identifiants via des champs de texte avec la saisie automatique, le contexte de saisie automatique doit être validé (ou annulé) par le gestionnaire de saisie automatique. Le gestionnaire de saisie automatique local communique ensuite avec le framework de saisie automatique chaque fois que nécessaire. Si vous souhaitez supprimer les identifiants saisis par l'utilisateur, appelez AutofillManager.cancel pour supprimer toutes les données en attente sans les enregistrer.

Les extraits suivants montrent comment enregistrer des données avec la saisie automatique de manière explicite à l'aide d'un bouton :

  1. Créez une variable locale pour stocker le gestionnaire de saisie automatique, qui peut être récupéré de la manière suivante : 

    val autofillManager = LocalAutofillManager.current

  2. Dans votre TextField(s), ajoutez le type de contenu choisi via Modifier.semantics :

    val autofillManager = LocalAutofillManager.current

Column {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.NewUsername }
    )

    Spacer(modifier = Modifier.height(16.dp))

    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.NewPassword }
    )
}

  3. Validez le contexte de saisie automatique si nécessaire en cliquant sur un bouton :

    val autofillManager = LocalAutofillManager.current

Column {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.NewUsername },
    )

    Spacer(modifier = Modifier.height(16.dp))

    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.NewPassword },
    )

    // Submit button
    Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
}

Commit est appelé chaque fois qu'un utilisateur quitte l'écran. Si un bouton Envoyer est associé à la navigation, il n'est pas nécessaire d'appeler Commit. Si vous souhaitez toujours qu'un clic sur Envoyer déclenche la boîte de dialogue d'enregistrement, ajoutez Commit ici.

Lorsque l'utilisateur clique sur le bouton, une bottom sheet s'affiche pour l'inviter à enregistrer les identifiants auprès du fournisseur d'identifiants sélectionné :

Bottom sheet invitant les utilisateurs à enregistrer leur mot de passe.
Figure 3. Bottom sheet invitant les utilisateurs à enregistrer leur mot de passe.

Enregistrer des données avec la saisie automatique via la suggestion de mot de passe sécurisé

Selon votre fournisseur d'identifiants, lorsque vous utilisez les types de contenu NewUsername et NewPassword, les utilisateurs peuvent voir un bouton sur le clavier pour suggérer un mot de passe sécurisé. Lorsqu'ils cliquent dessus, une bottom sheet s'affiche, leur permettant d'enregistrer leurs identifiants. Vous n'avez rien d'autre à implémenter pour que les utilisateurs puissent en profiter.

Le chip "Suggérer un mot de passe sécurisé" dans la barre d'outils du clavier.
Figure 4. Le chip "Suggérer un mot de passe sécurisé" dans la barre d'outils du clavier.
Bottom sheet invitant les utilisateurs à utiliser un mot de passe sécurisé.
Figure 5. Bottom sheet invitant les utilisateurs à utiliser un mot de passe sécurisé.

Dépannage

Lorsque vous appelez le parcours utilisateur "Enregistrement", si vous cliquez sur "Pas maintenant" plusieurs fois, il est possible que votre fournisseur d'identifiants n'affiche plus la bottom sheet. Pour la réactiver et la faire réapparaître, vous devez supprimer les applications spécifiques qui ont bloqué l'invite "Enregistrer ce mot de passe ?".

Bottom sheet invitant les utilisateurs à enregistrer leur mot de passe.
Figure 6. Bottom sheet invitant les utilisateurs à enregistrer leur mot de passe.

Personnaliser davantage la saisie automatique

Dans un parcours utilisateur de saisie automatique classique, lorsqu'un composant compatible avec la saisie automatique a été renseigné avec des identifiants, il change de couleur et est mis en surbrillance pour indiquer à l'utilisateur que la saisie automatique a bien été effectuée.

Pour personnaliser cette couleur de mise en surbrillance, utilisez CompositionLocal et indiquez la couleur de votre choix. La couleur de mise en surbrillance par défaut de la saisie automatique est définie sur Color(0x4dffeb3b).

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}