如何在WKWebView中为Microsoft登录URL启用AutoFill功能？

在应用内通过WKWebView访问微软登录页时，遇到分两页式JavaScript表单无法触发AutoFill的问题：输入用户名和密码的页面是分开加载的，WKWebView无法自动填充iCloud钥匙串中的凭证，但Safari打开同一URL时功能正常。

已知条件：

• 简单测试页面能正常触发WKWebView的AutoFill启发式规则
• 应用已正确配置域权限，原生文本输入框可正常保存和填充钥匙串凭证
• 无法修改微软登录页的HTML代码（标准AutoFill所需的input标签配置如下）：

<input id="user-text-field" type="email" autocomplete="username"/>
<input id="password-text-field" type="password" autocomplete="current-password"/>

1. 注入JavaScript动态修正DOM属性 #

通过WKUserScript在页面加载过程中注入脚本，动态为输入框添加符合AutoFill要求的autocomplete属性，弥补目标页面的缺失。

示例Swift代码：

// 构造注入脚本，监听DOM变化并修正输入框属性
let autoFillFixScript = """
const domObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length) {
      // 匹配用户名输入框（根据微软登录页实际DOM调整选择器）
      const usernameInput = document.querySelector('input[type="email"], input[name="loginfmt"]');
      if (usernameInput && !usernameInput.getAttribute('autocomplete')) {
        usernameInput.setAttribute('autocomplete', 'username');
      }
      // 匹配密码输入框
      const passwordInput = document.querySelector('input[type="password"], input[name="passwd"]');
      if (passwordInput && !passwordInput.getAttribute('autocomplete')) {
        passwordInput.setAttribute('autocomplete', 'current-password');
      }
    }
  });
});
// 监听整个文档的DOM变化
domObserver.observe(document.body, { childList: true, subtree: true });
"""

// 将脚本添加到WKWebView配置
let userScript = WKUserScript(source: autoFillFixScript, 
                              injectionTime: .atDocumentEnd, 
                              forMainFrameOnly: true)
webView.configuration.userContentController.addUserScript(userScript)

注意：需要根据微软登录页的实际DOM结构调整选择器（比如微软登录页的用户名输入框name通常是loginfmt，密码框是passwd），确保能精准匹配目标元素。

2. 验证并强化WKWebView配置 #

确保应用的AutoFill相关配置完全正确：

• 确认Info.plist中已添加关联域com.apple.developer.associated-domains，值包含webcredentials:myapplications.microsoft.com
• 检查WKWebViewConfiguration的相关设置：

let webConfig = WKWebViewConfiguration()
// 启用JavaScript（微软登录页依赖JS）
webConfig.defaultWebpagePreferences.allowsContentJavaScript = true
// 使用默认网站数据存储，确保钥匙串访问权限正常
webConfig.websiteDataStore = WKWebsiteDataStore.default()

3. 自定义密码填充扩展（ASCredentialProviderExtension） #

如果脚本注入无法生效，可以通过系统的密码填充扩展实现自定义填充逻辑：

• 创建ASCredentialProviderExtension类型的扩展，实现凭证列表展示和填充逻辑
• 在扩展中识别微软登录页的URL，匹配对应的钥匙串凭证
• 用户授权后，扩展可直接将凭证填充到WKWebView的输入框中
  这种方式开发成本较高，但能彻底绕过页面DOM的限制，适配复杂的JS驱动页面。

4. 强制触发输入框焦点以唤起AutoFill #

在WKWebView加载完成后，通过JS让输入框获得焦点，部分场景下会触发系统的AutoFill提示：

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
  // 针对用户名页面，触发输入框焦点
  webView.evaluateJavaScript("document.querySelector('input[name=\"loginfmt\"]').focus();") { _, error in
    guard let error = error else { return }
    print("Failed to focus input: \(error.localizedDescription)")
  }
}

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