@Capgo/Capacitor-autofill-Guardar-password

Descripción General

El Plugin Capacitor Autofill Guardar Password proporciona funcionalidad de guardado y autocompletar de contraseñas para aplicaciones Capacitor. Este Plugin se integra con la gestión de credenciales a nivel del sistema para ofrecer experiencias de autenticación fluidas con almacenamiento y recuperación segura de contraseñas.

Guardado de contraseñas

Guarda credenciales en el llavero del sistema de forma segura 🔐

Integración de autocompletar

Soporte de autocompletar de contraseñas a nivel del sistema 🗝️

Multiplataforma

Soporte iOS con desarrollo de Android en progreso 📱

Asociación de dominios

Dominios asociados para autenticación fluida ❤️

Instalación

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

Soporte de Plataforma

• iOS: Soporte completo (funciona con iOS 18.3 y versiones anteriores)
• Android: Trabajo en progreso

Configuración de iOS

1. Configuración de Dominios Asociados

Configura dominios asociados en tu cuenta de Apple Developer y agrégalos a tu archivo 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. Configuración de Credenciales Web

Agrega un archivo .well-known/apple-app-site-association a tu sitio web:

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

Métodos API Principales

Gestión de Contraseñas

• promptDialog(options) - Guardar contraseña en el llavero del sistema
• readPassword() - Leer contraseña guardada del llavero

Ejemplo de Uso

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

// Guardar contraseña después de un inicio de sesión exitoso
async function login(username: string, password: string) {
  try {
    // Realiza tu lógica de inicio de sesión aquí
    const loginSuccess = await performLogin(username, password);

    if (loginSuccess) {
      // Solicitar al usuario guardar la contraseña
      await SavePassword.promptDialog({
        username: username,
        password: password,
        url: 'https://yourdomain.com' // Solo iOS
      });

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

// Leer contraseña guardada para autocompletar
async function loadSavedCredentials() {
  try {
    const credentials = await SavePassword.readPassword();

    if (credentials.username && credentials.password) {
      console.log('Found saved credentials');
      // Pre-llenar formulario de inicio de sesión
      return {
        username: credentials.username,
        password: credentials.password
      };
    }
  } catch (error) {
    console.error('Failed to read saved password:', error);
  }

  return null;
}

Configuración de Android (Trabajo en Progreso)

Para soporte futuro de Android, se requerirá la siguiente configuración:

1. Plugin de Google Services

Agrega a android/app/build.gradle:

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

2. Configuración de Dominio

Agrega a 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 de Google Services

Agrega google-services.json a tu proyecto Android.

Referencia de API

promptDialog(Opciones)

Guarda credenciales de usuario en el llavero del sistema.

interface SavePasswordOptions {
  username: string;
  password: string;
  url?: string; // Solo iOS - URL del dominio asociado
}

readPassword()

Recupera credenciales guardadas del llavero del sistema.

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

Integración con Flujo de Inicio de Sesión

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

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

      if (response.ok) {
        // Ofrecer guardar credenciales
        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) {
      // Usuario rechazó guardar o ocurrió un error
      console.log('Password not saved:', error);
    }
  }

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

Mejores Prácticas

• Solo solicita guardar contraseñas después de una autenticación exitosa
• Maneja casos donde los usuarios rechazan guardar contraseñas con elegancia
• Implementa manejo de errores adecuado para fallos de acceso al llavero
• Usa dominios asociados para compartir credenciales sin problemas entre web y Aplicación
• Prueba la funcionalidad de autocompletar en diferentes versiones de iOS

Consideraciones de Seguridad

• Las credenciales se almacenan en el llavero del sistema con indicadores de seguridad apropiados
• Los dominios asociados aseguran que las credenciales solo sean accesibles para aplicaciones autorizadas
• Sigue las pautas de seguridad de la plataforma para la gestión de credenciales
• Considera implementar medidas de seguridad adicionales para aplicaciones sensibles

Limitaciones

• El soporte de Android está actualmente en desarrollo
• iOS requiere configuración adecuada de dominios asociados
• El comportamiento de autocompletar puede variar entre diferentes versiones de iOS
• Requiere consentimiento del usuario para guardar y acceder a credenciales

Documentación

Consulta la documentación completa para guías de implementación detalladas y patrones de integración avanzados.