Не могу понять ошибку API WebAuthn из JavaScript

Question

В настоящее время я создаю конечную точку регистрации AJAX для Django, чтобы разрешить аутентификацию FIDO2 (вход в систему с помощью физического аппаратного ключа). Это следование примеру / документации из официальной библиотеки Python fido2 от Yubico.

Единственные зависимости cbor.js а также js-cookie, На данный момент все работает на стороне сервера, однако я продолжаю получать эту ошибку JavaScript при вызове navigator.credentials.create метод

TypeError: Failed to execute 'create' on 
'CredentialsContainer': The provided value is not of 
type '(ArrayBuffer or ArrayBufferView)'

Код:

var csrftoken = Cookies.get('csrftoken');
fetch('/register/begin', {
    method: 'POST',
    headers: {
        'X-CSRFToken': csrftoken
    }
}).then(function(response) {
    if(response.ok) {
        return response.arrayBuffer();
    }
    throw new Error('Error getting registration data!');

}).then(CBOR.decode).then(function(options) {
    console.log(options)
    //This line is not working
    return navigator.credentials.create(options);
//More code... complete registration...

Я не могу понять это. Вы знаете, что не так? Спасибо!

Answer 1

У меня была та же проблема, и причина была в том, что некоторые фрагменты данных, отправленные с сервера в ответе из / register / begin, должны быть отформатированы как строки байтов, а не как строки Юникода. В частности, я обнаружил, что user_id и идентификационные данные должны быть байтовыми строками - при условии, что вы также следуете примеру Yubico на сервере, реализованном в python 3.

Также следует отметить, что в этом случае я обнаружил, что сообщения об ошибках Firefox гораздо более полезны, чем chome.

Answer 2

У меня тоже была эта проблема. В итоге я использовал класс TextEncoder для кодирования задачи и идентификатора пользователя ...

              const enc = new TextEncoder();     
        const createCredentialOptions: CredentialCreationOptions = {
        publicKey: {
          rp: rp,
          challenge: enc.encode(challenge),
          user: {
            id: enc.encode(user.id),
            name: user.name,
            displayName: user.displayName
          },
          pubKeyCredParams: pubKeyCredParams,
          ...