Premiers pas

Installation

npm

npm install @capgo/capacitor-autofill-save-password
npx cap sync

yarn

yarn add @capgo/capacitor-autofill-save-password
npx cap sync

pnpm

pnpm add @capgo/capacitor-autofill-save-password
npx cap sync

bun

bun add @capgo/capacitor-autofill-save-password
npx cap sync

Support de plateforme

• iOS : Support complet (iOS 18.3 et versions antérieures)
• Android : En cours de développement

Configuration de plateforme

iOS

1. Configuration des domaines associés

Configurez les domaines associés dans votre compte Apple Developer et ajoutez-les à votre fichier App.entitlements :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.apple.developer.associated-domains</key>
    <array>
        <string>webcredentials:yourdomain.com</string>
        <string>webcredentials:www.yourdomain.com</string>
    </array>
</dict>
</plist>

2. Configuration des identifiants web

Ajoutez un fichier .well-known/apple-app-site-association à votre site web :

{
  "webcredentials": {
    "apps": [
      "TEAMID.com.yourcompany.yourapp"
    ]
  }
}

Android (Support futur)

1. Plugin Google Services

Ajoutez à android/app/build.gradle :

apply plugin: 'com.google.gms.google-services'

2. Configuration du domaine

Ajoutez à android/app/src/main/res/values/strings.xml :

<resources>
    <string name="asset_statements">
        [{
            "relation": ["delegate_permission/common.handle_all_urls"],
            "target": {
                "namespace": "web",
                "site": "https://yourdomain.com"
            }
        }]
    </string>
</resources>

Exemple d’utilisation

import { SavePassword } from '@capgo/capacitor-autofill-save-password';

// Sauvegarder le mot de passe après une connexion réussie
async function login(username: string, password: string) {
  try {
    // Effectuez votre logique de connexion ici
    const loginSuccess = await performLogin(username, password);

    if (loginSuccess) {
      // Demander à l'utilisateur de sauvegarder le mot de passe
      await SavePassword.promptDialog({
        username: username,
        password: password,
        url: 'https://yourdomain.com' // iOS uniquement
      });

      console.log('Mot de passe sauvegardé avec succès');
    }
  } catch (error) {
    console.error('Échec de la sauvegarde du mot de passe:', error);
  }
}

// Lire le mot de passe sauvegardé pour le remplissage automatique
async function loadSavedCredentials() {
  try {
    const credentials = await SavePassword.readPassword();

    if (credentials.username && credentials.password) {
      console.log('Identifiants sauvegardés trouvés');
      // Pré-remplir le formulaire de connexion
      return {
        username: credentials.username,
        password: credentials.password
      };
    }
  } catch (error) {
    console.error('Échec de la lecture du mot de passe sauvegardé:', error);
  }

  return null;
}

Référence API

promptDialog(options)

promptDialog(options: SavePasswordOptions) => Promise<void>

Sauvegarde les identifiants de l’utilisateur dans le trousseau système.

Param	Type
options	SavePasswordOptions

readPassword()

readPassword() => Promise<SavedCredentials>

Récupère les identifiants sauvegardés depuis le trousseau système.

Retourne : Promise<SavedCredentials>

Interfaces

SavePasswordOptions

Prop	Type	Description
username	string	Le nom d’utilisateur à sauvegarder
password	string	Le mot de passe à sauvegarder
url	string	iOS uniquement - URL du domaine associé (optionnel)

SavedCredentials

Prop	Type	Description
username	string	Le nom d’utilisateur sauvegardé
password	string	Le mot de passe sauvegardé

Intégration avec le flux de connexion

import { SavePassword } from '@capgo/capacitor-autofill-save-password';

class AuthService {
  async login(username: string, password: string) {
    try {
      // Authentification avec votre backend
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      });

      if (response.ok) {
        // Proposer de sauvegarder les identifiants
        await this.offerToSavePassword(username, password);
        return true;
      }
    } catch (error) {
      console.error('Échec de la connexion:', error);
    }
    return false;
  }

  private async offerToSavePassword(username: string, password: string) {
    try {
      await SavePassword.promptDialog({
        username,
        password,
        url: 'https://yourdomain.com'
      });
    } catch (error) {
      // L'utilisateur a refusé de sauvegarder ou une erreur s'est produite
      console.log('Mot de passe non sauvegardé:', error);
    }
  }

  async loadSavedCredentials() {
    try {
      return await SavePassword.readPassword();
    } catch (error) {
      console.log('Aucun identifiant sauvegardé trouvé');
      return null;
    }
  }
}

Meilleures pratiques

• Ne proposez de sauvegarder les mots de passe qu’après une authentification réussie
• Gérez les cas où les utilisateurs refusent de sauvegarder les mots de passe avec élégance
• Implémentez une gestion d’erreurs appropriée pour les échecs d’accès au trousseau
• Utilisez les domaines associés pour un partage transparent des identifiants entre web et application
• Testez la fonctionnalité de remplissage automatique sur différentes versions d’iOS

Considérations de sécurité

• Les identifiants sont stockés dans le trousseau système avec des indicateurs de sécurité appropriés
• Les domaines associés garantissent que les identifiants ne sont accessibles qu’aux applications autorisées
• Suivez les directives de sécurité de la plateforme pour la gestion des identifiants
• Envisagez d’implémenter des mesures de sécurité supplémentaires pour les applications sensibles