Storing Credentials via JavaScript Object via Web Credential API?

Question

I am currently working with an application that utilizes AngularJS, all data being passed to and fro is in JavaScript Objects.

I recently have been trying to implement the Web Credential Management API to store credentials via JSON. Although, it appears that all and any documentation that I may find is suggesting that you grab a form via JavaScript and pass any data in the form to Google Chrome to be able to store credentials. This isn't the case with Angular, as all form data lives in the scope, but is accessible via JavaScript as objects on the model. The current solution from documentation looks like so:

var form = document.querySelector('\#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
  // continuation
});

Source: https://developers.google.com/web/updates/2016/04/credential-management-api

Has anyone had the opportunity to pass the password and username in through an Object via JavaScript?

More Sources:

• https://w3c.github.io/webappsec-credential-management/#introduction
• https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API

Thanks so much!

Answer 1

You can do that by initiating PasswordCredential from an object. See this documentation: https://developers.google.com/web/fundamentals/security/credential-management/store-credentials#store_username_and_password_details

var c = new PasswordCredential({  
  id:       id,  
  password: password,  
  name:     name,  
  iconrURL: iconUrl  
});  

navigator.credentials.store(c)  
.then(function() {  
  // done  
});