MENU


Credential Management

The Credential Management API allows login information and other information to be stored in the browser and automatically retrieved during subsequent sessions.

This webpage will try to sign you in automatically on subsequent visits (F5 to refresh). If more than one set of credentials are stored, it will let you choose an account from the options.
RESETRUNFULL
<!DOCTYPE html><html><body>
<form id="form" method="post">
   <input type="text" name="username" autocomplete="username" placeholder="username"/><br/>
   <input type="text" name="name" autocomplete="name" placeholder="full name"/><br/>
   <input type="password" name="password" autocomplete="current-password" placeholder="password"/><br/>
   <input type="submit"/>
</form>
<script>
   onload = async()=>{
      const cred = await navigator.credentials.get({
                      password: true,       // Obtain password credentials?
                      federated: {          // Obtain federation credentials? or not
                         providers: [ 'https://accounts.google.com',
                                      'https://www.facebook.com',
                                      'https://webcodingcenter.com']},
                      unmediated: true});   // automatically sign in?
      if (!cred) return;
      form.username.value = cred.id;
      form.name.value = cred.name;
      form.password.value = cred.password;
    }
    
    form.onsubmit = e=>{
       e.preventDefault();
       // navigator.credentials.store(new FederatedCredential(form));  // password not stored
       navigator.credentials.store(new PasswordCredential({
          id: form.username.value,
          name: form.name.value,
          password: form.password.value,
          provider: 'https://webcodingcenter.com',
          iconURL: 'https://webcodingcenter.com/shared/face.jpg'
       }));
    }
</script>
</body></html>