凭证管理 保存密码

登录流程需要完成以下三步

1. 实现异步登录；
2. 登录成功后调用凭证管理 API 进行登录信息存储；
3. 完成登录成功后页面切换或者是 UI 更新之类的操作。

凭据存储

调用 navigator.credentials.store() 这个方法进行登录信息存储。由于仅有部分浏览器支持凭据管理 API，因此在使用前需要进行方法是否存在的判断：

if (navigator.credentials) {
    // 使用 navigator.credentials.store 进行凭证存储
}

• 凭证管理 API 提供了两凭据对象：PasswordCredential 和 FederatedCredential，这两种凭据对象均实现了 Credential 的接口，可以分别针对 账号密码登录 和 第三方登录 两种模式的登录信息进行存储。

凭据获取

• 过 navigator.credentials.get() 方法，可以获取同个域名下用户存储的登录信息。

if (navigator.credentials) {
    navigator.credentials.get({
        password: true
    });
}

• 参数

1. password: {boolean} 是否支持通过密码认证登录
2. federated: 第三方登录 {Object}
   • providers: {Array} 联合登录账号供应者 id 组成的数组
3. unmediated: {boolean} 是否显示账号选择器 如果只有一个账号，自动填充

获取账号密码登录凭证

只有当 options.password === true 时，账号选择器才会展示类型为 PasswordCredential 的登录信息。

退出登录

• 当用户退出网站时，应该确保用户在下次访问的时候不会自动登录。可以通过调用 navigator.credentials.requireUserMediation() 或 navigator.credentials.preventSilentAccess() 来关闭自动登录。Chrome 60+ 后，requireUserMediation 被重命名为 preventSilentAccess，请注意兼容。

app.logout = function () {
    // 处理登出流程
    if (navigator.credentials.requireUserMediation) {
        navigator.credentials.requireUserMediation();
    }
    else if (navigator.credentials.preventSilentAccess) {
        navigator.credentials.preventSilentAccess();
    }
};

栗子

    
    
    
    



    

        
        
        
    
    退出登录（不保存凭证）
    
    

参考来源： https://lavas.baidu.com/pwa/automatic-login/credential-management-api/introduction