Flutter如何自动填充其他网站的账号密码凭据？

可以实现自动填充，核心是借助InAppWebView的页面加载完成事件，注入JavaScript代码定位目标网站的登录输入框并填入凭据，具体步骤如下：

1. 留存用户输入的凭据 #

在登录页的登录按钮点击事件中，将用户输入的email.text和password.text暂存（比如用全局变量、SharedPreferences等本地存储方式），供后续WebView调用。

2. 配置无头InAppWebView并注入填充代码 #

初始化无头InAppWebView时，监听onLoadStop事件，待目标网站登录页加载完成后，执行JS代码填充对应输入框，示例代码如下：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("目标网站的登录地址")),
  initialSettings: InAppWebViewSettings(
    javaScriptEnabled: true, // 必须开启JavaScript支持
    isInspectable: false,
  ),
  onLoadStop: (controller, url) async {
    // 替换为目标网站实际的邮箱/用户名输入框选择器，比如id、name属性
    final emailSelector = 'input[id="user_email"]'; 
    final passwordSelector = 'input[name="user_password"]';

    // 注入JS代码完成填充
    await controller.evaluateJavascript(source: '''
      // 填充邮箱
      const emailInput = document.querySelector('$emailSelector');
      if (emailInput) {
        emailInput.value = "${email.text}";
        // 触发输入事件，确保网站检测到内容变化
        emailInput.dispatchEvent(new Event('input'));
      }
      // 填充密码
      const passwordInput = document.querySelector('$passwordSelector');
      if (passwordInput) {
        passwordInput.value = "${password.text}";
        passwordInput.dispatchEvent(new Event('input'));
      }
      // 可选：自动提交登录表单
      // const loginForm = document.querySelector('form.login-form');
      // if (loginForm) loginForm.submit();
    ''');
  },
)

关键注意事项 #

• 选择器准确性：必须提前查看目标网站登录表单的源码，确认邮箱、密码输入框的正确选择器（id、name、class等），否则JS无法定位输入框。
• 触发输入事件：部分网站会监听输入框的input或change事件来启用登录按钮，填充后手动触发这些事件，避免按钮无法点击。
• 安全防护：存储和传递用户凭据时要加密处理，避免明文存储引发信息泄露。
• 无头模式适配：确保InAppWebView的无头配置参数正确，避免页面加载异常。

内容的提问来源于stack exchange，提问作者michele