TypeError：无法构造“PasswordCredential”：“id”不能为空答案

【问题标题】：TypeError: Failed to construct 'PasswordCredential': 'id' must not be emptyTypeError：无法构造“PasswordCredential”：“id”不能为空
【发布时间】：2017-05-31 16:55:49
【问题描述】：

我想在我的 Angular 应用中实现凭据管理 API

我的 login.html 看起来像这样

<div id="login-form" data-ng-form="loginForm" data-ng-controller="LoginFormController">
    <div>
        <input type="text" name="username" placeholder="username" data-ng-model="loginCredentials.username" id="uid" autocomplete="username">
        <input type="password" name="password" placeholder="password" data-ng-model="loginCredentials.password" id="pwd" autocomplete="new-password">
    </div>
    <div>
        <button id="loginButton" data-ng-click="login()">{{'label.button.login' | translate}}</button>
    </div>
    <div data-ng-show="authenticationFailed">
        <p>{{authenticationErrorMessage | translate}}</p>
    </div>
</div>

我有 LoginFormController 作为我的控制器。在函数内部，我像这样创建了名为 PasswordCredential 的新对象

            var form = angular.element('#login-form');
            //console.log(form);
            var cred  = new PasswordCredential(form);
            //store the credentials
            navigator.credentials.store(cred)
            .then(function(){

            });

但我收到错误 PasswordCredential : id must not be empty

请帮忙

【问题讨论】：

PasswordCredential 列出了此 API 的必填字段和可选字段。如果您要将 HTML 表单的结果塞入该 API，您需要有正确的字段名称。否则，您应该使用正确的字段名称构造一个中间对象，从表单的错误字段名称插入数据。
嗨詹姆斯，你能详细解释一下吗，我是初学者:)
我也没有做过，建议你从Mozilla网站上的示例表单开始。

标签： javascript web service-worker progressive-web-apps credential-manager

【解决方案1】：

而不是做表单样式

var form = angular.element('#login-form');
var cred  = new PasswordCredential(form);
//store the credentials
navigator.credentials.store(cred)
   .then(function(){

   });

传入 PasswordCredential 对象样式

var cred  = new PasswordCredential({
                id: scope.loginCredentials.username,
                password: scope.loginCredentials.password
            });
//store the credentials
navigator.credentials.store(cred)
                .then(function(){
                    console.log("Done Saving Creds");
                });

这应该是为了保存您的凭据！

【讨论】：