密码凭据初始化

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: 表示凭据唯一 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>，分别代表用户 ID、用户显示名称和密码。

html

<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>

form {
  display: table;
}

div {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin-bottom: 10px;
}

label {
  padding-right: 10px;
}

#log {
  height: 60px;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

JavaScript 将表单传递给 create()，并记录结果凭据中某些值的日志。

如果表单不包含必需凭据属性的值，则 create() 返回的 Promise 将拒绝。

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