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 |
瀏覽器相容性
載入中…