Selenium 测试：使用 Webauthn 进行身份验证

Question

在我的用例中，有一个注册页面会触发特定于浏览器的 webauthn 流程。例如，在 Mac 上的 Chrome 中，您将看到以下一系列弹出窗口：

1. 在 USB 安全密钥和内置传感器之间选择一个选项
2. MacOS 通过 Touch ID 进行确认
3. Chrome 中的确认对话框请求访问您的安全密钥

除了https://w3c.github.io/webauthn/#add-virtual-authenticator之外，我还没有找到太多关于使用 webauthn 进行身份验证作为 selenium 测试的一部分的文档。有哪些资源可以帮助开发人员了解如何在 JavaScript 中使用 Selenium 测试 webauthn？我还查看了https://github.com/SeleniumHQ/selenium/issues/7829但示例测试用例对我来说没有意义。示例将非常感激。

使用 js 的解决方案更新：

  import { Command } from 'selenium-webdriver/lib/command';

  addVirtualAuthenticator = async () => {
    await this.driver.getSession().then(async session => {
      this.driver
        .getExecutor()
        .defineCommand('AddVirtualAuthenticator', 'POST', `/session/${session.id_}/webauthn/authenticator`);

      let addVirtualAuthCommand = new Command('AddVirtualAuthenticator');
      addVirtualAuthCommand.setParameter('protocol', 'ctap2');
      addVirtualAuthCommand.setParameter('transport', 'internal');
      addVirtualAuthCommand.setParameter('hasResidentKey', true);
      addVirtualAuthCommand.setParameter('isUserConsenting', true);
      await this.driver.getExecutor().execute(addVirtualAuthCommand);
    });
  };

注意this.driver是 类型WebDriver。

addVirtualAuthenticator在点击与 交互的任何代码之前调用navigator（在我们的例子中，用户注册涉及对 的调用navigator.credentials.create）。如果您需要访问公钥（即navigator.credentials.get({ publicKey: options })在登录期间通过），那么这hasResidentKey一点至关重要。

Answer 1

如果您在 java 中实现此示例并使用 selenium 4，那么对 selenium 本身的测试是一个很好的示例资源。你基本上需要

• 创建虚拟身份验证器

  在您的情况下，您应该将 Transport 设置为internal并将 hasUserVerification 设置为true来模拟 touchID。

VirtualAuthenticatorOptions options = new VirtualAuthenticatorOptions();
options.setTransport(Transport.INTERNAL)
       .hasUserVerification(true)
       .isUserVerified(true);
VirtualAuthenticator authenticator =
    ((HasVirtualAuthenticator) driver).addVirtualAuthenticator(options);

• 执行触发注册的操作。

  如果一切顺利，浏览器不应显示对话框。相反，它应该立即返回凭据。

对于任何其他语言或 selenium 版本，您将需要直接调用 WebDriver 协议。正如您所指出的，W3C 规范有关于协议端点的文档。

对于java来说，可能是这样的

browser.driver.getExecutor().defineCommand(
    "AddVirtualAuthenticator", "POST", "/session/:sessionId/webauthn/authenticator");

// ...

Command addVirtualAuthCommand = new Command("AddVirtualAuthenticator");
addVirtualAuthCommand.setParameter("protocol", "ctap2");
addVirtualAuthCommand.setParameter("transport", "usb");
browser.driver.getExecutor().execute(addVirtualAuthCommand);

对于 javascript，您应该能够以类似的方式使用DefineCommand和webDriver.execute 。