时间戳

首页 > 解决方案 > 如何在 iOS 中使用 webauthn 并做出反应？

javascript - 如何在 iOS 中使用 webauthn 并做出反应？

问题描述

if (navigator.credentials && window.PublicKeyCredential) {
      const available = await window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();
      if (available) {
        const newCredentialInfo = await navigator.credentials.create(options);
        var response = newCredentialInfo.response;

        var clientExtensionsResults = newCredentialInfo.getClientExtensionResults();
        alert(JSON.stringify(response))
        alert(JSON.stringify(clientExtensionsResults));
      }
      else {
        alert("Unsupported");
      }
    }

让我只使用私钥（usb 或 smthg。但如果我将它options.publicKey与 JavaScript 和 html 一起使用，一切正常。它让我可以使用 FaveID 进行身份验证，但响应为空。

我的选择是


{"rp":{"id":"https://im-faceid.netlify.app","name":"netlify.app"},"user":{"id":{"0":97,"1":87,"2":120,"3":53,"4":89,"5":87,"6":49,"7":118,"8":99,"9":109,"10":82,"11":104,"12":99,"13":50,"14":57,"15":50},"name":"test","displayName":"Test User"},"challenge":{"0":79,"1":72,"2":78,"3":122,"4":101,"5":71,"6":86,"7":111},"pubKeyCredParams":[{"type":"public-key","alg":-7}],"authenticatorSelection":{"authenticatorAttachment":"platform","requireResidentKey":false,"userVerification":"required"},"attestation":"none","timeout":15000}

标签： javascriptiosreactjswebauthnface-id

解决方案

我看到您正在调用组件navigator.credentials.create()的. macOS 和 iOS Safari 都要求使用 Touch ID的 WebAuthn API 调用必须是“用户手势”的结果：<App />componentDidMount()

不请自来的提示数量低得惊人。随着面向 Web 的 Face ID 和 Touch ID 的发布，情况有所不同。因此，Web 的 Face ID 和 Touch ID 需要用户手势才能发挥作用。（为了向后兼容，安全密钥不需要用户手势。）

有关更多指导，请参阅 Apple 对 WebAuthn 支持的介绍：https ://webkit.org/blog/11312/meet-face-id-and-touch-id-for-the-web/

如果您更新您的 React 代码以将调用逻辑移动navigator.credentials.create()到按钮单击处理程序中，您将能够使用 Face ID。它需要您单击一个按钮来触发 WebAuthn，而不仅仅是加载页面，但这是在 Apple OS 上使用 WebAuthn 的现实。

推荐阅读