PasswordCredentialInit
PasswordCredentialInit 字典代表传递给 CredentialsContainer.create() 中 password 选项的值，用于创建密码凭证。
从表单初始化
网站可以直接传递一个 HTMLFormElement，而不是直接传递此字典。create() 的实现会根据元素 autocomplete 属性的值，从表单的可提交元素中提取数据来填充凭证。
autocomplete 值 |
目标凭证属性 |
|---|---|
"username" |
id |
"name" 或 "nickname" |
name |
"new-password" 或 "current-password" |
密码 |
"photo" |
iconURL |
如果表单同时包含 "new-password" 和 "current-password" 元素，将使用 "new-password" 的值。
origin 属性被设置为 HTMLFormElement 所包含的文档的源。
实例属性
iconURL可选-
一个字符串，表示与凭据关联的图标或头像的 URL。
id-
一个字符串，表示凭据的唯一 ID。
name可选-
一个字符串，表示凭据用户名。
origin-
一个表示凭证源的字符串。
PasswordCredential对象是源绑定的，这意味着它们只能在指定的用于它们的源上使用。 密码-
一个表示凭证密码的字符串。
示例
从对象字面量创建密码凭证
此示例构造一个对象字面量来初始化密码凭证。
js
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>
JavaScript
JavaScript 将表单传递给 create()，并记录结果凭证的一些值。
如果表单不包含必需凭证属性的值，create() 返回的 Promise 将会拒绝。
js
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;
}
结果
规范
| 规范 |
|---|
| Credential Management Level 1 # typedefdef-passwordcredentialinit |