首页 > 解决方案 > Selenium 测试:使用 Webauthn 进行身份验证

问题描述

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

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

除了https://w3c.github.io/webauthn/#add-virtual-authenticator我还没有找到太多关于使用 webauthn 进行身份验证作为硒测试的一部分的文档。有哪些资源可以帮助开发人员弄清楚如何在 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关键

标签: javascriptseleniumtestingwebauthn

解决方案


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

  • 创建虚拟身份验证器

    在您的情况下,您应该将传输设置为internal和 hasUserVerificationtrue以模拟 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,您应该能够以类似的方式使用defineCommandwebDriver.execute 。


推荐阅读