@capgo/capacitor-autofill-save-password

通过系统集成启用密码自动填充和凭据管理，实现无缝的身份验证体验。

入门指南 Github

概述

Capacitor 自动填充保存密码插件为 Capacitor 应用程序提供密码保存和自动填充功能。该插件与系统级凭据管理集成，通过安全的密码存储和检索提供无缝的身份验证体验。

密码保存

安全地将凭据保存到系统钥匙串

自动填充集成

系统级密码自动填充支持

跨平台

支持 iOS，Android 开发中

域名关联

关联域名实现无缝身份验证

安装

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

平台支持

iOS：完全支持（适用于 iOS 18.3 及更早版本）
Android：开发中

iOS 配置

1. 关联域名设置

在 Apple Developer 账户中配置关联域名，并将其添加到 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. Web 凭据配置

在网站上添加 .well-known/apple-app-site-association 文件：

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

核心 API 方法

密码管理

promptDialog(options) - 将密码保存到系统钥匙串
readPassword() - 从钥匙串读取保存的密码

使用示例

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

// 成功登录后保存密码
async function login(username: string, password: string) {
  try {
    // 在此处执行登录逻辑
    const loginSuccess = await performLogin(username, password);

    if (loginSuccess) {
      // 提示用户保存密码
      await SavePassword.promptDialog({
        username: username,
        password: password,
        url: 'https://yourdomain.com' // 仅限 iOS
      });

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

// 读取保存的密码以进行自动填充
async function loadSavedCredentials() {
  try {
    const credentials = await SavePassword.readPassword();

    if (credentials.username && credentials.password) {
      console.log('Found saved credentials');
      // 预填充登录表单
      return {
        username: credentials.username,
        password: credentials.password
      };
    }
  } catch (error) {
    console.error('Failed to read saved password:', error);
  }

  return null;
}

Android 配置（开发中）

对于未来的 Android 支持，将需要以下配置：

1. Google Services Plugin

添加到 android/app/build.gradle：

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

2. 域名配置

添加到 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

将 google-services.json 添加到 Android 项目中。

API 参考

promptDialog(options)

将用户凭据保存到系统钥匙串。

interface SavePasswordOptions {
  username: string;
  password: string;
  url?: string; // 仅限 iOS - 关联域名 URL
}

readPassword()

从系统钥匙串检索保存的凭据。

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

与登录流程集成

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

class AuthService {
  async login(username: string, password: string) {
    try {
      // 使用后端进行身份验证
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      });

      if (response.ok) {
        // 提供保存凭据的选项
        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) {
      // 用户拒绝保存或发生错误
      console.log('Password not saved:', error);
    }
  }

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

最佳实践

仅在身份验证成功后提示保存密码
妥善处理用户拒绝保存密码的情况
对钥匙串访问失败实施适当的错误处理
使用关联域名实现无缝的 Web 应用凭据共享
在不同 iOS 版本中测试自动填充功能

安全注意事项

凭据使用适当的安全标志存储在系统钥匙串中
关联域名确保凭据仅可被授权应用访问
遵循平台安全指南进行凭据管理
对于敏感应用，考虑实施额外的安全措施

限制

Android 支持目前正在开发中
iOS 需要适当的关联域名配置
自动填充行为可能在不同 iOS 版本中有所不同
需要用户同意才能保存和访问凭据

文档

查看完整文档，了解详细的实施指南和高级集成模式。