Skip to content

Commit

Permalink
Update the static methods
Browse files Browse the repository at this point in the history
  • Loading branch information
hamishwillee committed Oct 13, 2023
1 parent d214be1 commit 3a8a2f3
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 23 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ browser-compat: api.PublicKeyCredential.parseCreationOptionsFromJSON_static

{{APIRef("Web Authentication API")}} {{SeeCompatTable}}{{securecontext_header}}

The **`parseCreationOptionsFromJSON()`** static method of the {{domxref("PublicKeyCredential")}} interface converts a particular JSON-friendly representation of the [`publicKey` create credentials options object structure](/en-US/docs/Web/API/CredentialsContainer/create#publickey_object_structure) into the `publicKey` structure.
The **`parseCreationOptionsFromJSON()`** static method of the {{domxref("PublicKeyCredential")}} interface converts a {{glossary("JSON type representation")}} into its corresponding [`publicKey` create credentials options object structure](/en-US/docs/Web/API/CredentialsContainer/create#publickey_object_structure).

The method is a convenience function for deserializing information provided by a relying server to a web app in order to create a credential.
The method is a convenience function for converting credential options information provided by a relying party server to the form that a web app can use to [create a credential](/en-US/docs/Web/API/Web_Authentication_API#creating_a_key_pair_and_registering_a_user).

## Syntax

Expand Down Expand Up @@ -41,15 +41,16 @@ The Web Authentication process for [creating a key pair and registering a user](
The web app passes this information to an authenticator to create the credential, by calling [`navigator.credentials.create()`](/en-US/docs/Web/API/CredentialsContainer/create) with an argument that contains the server-supplied data in the [`publicKey` create credentials options object structure](/en-US/docs/Web/API/CredentialsContainer/create#publickey_object_structure).

The specification does not define how the information needed for creating a credential is sent.
A convenient approach is to first encapsulate the information in an object that mirrors the structure of the [`publicKey` create credentials options object](/en-US/docs/Web/API/CredentialsContainer/create#publickey_object_structure), encoding buffer properties such as the `challenge` and `user.id` as [base64url](/en-US/docs/Glossary/Base64) strings.
This object can be serialized to a [JSON](/en-US/docs/Glossary/JSON) string and then deserialized by the web app to the [`publicKey` create credentials options object structure](/en-US/docs/Web/API/CredentialsContainer/create#publickey_object_structure) using **`parseCreationOptionsFromJSON()`**.
A convenient approach is for the server to encapsulate the information in a {{glossary("JSON type representation")}} of the [`publicKey` create credentials options object](/en-US/docs/Web/API/CredentialsContainer/create#publickey_object_structure) that mirrors its structure but encodes buffer properties such as the `challenge` and `user.id` as [base64url](/en-US/docs/Glossary/Base64) strings.
This object can be serialized to a [JSON](/en-US/docs/Glossary/JSON) string, sent to the web app and deserialized, and then converted to the [`publicKey` create credentials options object structure](/en-US/docs/Web/API/CredentialsContainer/create#publickey_object_structure) using **`parseCreationOptionsFromJSON()`**.

## Examples

A server might create the options object containing information required (by the web app/authenticator) for creating new credentials, using code that looks something like this (taken from the [`AuthenticatorResponse` example "getting an AuthenticatorAttestationResponse"](/en-US/docs/Web/API/AuthenticatorResponse#getting_an_authenticatorattestationresponse)):
When registering a new user, a relying party server will supply information about the expected credentials to the web app.
The code below defines this information in the form described in the [`options` parameter](#options) above (taken from the ["getting an AuthenticatorAttestationResponse"](/en-US/docs/Web/API/AuthenticatorResponse#getting_an_authenticatorattestationresponse) in `AuthenticatorResponse`):

```js
const createCredentialOptions = {
const createCredentialOptionsJSON = {
challenge:
"21, 31, 105, " /* 29 more random bytes generated by the server in this string */,
rp: {
Expand All @@ -68,19 +69,22 @@ const createCredentialOptions = {
},
],
};
```

Because this object only uses JSON data types, it can be be serialized to JSON using [`JSON.stringify()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) and sent to the web app.

// Stringify to serialize/send
const createCredentialOptionsString = JSON.stringify(createCredentialOptions);
```js
JSON.stringify(createCredentialOptionsJSON);
```

The `createCredentialOptionsString` string can be sent to the web app and parsed back from a JSON-formatted string into a JavaScript object.
Below we will name this "reconstituted" object `createCredentialOptionsJSON` (though it is the same as `createCredentialOptions` on the server).
We use `parseCreationOptionsFromJSON()` to convert this to the correct form to use in `navigator.credentials.create()`:
The web app can deserialize the JSON string back to a `createCredentialOptionsJSON` object (not shown).
The **`parseCreationOptionsFromJSON()`** method is used to convert that object to the form that can be used in `navigator.credentials.create()`:

```js
// Convert options to form used by create()
const createCredentialOptions =
PublicKeyCredential.parseCreationOptionsFromJSON(
receivedCreateCredentialOptions,
createCredentialOptionsJSON, // JSON-type representation
);

navigator.credentials
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ browser-compat: api.PublicKeyCredential.parseRequestOptionsFromJSON_static

{{APIRef("Web Authentication API")}} {{SeeCompatTable}}{{securecontext_header}}

The **`parseRequestOptionsFromJSON()`** static method of the {{domxref("PublicKeyCredential")}} interface converts a particular JSON-friendly representation of the [`publicKey` request credentials options object structure](/en-US/docs/Web/API/CredentialsContainer/get#publickey_object_structure) into the `publicKey` structure.
The **`parseRequestOptionsFromJSON()`** static method of the {{domxref("PublicKeyCredential")}} interface converts a {{glossary("JSON type representation")}} into its corresponding [`publicKey` request credentials options object structure](/en-US/docs/Web/API/CredentialsContainer/get#publickey_object_structure).

The method is a convenience function for deserializing information provided by a relying server to a web app in order to request an existing credential.
The method is a convenience function for converting information provided by a relying server to a web app in order to request an existing credential.

## Syntax

Expand Down Expand Up @@ -41,15 +41,16 @@ The Web Authentication process for [authenticating a (registered) user](/en-US/d
The web app passes this information to an authenticator to find the credential, by calling [`navigator.credentials.get()`](/en-US/docs/Web/API/CredentialsContainer/get) with an argument that contains the server-supplied data in the [`publicKey` request credentials options object structure](/en-US/docs/Web/API/CredentialsContainer/get#publickey_object_structure).

The specification does not define how the information needed for requesting a credential is sent.
A convenient approach is to first encapsulate the information in an object that mirrors the structure of the [`publicKey` request credentials options object](/en-US/docs/Web/API/CredentialsContainer/get#publickey_object_structure), encoding buffer properties such as the `challenge` as [base64url](/en-US/docs/Glossary/Base64) strings.
This object can be serialized to a [JSON](/en-US/docs/Glossary/JSON) string and then deserialized by the web app to the [`publicKey` request credentials options object structure](/en-US/docs/Web/API/CredentialsContainer/get#publickey_object_structure) using **`parseRequestOptionsFromJSON()`**.
A convenient approach is for the server to encapsulate the information in a {{glossary("JSON type representation")}} of the [`publicKey` request credentials options object](/en-US/docs/Web/API/CredentialsContainer/get#publickey_object_structure) that mirrors its structure but encodes buffer properties such as the `challenge` as [base64url](/en-US/docs/Glossary/Base64) strings.
This object can be serialized to a [JSON](/en-US/docs/Glossary/JSON) string, sent to the web app and deserialized, and then converted to the [`publicKey` request credentials options object structure](/en-US/docs/Web/API/CredentialsContainer/get#publickey_object_structure) using **`parseRequestOptionsFromJSON()`**.

## Examples

A server might create JSON credentials using something like this (taken from the [`AuthenticatorResponse` example "getting an AuthenticatorAttestationResponse"](/en-US/docs/Web/API/AuthenticatorResponse#getting_an_authenticatorattestationresponse)):
When authorizing an already registered user, a relying party server will supply the web app with information about the requested credentials, the relying party, and a challenge.
The code below defines this information in the form described in the [`options` parameter](#options) above:

```js
const publicRequestKey = {
const requestCredentialOptionsJSON = {
challenge: new Uint8Array([139, 66, 181, 87, 7, 203, ...]),
rpId: "acme.com",
allowCredentials: [{
Expand All @@ -58,17 +59,21 @@ const publicRequestKey = {
}],
userVerification: "required",
}
```

Because this object only uses JSON data types, it can be be serialized to JSON using [`JSON.stringify()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) and sent to the web app.

//Stringify to serialize/send
const publicKeyJSON = JSON.stringify(publicRequestKey);
```js
JSON.stringify(requestCredentialOptionsJSON);
```

The `publicKeyJSON` can be sent to the web app, which will parse the JSON back into an object.
Below we show how you might use `parseRequestOptionsFromJSON()` to convert this parsed object "`receivedPublicKeyJSON`" to the correct form to use in `navigator.credentials.get()`:
The web app can deserialize the JSON string back to a `requestCredentialOptionsJSON` object (not shown).
The **`parseRequestOptionsFromJSON()`** method is used to convert that object to the form that can be used in `navigator.credentials.get()`:

```js
// Convert options to form used by get()
const publicKey = PublicKeyCredential.parseRequestOptionsFromJSON(
receivedPublicKeyJSON,
requestCredentialOptionsJSON, // JSON-type representation
);

navigator.credentials
Expand Down

0 comments on commit 3a8a2f3

Please sign in to comment.