PasswordCredential: PasswordCredential() constructor
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The PasswordCredential()
constructor creates a new PasswordCredential
object. In
supporting browsers, an instance of this class may be passed the credential
from the init
object for global fetch()
.
Syntax
js
new PasswordCredential(passwordCredentialData)
new PasswordCredential(htmlFormElement)
Parameters
Either of the following:
passwordCredentialData
-
An object with the following properties:
iconURL
Optional-
The URL of a user's avatar image.
id
-
The ID of the user signing in.
name
Optional-
The name of the user signing in.
password
-
The password of the user signing in.
htmlFormElement
-
A reference to an
HTMLFormElement
with appropriate input fields. The form should, at the very least, contain an id and password. It could also require a CSRF token.
Examples
This example shows how to set up an HTMLFormElement
to capture data
which we'll use to create a PasswordCredential
object.
Starting with the form element.
html
<form id="form" method="post">
<label for="id">Username:</label>
<input type="text" name="id" autocomplete="username" />
<label for="password">Password:</label>
<input type="password" name="password" autocomplete="current-password" />
<input type="hidden" name="csrf_token" value="*****" />
</form>
Then, a reference to this form element, using it to create
a PasswordCredential
object, and storing it in the browser's password
system.
js
const form = document.querySelector("#form");
const creds = new PasswordCredential(form);
// Store the credentials.
navigator.credentials.store(creds).then((creds) => {
// Do something with the credentials if you need to.
});
Specifications
Specification |
---|
Credential Management Level 1 # dom-passwordcredential-passwordcredential |
Browser compatibility
BCD tables only load in the browser