CredentialsContainer:create() 方法

Baseline 广泛可用 *

此功能已成熟,并可在多种设备和浏览器版本上使用。自 2019 年 9 月以来,它已在各种浏览器中可用。

* 此特性的某些部分可能存在不同级别的支持。

安全上下文: 此功能仅在安全上下文(HTTPS)中可用,且支持此功能的浏览器数量有限。

CredentialsContainer 接口的 create() 方法会创建一个新的 凭证,该凭证可以存储起来,之后通过 navigator.credentials.get() 方法检索。检索到的凭证随后可供网站用于对用户进行身份验证。

此方法支持三种不同类型的凭证

  • 密码凭证,允许用户使用密码登录。
  • 联合身份凭证,允许用户使用联合身份提供商登录。
  • 公钥凭证,允许用户使用身份验证器(例如内置于平台的生物识别读取器或可移动硬件令牌)登录。

请注意,联合凭证管理 API (FedCM) 已取代了联合身份凭证类型。

语法

js
create()
create(options)

参数

options 可选

一个包含所请求的新 Credentials 对象选项的对象。它可以包含以下属性

signal 可选

一个 AbortSignal 对象实例,允许中止正在进行的 create() 操作。中止的操作可能会正常完成(通常是在操作完成后收到中止请求),或者以 AbortError DOMException 拒绝。

以下每个属性代表一个正在创建的凭证类型。必须且只能指定其中一个

federated 可选

一个 FederatedCredentialInit 对象,包含创建联合身份提供商凭证的要求。

password 可选

一个 PasswordCredentialInit 对象,包含创建密码凭证的要求。

publicKey 可选

一个 PublicKeyCredentialCreationOptions 对象,包含创建公钥凭证的要求。这将导致 create() 调用请求用户代理通过身份验证器创建新凭证 — 用于注册新帐户或将新的非对称密钥对与现有帐户关联。

注意:使用带有 publicKey 参数的 create() 可能会被服务器上设置的 publickey-credentials-create 权限策略阻止。

返回值

一个 Promise,它将解析为以下之一:

如果无法创建凭证对象,则 Promise 将以 null 解析。

异常

TypeError

PasswordCredential 创建请求的情况下,未提供 idoriginpassword(为空)。

NotAllowedError DOMException

可能的原因包括:

AbortError DOMException

操作已被中止。

示例

创建密码凭证

此示例使用 PasswordCredentialInit 对象创建密码凭证。

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
});

创建联合身份凭证

此示例使用 FederatedCredentialInit 对象创建联合身份凭证。

js
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 对象创建公钥凭证。

js
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 对象,该对象提供了对几个有用信息的访问,包括身份验证器数据、公钥、传输机制等。

js
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

浏览器兼容性