@capgo/capacitor-autofill-save-password

Vue d’ensemble

Le plugin Capacitor Autofill Save Password fournit des fonctionnalités de sauvegarde et de remplissage automatique de mot de passe pour les applications Capacitor. Ce plugin s’intègre avec la gestion des identifiants au niveau du système pour offrir des expériences d’authentification transparentes avec stockage et récupération sécurisés des mots de passe.

Sauvegarde de mot de passe

Sauvegardez les identifiants dans le trousseau système en toute sécurité 🔐

Intégration du remplissage automatique

Support du remplissage automatique de mot de passe au niveau du système 🗝️

Multi-plateforme

Support iOS avec développement Android en cours 📱

Association de domaine

Domaines associés pour une authentification transparente ❤️

Installation

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

Support de plateforme

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

Configuration 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"
    ]
  }
}

Méthodes API principales

Gestion des mots de passe

• promptDialog(options) - Sauvegarder le mot de passe dans le trousseau système
• readPassword() - Lire le mot de passe sauvegardé depuis le trousseau

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;
}

Configuration Android (En cours)

Pour le support Android futur, la configuration suivante sera requise :

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>

3. JSON Google Services

Ajoutez google-services.json à votre projet Android.

Référence API

promptDialog(options)

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

interface SavePasswordOptions {
  username: string;
  password: string;
  url?: string; // iOS uniquement - URL du domaine associé
}

readPassword()

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

interface SavedCredentials {
  username: string;
  password: string;
}

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

Limitations

• Le support Android est actuellement en cours de développement
• iOS nécessite une configuration appropriée des domaines associés
• Le comportement du remplissage automatique peut varier selon les versions d’iOS
• Nécessite le consentement de l’utilisateur pour la sauvegarde et l’accès aux identifiants

Documentation

Consultez la documentation complète pour des guides d’implémentation détaillés et des modèles d’intégration avancés.