PasswordCredentialInit

Словарь PasswordCredentialInit представляет собой объект, передаваемый в CredentialsContainer.create() в качестве значения параметра password, при создании учетных данных пароля.

Инициализация из формы

Вместо прямой передачи этого словаря, веб-сайт может передать HTMLFormElement, и реализация create() заполнит данные учетных данных значениями элементов формы, отправляемых на сервер, на основе значения атрибута элемента autocomplete.

`autocomplete` значение	Целевое свойство учетных данных
`"username"`	`id`
`"name"` или `"nickname"`	`name`
`"new-password"` или `"current-password"`	`password`
`"photo"`	`iconURL`

Если форма содержит как элементы "new-password", так и "current-password", для "new-password" будет использовано значение последнего.

Свойство origin устанавливается в адресную часть документа, в котором находится HTMLFormElement.

Свойства экземпляра

iconURL Необязательно: Строка, представляющая URL иконки или аватара, который нужно связать с учетными данными.
id: Строка, представляющая уникальный идентификатор учетных данных.
name Необязательно: Строка, представляющая имя пользователя учетных данных.
origin: Строка, представляющая адресную часть учетных данных. Объекты PasswordCredential привязаны к адресу, что означает, что они будут использоваться только в указанной адресной части, для которой они были предназначены.
password: Строка, представляющая пароль учетных данных.

Примеры

Создание учетных данных пароля из объекта-литерала

В данном примере создается объект-литерал для инициализации учетных данных пароля.

const credInit = {
  id: "1234",
  name: "Serpentina",
  origin: "https://example.org",
  password: "the last visible dog",
};

const makeCredential = document.querySelector("#make-credential");

makeCredential.addEventListener("click", async () => {
  const cred = await navigator.credentials.create({
    password: credInit,
  });
  console.log(cred.name);
  // Serpentina
  console.log(cred.password);
  // the last visible dog
});

Создание учетных данных пароля из формы

В данном примере используется форма для инициализации учетных данных пароля.

HTML

HTML объявляет <form> содержащую три элемента отправки, представляющие идентификатор пользователя, имя пользователя для отображения и пароль.

<form>
  <div>
    <label for="userid">Enter your user ID: </label>
    <input type="text" name="userid" id="userid" autocomplete="username" />
  </div>
  <div>
    <label for="username">Enter your username: </label>
    <input type="text" name="username" id="username" autocomplete="name" />
  </div>
  <div>
    <label for="password">Enter your password: </label>
    <input
      type="password"
      name="password"
      id="password"
      autocomplete="new-password" />
  </div>
</form>

<button id="make-credential">Make credential</button>

<pre id="log"></pre>

JavaScript

JavaScript передает форму в create(), и выводит некоторые значения полученных учетных данных.

Обещание, возвращаемое create(), будет отклонено, если форма не содержит значений для обязательных свойств учетных данных.

const makeCredential = document.querySelector("#make-credential");
const formCreds = document.querySelector("form");

makeCredential.addEventListener("click", async () => {
  try {
    const credential = await navigator.credentials.create({
      password: formCreds,
    });
    log(
      `New credential:\nname: ${credential.name}, password: ${credential.password}`,
    );
  } catch (e) {
    if (e.name === "TypeError") {
      log("Error creating credential\nMake sure you filled in all the fields");
    }
  }
});

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = text;
}

Результат

Спецификации

Спецификация
Управление учетными данными уровня 1 # typedefdef-passwordcredentialinit

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/PasswordCredentialInit