Webauthn 条件用户界面在 Chrome 中不起作用

Question

我正在尝试使用 Webauthn 实现身份验证。使用建议的方法

window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()

和

await window.PublicKeyCredential.isConditionalMediationAvailable()

验证平台和浏览器支持后，我将待处理的请求添加到 navigator.credentials：

let credentials = await window.navigator.credentials.get({
            signal: abortSignal,
            publicKey: {
                // Don't do this in production!
                challenge: new Uint8Array([1, 2, 3, 4]),
                allowCredentials: []
            },
            mediation: "conditional"
        });

我的表格：

<form>
    <label for="login-username">Username:</label>
    <input name="username" id="login-username" value="" autocomplete="username webauthn" autofocus/>
    <label for="password">Fake password:</label>
    <input id="password" value="" required type="password" autocomplete="password webauthn"/>
    <div class="button-box">
      <button id="login" type="submit">
        <strong>Log-in</strong>
      </button>
    </div>
</form>

我希望在单击用户名或密码输入字段时从浏览器中看到一个下拉菜单/弹出窗口，这允许我从不同的设备中选择密钥，但我在Chrome（版本117.0.5938.132）。

Safari 可以按预期工作。我在这里缺少什么？

Answer 1

我在 Chrome（版本 117.0.5938.132）中没有看到这一点。

尝试解决此问题的几个问题：

• 会发生什么？
• 有什么错误抛出吗？
• 您使用的是哪款设备？
• 可以复制吗？