我正在尝试使用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就像预期的那样工作。我错过了什么？
**更新：**所以我用一个简单的index. html文件测试了它，里面有所有需要的代码，它看起来像这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Conditional UI</title>
<script>
window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable().then(
result => {
if (!result) {
console.log("No platform authenticator found. If your OS does not come with one, try using devtools to set one up.");
}
}
);
let abortController;
let abortSignal;
let startConditionalRequest = async () => {
if (window.PublicKeyCredential.isConditionalMediationAvailable) {
console.log("Conditional UI is understood by the browser");
if (!await window.PublicKeyCredential.isConditionalMediationAvailable()) {
console.log("Conditional UI is understood by your browser but not available");
return;
}
} else {
if (!navigator.credentials.conditionalMediationSupported) {
console.log("Your browser does not implement Conditional UI (are you running the right chrome/safari version with the right flags?)");
return;
} else {
console.log("This browser understand the old version of Conditional UI feature detection");
}
}
abortController = new AbortController();
abortSignal = abortController.signal;
try {
let credential = await window.navigator.credentials.get({
signal: abortSignal,
publicKey: {
// Don't do this in production!
challenge: new Uint8Array([1, 2, 3, 4]),
allowCredentials: []
},
mediation: "conditional"
});
if (credential) {
let username = String.fromCodePoint(...new Uint8Array(credential.response.userHandle));
console.log(username);
} else {
console.log("Credential returned null");
}
} catch (error) {
if (error.name == "AbortError") {
console.log("request aborted");
return;
}
console.log(error.toString());
}
}
startConditionalRequest();
</script>
</head>
<body>
<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>
</body>
</html>现在，当我在任何浏览器中打开它时，它都可以完美地工作。但是，如果我尝试使用vite dev-server做同样的托管，或者如果我构建一个react应用程序，它可以在Safari中工作，但不能在Chrome中工作。这会不会和暗影世界有关？
有没有人在Chrome中为react应用程序工作？很想知道你是怎么做到的。
1条答案
按热度按时间xxhby3vn1#
这会不会和暗影世界有关？
从我所看到的，Chrome密码自动填充目前在shadow DOM中不起作用：https://bugs.chromium.org/p/chromium/issues/detail?id=1404106