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

编程问答 2022-05-10

问题描述

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}

解决方法

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

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

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

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

face-idiosiosjavascriptreactjsreactjsreactjsreactjswebauthn