@capgo/capacitor-autofill-save-password

Aperçu

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

Enregistrement du mot de passe

Enregistrez les informations d’identification dans le trousseau du système en toute sécurité 🔐

Intégration de remplissage automatique

Prise en charge de la saisie automatique des mots de passe au niveau du système 🗝️

Cross-platform

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

Prise en charge de la plateforme

• iOS : Prise en charge complète (fonctionne avec iOS 18.3 et versions antérieures)
• Android : Travaux en cours

iOSConfiguration

1. Configuration des domaines associés

Configurez les domaines associés dans votre compte développeur Apple 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 informations d’identification Web

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

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

Méthodes principales API

Gestion des mots de passe

• promptDialog(options) - Enregistrer le mot de passe dans le trousseau du système
• readPassword() - Lire le mot de passe enregistré à partir du trousseau

Exemple d’utilisation

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

// Save password after successful login
async function login(username: string, password: string) {
  try {
    // Perform your login logic here
    const loginSuccess = await performLogin(username, password);

    if (loginSuccess) {
      // Prompt user to save password
      await SavePassword.promptDialog({
        username: username,
        password: password,
        url: 'https://yourdomain.com' // iOS only
      });

      console.log('Password saved successfully');
    }
  } catch (error) {
    console.error('Failed to save password:', error);
  }
}

// Read saved password for autofill
async function loadSavedCredentials() {
  try {
    const credentials = await SavePassword.readPassword();

    if (credentials.username && credentials.password) {
      console.log('Found saved credentials');
      // Pre-fill login form
      return {
        username: credentials.username,
        password: credentials.password
      };
    }
  } catch (error) {
    console.error('Failed to read saved password:', error);
  }

  return null;
}

Android Configuration (travail en cours)

Pour la future prise en charge de Android, la configuration suivante sera requise :

1. Plugin de services Google

Ajouter à android/app/build.gradle :

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

2. Configuration du domaine

Ajouter à 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. Google Services JSON

Ajoutez google-services.json à votre projet Android.

API Référence

promptDialog(options)

Enregistre les informations d’identification de l’utilisateur dans le trousseau du système.

interface SavePasswordOptions {
  username: string;
  password: string;
  url?: string; // iOS only - associated domain URL
}

readPassword()

Récupère les informations d’identification enregistrées à partir du trousseau du 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 {
      // Authenticate with your backend
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      });

      if (response.ok) {
        // Offer to save credentials
        await this.offerToSavePassword(username, password);
        return true;
      }
    } catch (error) {
      console.error('Login failed:', error);
    }
    return false;
  }

  private async offerToSavePassword(username: string, password: string) {
    try {
      await SavePassword.promptDialog({
        username,
        password,
        url: 'https://yourdomain.com'
      });
    } catch (error) {
      // User declined to save or error occurred
      console.log('Password not saved:', error);
    }
  }

  async loadSavedCredentials() {
    try {
      return await SavePassword.readPassword();
    } catch (error) {
      console.log('No saved credentials found');
      return null;
    }
  }
}

## meilleures pratiques

• Invite uniquement à enregistrer les mots de passe après une authentification réussie
• Gérer les cas où les utilisateurs refusent d’enregistrer correctement leurs mots de passe
• Implémenter une gestion appropriée des erreurs pour les échecs d’accès au trousseau
• Utilisez les domaines associés pour un partage transparent des informations d’identification des applications Web
• Testez la fonctionnalité de remplissage automatique sur différentes versions de iOS

Considérations de sécurité

• Les informations d’identification sont stockées dans le trousseau du système avec les indicateurs de sécurité appropriés
• Les domaines associés garantissent que les informations d’identification ne sont accessibles qu’aux applications autorisées
• Suivez les directives de sécurité de la plateforme pour la gestion des informations d’identification
• Envisager de mettre en œuvre des mesures de sécurité supplémentaires pour les applications sensibles

Limites

• Le support Android est actuellement en cours de développement
• iOS nécessite une configuration appropriée des domaines associés
• Le comportement de remplissage automatique peut varier selon les différentes versions de iOS
• Nécessite le consentement de l’utilisateur pour enregistrer et accéder aux informations d’identification

##Documents

Consultez la documentation complète pour obtenir des guides de mise en œuvre détaillés et des modèles d’intégration avancés.