CredentialsContainer:create() 方法
Baseline 广泛可用 *
CredentialsContainer 接口的 create() 方法会创建一个新的 凭证,该凭证可以存储起来,之后通过 navigator.credentials.get() 方法检索。检索到的凭证随后可供网站用于对用户进行身份验证。
此方法支持三种不同类型的凭证
- 密码凭证,允许用户使用密码登录。
- 联合身份凭证,允许用户使用联合身份提供商登录。
- 公钥凭证,允许用户使用身份验证器(例如内置于平台的生物识别读取器或可移动硬件令牌)登录。
请注意,联合凭证管理 API (FedCM) 已取代了联合身份凭证类型。
语法
create()
create(options)
参数
options可选-
一个包含所请求的新
Credentials对象选项的对象。它可以包含以下属性signal可选-
一个
AbortSignal对象实例,允许中止正在进行的create()操作。中止的操作可能会正常完成(通常是在操作完成后收到中止请求),或者以AbortErrorDOMException拒绝。
以下每个属性代表一个正在创建的凭证类型。必须且只能指定其中一个
federated可选-
一个
FederatedCredentialInit对象,包含创建联合身份提供商凭证的要求。 password可选-
一个
PasswordCredentialInit对象,包含创建密码凭证的要求。 publicKey可选-
一个
PublicKeyCredentialCreationOptions对象,包含创建公钥凭证的要求。这将导致create()调用请求用户代理通过身份验证器创建新凭证 — 用于注册新帐户或将新的非对称密钥对与现有帐户关联。注意:使用带有
publicKey参数的create()可能会被服务器上设置的publickey-credentials-create权限策略阻止。
返回值
一个 Promise,它将解析为以下之一:
- 如果凭证类型为
federated,则为FederatedCredential。 - 如果凭证类型为
password,则为PasswordCredential。 - 如果凭证类型为
publicKey,则为PublicKeyCredential。
如果无法创建凭证对象,则 Promise 将以 null 解析。
异常
TypeError-
在
PasswordCredential创建请求的情况下,未提供id、origin或password(为空)。 NotAllowedErrorDOMException-
可能的原因包括:
- 使用被
publickey-credentials-create权限策略阻止。 - 该函数是跨域调用的,但 iframe 的
allow属性未设置适当的publickey-credentials-create策略。 - 该函数是跨域调用的,并且
<iframe>没有 瞬时激活。 - 尝试创建 可发现凭证(在
create()调用中的PublicKeyCredentialCreationOptions选项中将residentKey设置为required),但用户没有支持可发现凭证的安全密钥,并且取消了该操作。
- 使用被
AbortErrorDOMException-
操作已被中止。
示例
创建密码凭证
此示例使用 PasswordCredentialInit 对象创建密码凭证。
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
});
创建联合身份凭证
此示例使用 FederatedCredentialInit 对象创建联合身份凭证。
const credInit = {
id: "1234",
name: "Serpentina",
origin: "https://example.org",
protocol: "openidconnect",
provider: "https://provider.example.org",
};
const makeCredential = document.querySelector("#make-credential");
makeCredential.addEventListener("click", async () => {
const cred = await navigator.credentials.create({
federated: credInit,
});
console.log(cred.name);
console.log(cred.provider);
});
创建公钥凭证
此示例使用 PublicKeyCredentialCreationOptions 对象创建公钥凭证。
const publicKey = {
challenge: challengeFromServer,
rp: { id: "acme.com", name: "ACME Corporation" },
user: {
id: new Uint8Array([79, 252, 83, 72, 214, 7, 89, 26]),
name: "jamiedoe",
displayName: "Jamie Doe",
},
pubKeyCredParams: [{ type: "public-key", alg: -7 }],
};
const publicKeyCredential = await navigator.credentials.create({ publicKey });
如果成功,create() 调用将返回一个 Promise,该 Promise 解析为一个 PublicKeyCredential 对象实例,该实例代表一个公钥凭证,以后可通过 WebAuthn get() 调用用于对用户进行身份验证。其 PublicKeyCredential.response 属性包含一个 AuthenticatorAttestationResponse 对象,该对象提供了对几个有用信息的访问,包括身份验证器数据、公钥、传输机制等。
navigator.credentials.create({ publicKey }).then((publicKeyCredential) => {
const response = publicKeyCredential.response;
// Access attestationObject ArrayBuffer
const attestationObj = response.attestationObject;
// Access client JSON
const clientJSON = response.clientDataJSON;
// Return authenticator data ArrayBuffer
const authenticatorData = response.getAuthenticatorData();
// Return public key ArrayBuffer
const pk = response.getPublicKey();
// Return public key algorithm identifier
const pkAlgo = response.getPublicKeyAlgorithm();
// Return permissible transports array
const transports = response.getTransports();
});
其中一些数据需要在服务器上存储,以便将来对该凭证进行身份验证操作 — 例如公钥、使用的算法以及允许的传输方式。
注意:有关整个流程如何工作的更多信息,请参阅 创建密钥对并注册用户。
规范
| 规范 |
|---|
| Credential Management Level 1 # dom-credentialscontainer-create |
浏览器兼容性
加载中…