Commencer

##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

Prise en charge de la plateforme

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

Configuration de la plateforme

iOS

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

Android (Support futur)

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>

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

API Référence

promptDialog(options)

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

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

Paramètres	Tapez
options	SavePasswordOptions

readPassword()

readPassword() => Promise<SavedCredentials>

Récupère les informations d’identification enregistrées à partir du trousseau du système.

Retours : Promise<SavedCredentials>

##Interfaces

Enregistrer les options de mot de passe

Accessoire	Tapez	Descriptif
username	string	Le nom d’utilisateur à enregistrer
password	string	Le mot de passe à enregistrer
url	string	iOS uniquement - URL du domaine associé (facultatif)

Informations d’identification enregistrées

Accessoire	Tapez	Descriptif
username	string	Le nom d’utilisateur enregistré
password	string	Le mot de passe enregistré

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