javascript - WebAuthn: Can't create public key. Promise is rejected - Stack Overflow

admin管理员组

文章数量:1327988

I am trying to get WebAuthn set up on our login page. I am to the part where I need to make the public key using navigator.credentials.create(). On Chrome, I keep getting the following error: Uncaught (in promise) DOMException: The operation either timed out or was not allowed. See: .

Here is the relevant code:

if (isAvailable) {
    // Get challenge from server
    fetch("WebAuthn/WebAuthn.ashx", {
        method: "POST"
    })
    .then(res => res.json())
    .then(res => {
        const publicKeyCredentialCreationOptions = {
            challenge: Uint8Array.from(
                res.data, c => c.charCodeAt(0)),
            rp: {
                id: "localhost",
                name: "Company Name"
            },
            authenticatorSelection: {
                authenticatorAttachment: "platform",
                userVerification: "discouraged"
            },
            pubKeyCredParams: [{alg: -7, type: "public-key"}],
            user: {
                id: Uint8Array.from(
                    "UZSL85T9AFC", c => c.charCodeAt(0)),
                displayName: "User",
                name: document.getElementById("tbUser").value // taken from aspx form
            }
        };

        const credential = navigator.credentials.create({
            publicKey: publicKeyCredentialCreationOptions
        });
    });
}

Some additional information that may be useful:

• The server does not yet handle this information, but I don't think that matters since the credentials need to be created before they can be sent
• Currently testing on https://localhost
• This is taking place on the login page before the user is logged in. The idea is to prompt the user once they hit submit

I am trying to get WebAuthn set up on our login page. I am to the part where I need to make the public key using navigator.credentials.create(). On Chrome, I keep getting the following error: Uncaught (in promise) DOMException: The operation either timed out or was not allowed. See: https://www.w3/TR/webauthn-2/#sctn-privacy-considerations-client.

Here is the relevant code:

if (isAvailable) {
    // Get challenge from server
    fetch("WebAuthn/WebAuthn.ashx", {
        method: "POST"
    })
    .then(res => res.json())
    .then(res => {
        const publicKeyCredentialCreationOptions = {
            challenge: Uint8Array.from(
                res.data, c => c.charCodeAt(0)),
            rp: {
                id: "localhost",
                name: "Company Name"
            },
            authenticatorSelection: {
                authenticatorAttachment: "platform",
                userVerification: "discouraged"
            },
            pubKeyCredParams: [{alg: -7, type: "public-key"}],
            user: {
                id: Uint8Array.from(
                    "UZSL85T9AFC", c => c.charCodeAt(0)),
                displayName: "User",
                name: document.getElementById("tbUser").value // taken from aspx form
            }
        };

        const credential = navigator.credentials.create({
            publicKey: publicKeyCredentialCreationOptions
        });
    });
}

Some additional information that may be useful:

• The server does not yet handle this information, but I don't think that matters since the credentials need to be created before they can be sent
• Currently testing on https://localhost
• This is taking place on the login page before the user is logged in. The idea is to prompt the user once they hit submit

• javascript
• authentication
• webauthn

Share Improve this question Follow edited Aug 20, 2024 at 8:31 VLAZ 29.1k99 gold badges6363 silver badges8484 bronze badges asked Aug 13, 2021 at 16:24 xHoudekxHoudek 11511 silver badge1111 bronze badges 5

• I am getting the same issue. The RP ID is correct, I am on https (self signed cert), everything checks out. Just not sure what happened. Same problem on edge browser. – Aaron Gong Commented Aug 14, 2021 at 4:03
• It can get a response if I enable and add an authenticator in the Chrome Web Tools. – Aaron Gong Commented Aug 14, 2021 at 5:24
• It also works if I use a mobile phone chrome browser... – Aaron Gong Commented Aug 14, 2021 at 5:31
• @AaronGong what authenticator did you add and where? Not sure if I need to add a certificate to get this working or what. If you could talk about how you got the response that would be super helpful, thank you! – xHoudek Commented Aug 16, 2021 at 13:43
• Hi, it is a virtual authenticator environment found in Chrome DEV tools. I will add it to the answer – Aaron Gong Commented Aug 17, 2021 at 23:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Firstly, you can test out using virtual authenticator on Chrome, see image below.

On windows, you can setup Windows Hello as authenticator and test that later.

Now some notes for your problem

1. localhost does not need https
2. the expected origin specified if using only http, can be http://localhost<:port if not 80>
3. Need to check the format sent, is it arraybyte or not

I have managed to get it working... You can try and look at my example code and use them, only 2 files

• Frontend: https://github./es-labs/express-template/blob/main/apps/app-sample/public/demo-express/fido.html
• Express Backend (using fido2-lib): https://github./es-labs/express-template/blob/main/apps/app-sample/routes/fido.js

I am still cleaning it up to make it to production code (e.g. using JWTs / Sessions when passing info between front and back end.

In my case, my supported public key algorithms list was too narrow to support platform authenticator attachment. Now I use this list of algs, and it's working as it should.

{"pubKeyCredParams": [
{
  "type": "public-key",
  "alg": -7
},
{
  "type": "public-key",
  "alg": -8
},
{
  "type": "public-key",
  "alg": -36
},
{
  "type": "public-key",
  "alg": -37
},
{
  "type": "public-key",
  "alg": -38
},
{
  "type": "public-key",
  "alg": -39
},
{
  "type": "public-key",
  "alg": -257
},
{
  "type": "public-key",
  "alg": -258
},
{
  "type": "public-key",
  "alg": -259
}]}

本文标签： javascriptWebAuthn Can39t create public key Promise is rejectedStack Overflow