想了解更多关于WebAuthn的信息吗？然后前往网络认证别忘了试试全新的调试器！DR：随着版本76的发布，Google的Chrome浏览器现在支持WebAuthn驻留密钥。通过将一些用户数据保存在验证器上，可以获得更平滑、无用户名的登录体验。让我们看看这是如何工作的。WebAuthn至今在典型的WebAuthn场景中，凭证ID由验证器生成并保存在服务器上。此ID用于标识身份验证器上保存的凭据。我们将在数据库中保存与用户名或其他用户可识别属性链接的凭证ID。当用户希望使用以前创建的凭据进行身份验证时，他们将在登录表单中输入用户名。服务器将查找此用户名的已保存凭据ID并将其传递给验证器。然后，验证器将使用此ID选择正确的凭据来签署身份验证质询。这是一个很好的解决方案，它消除了对密码的需要，并使用验证器生成的密钥进行身份验证。用户仍然需要在每次登录时输入用户名。我们可以做得更好！居民证件将requireResidentKey属性设置为true时，将强制浏览器在验证器上创建新的客户端常驻公钥凭据源或简称常驻凭据。使用这些常驻凭证，验证器能够根据依赖方ID选择适当的凭证私钥。例如，用户为ID为auth0.com的依赖方注册新凭据。该依赖方的任何后续身份验证请求都将使用保存的常驻凭据来查找相应的凭据私钥，除非在中配置了允许的凭据数组navigator.credentials.get（）选项。要创建常驻凭证，您需要能够创建其中一个的验证器。不是所有的验证器都能做到这一点。Yubikey（4或5）和大多数其他支持FIDO2的设备应该能够做到这一点。有一个警告，你的Yubikey应该配置一个pin。如果您没有支持常驻凭证的验证器，它将抛出一个错误。一步一步地让我们一步一步地完成这个场景。用户对您的网站不熟悉，并希望使用WebAuthn配置新凭据。您已将依赖方配置为将requiresResident选项设置为true，因此浏览器将尝试创建常驻凭据。如果Chrome发现了多个验证器，它会提示用户使用哪个验证器。选择所选的验证器后，浏览器将要求您执行操作。在我的尤比基5C的情况下，它要求触摸键。请注意，它还提到"您访问本网站的记录将保存在您的安全密钥上"。这个"记录"就是我们的常住钥匙。如果验证器上没有配置pin码，Chrome会要求您在此时执行此操作。如果已使用pin代码设置验证器，则必须输入pin才能继续。要完成保存常驻凭据，浏览器将再次提示您确认要创建此凭据。我们现在已经成功注册了一个新的客户端驻留凭据。将来进行身份验证时，浏览器将根据依赖方ID自动使用此凭据。当验证器上保存了多个常驻凭据时，浏览器将显示一个对话框，用户可以在其中选择要用于身份验证的凭据。结论在微软的边缘浏览器已经支持常驻凭证之后，现在Chrome也支持这个功能。这些类型的凭证保存在验证器上，允许用户在不输入用户名的情况下进行身份验证。浏览器将根据WebAuthn身份验证请求中配置的依赖方ID识别这些凭据。资源Web身份验证简介网络认证WebAuthn调试器Auth0文档在几分钟内实现身份验证.灯箱{宽度：100%；高度：100%；位置：固定；顶部：0；左：0；背景：rgba（0，0，0，0.85）；z-指数：9999999；线高：0；光标：指针；}.灯箱图像{光标：指针；余量：0自动；显示：块；}.灯箱图像{职位：亲属；顶部：50%；左：50%；-ms转换：translateX（-50%）translateY（-50%）；-webkit转换：翻译（-50%，-50%）；转换：平移（-50%，-50%）；最大宽度：100%；最大高度：100%；}@媒体屏幕和（最小宽度：1200像素）{.灯箱图像{最大宽度：1200px；}}@媒体屏幕和（最小高度：1200像素）{.灯箱图像{最大高度：1200px；}}.灯箱跨度{显示：块；位置：固定；底部：13px；高度：1.5em；线路高度：1.4em；宽度：100%；文本对齐：居中；颜色：白色；文本阴影：-1px-1px 0#000，1px-1px 0#000，-1px 1px 0#000，1件1件0万件；字体系列："fakt web"，"Helvetica Neue"，Hevetica，sans serif；字号：18px；}.lightbox.videowrapper容器{职位：亲属；顶部：50%；左：50%；-ms转换：translateX（-50%）translateY（-50%）；-webkit转换：翻译（-50%，-50%）；转换：平移（-50%，-50%）；最大宽度：900px；最大高度：100%；}.lightbox.videoWrapperContainer.videoWrapper容器{高度：0；线高：0；余量：0；填充：0；职位：亲属；填充底部：56.333%；/*自定义*/背景：黑色；}.lightbox.videoWrapper iframe{位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；边框：0；显示：块；}.lightbox上一页，.lightbox下一个{高度：50px；线高：36px；显示：无；顶部边缘：-25px；位置：固定；顶部：50%；填充：0 15px；光标：指针；文字装饰：无；z指数：99；颜色：白色；字号：60px；字体系列："fakt web"，"Helvetica Neue"，Hevetica，sans serif；}.灯箱画廊#上一页，.灯箱画廊#下一个{显示：块；}.lightbox上一页{左：0；}.lightbox下一个{右：0；}.lightbox关闭{高度：50px；宽度：50px；位置：固定；光标：指针；文字装饰：无；z指数：99；右：0；顶部：0；}.灯箱#结束：之后,.灯箱#关闭：之前{位置：绝对；顶部边缘：22px；左边距：14px；内容：""；高度：3px；背景：白色；宽度：23px；-webkit转化来源：50%50%；-moz转化来源：50%50%；-o-转化原点：50%50%；转化来源：50%50%；/*狩猎*/-webkit变换：旋转（-45度）；/*火狐*/-moz变换：旋转（-45度）；/*IE公司*/-ms变换：旋转（-45度）；/*歌剧*/-o变换：旋转（-45度）；}.灯箱#结束：之后{/*狩猎*/-webkit变换：旋转（45度）；/*火狐*/-moz变换：旋转（45度）；/*IE公司*/-ms变换：旋转（45度）；/*歌剧*/-o变换：旋转（45度）；}.灯箱，.灯箱*{-webkit用户选择：无；-moz用户选择：无；-ms用户选择：无；用户选择：无；}函数为_imagelink（url）{const p=/（[a-z\-\u 0-9\/\：\.]*\（jpg | jpeg | png | gif））/i；返回url.match（p） 是吗？真：假；}函数回调（）{常量项内容=document.getElementsByClassName（"js条目内容"）[0]；常量图像=entryContent.querySelectorAll（"img"）；图像.forEach（图像=>{常量url=图像.getAttribute（"src"）；如果（url）{if（is_imagelink（url）&&！image.classList.contains（"无灯箱"）{image.classList.add（"灯箱图像"）；常量名称=图像.getAttribute（"alt"）；图像.setAttribute（"职务"，姓名）；}}});//单击灯箱移除document.body.onclick= () => {const灯箱=document.getElementsByClassName（"灯箱"）[0]；如果（灯箱）{lightbox.onclick= () => {lightbox.parentNode.removeChild（灯箱）；};}};const lightboxImages=document.querySelectorAll("图像灯箱-图像"）；if（lightboxImages）{lightboxImages.forEach（图像=>{图像.onclick=e=>{e、 preventDefault（）；常数src=图像.getAttribute（"src"）；常数alt=图像.getAttribute（"alt"）；常量标题=图像.getAttribute（"所有权"）；const灯箱=文档.createElement（"div"）；lightbox.classList.add（"灯箱"）；lightbox.innerHTML=`

${title}`；document.body.appendChild（浅色