密码自动填充：WKWebView不弹出「保存密码」提示框的解决方案

WKWebView本身不会像Safari那样自动触发密码保存提示，需要开发者主动结合系统API实现这个功能，核心是通过Security框架的SecAddSharedWebCredential方法触发系统的保存密码弹窗，具体实现如下：

核心逻辑 #

Safari内置了表单提交成功的检测逻辑，但WKWebView作为嵌入式组件，系统无法自动感知登录是否成功（比如AJAX异步登录无页面跳转的场景），因此需要我们手动捕获登录成功事件，获取用户名和密码后调用系统API触发保存提示。

实现步骤 #

1. 确认基础配置已完成 #

确保你已经完成：

• 配置了正确的应用关联域名
• 网页登录表单的输入框已设置正确的autocomplete属性（如username、current-password）

2. 捕获登录成功事件 #

有两种常用方式捕获登录成功状态：

方式一：通过页面跳转判断（适合传统页面跳转式登录）

在WKNavigationDelegate的didFinish方法中，检测当前URL是否为登录成功后的目标页面：

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    guard let currentURL = webView.url?.absoluteString else { return }
    // 替换为你的登录成功跳转URL特征，比如包含"/dashboard"或"/home"
    if currentURL.contains("/dashboard") {
        fetchCredentialsAndTriggerSave(webView: webView)
    }
}

private func fetchCredentialsAndTriggerSave(webView: WKWebView) {
    // 获取用户名
    webView.evaluateJavaScript("document.querySelector('input[autocomplete=\"username\"]').value") { usernameRes, _ in
        guard let username = usernameRes as? String, !username.isEmpty else { return }
        
        // 获取密码
        webView.evaluateJavaScript("document.querySelector('input[autocomplete=\"current-password\"]').value") { passwordRes, _ in
            guard let password = passwordRes as? String, !password.isEmpty else { return }
            
            // 触发保存提示
            guard let domain = webView.url?.host else { return }
            SecAddSharedWebCredential(domain as CFString, username as CFString, password as CFString) { error in
                if let error = error {
                    print("密码保存失败: \(error.localizedDescription)")
                }
            }
        }
    }
}

方式二：网页主动通知Native（适合AJAX异步登录）

和前端开发配合，登录成功后通过JavaScript向Native发送消息：

// 网页端登录成功后执行的代码
window.webkit.messageHandlers.loginSuccess.postMessage({
    username: document.querySelector('input[autocomplete="username"]').value,
    password: document.querySelector('input[autocomplete="current-password"]').value
});

Native端配置消息处理器：

// 初始化WKWebView时配置
let config = WKWebViewConfiguration()
config.userContentController.add(self, name: "loginSuccess")
let webView = WKWebView(frame: view.bounds, configuration: config)
webView.navigationDelegate = self
view.addSubview(webView)

// 实现WKScriptMessageHandler协议
extension YourViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        guard message.name == "loginSuccess",
              let creds = message.body as? [String: String],
              let username = creds["username"],
              let password = creds["password"],
              let domain = webView.url?.host else { return }
        
        SecAddSharedWebCredential(domain as CFString, username as CFString, password as CFString) { error in
            if let error = error {
                print("密码保存失败: \(error.localizedDescription)")
            }
        }
    }
}

3. 注意事项 #

• 传入SecAddSharedWebCredential的domain必须是已配置的关联域名，且不带http/https前缀（比如example.com）
• 如果用户已保存过该域名的同名账号密码，系统不会重复弹出提示，仅当密码更新时才会触发
• 确保获取的用户名和密码非空，否则API不会触发弹窗

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