taoliujun / blog

https://taoliujun.github.io/blog/
https://taoliujun.github.io/blog/
0 stars 0 forks source link

Web API - Credential Management #77

Open taoliujun opened 8 months ago

taoliujun commented 8 months ago

Credential Management

MDN: https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API

Credential Management用于管理网页的登录凭证如如密码、秘钥对。比如在第一次登录时保存密码凭证,以后读取该凭证后自动登录,省去用户重复输入账号密码的步骤(尽管可能还需要用户在浏览器弹出框里选择要登录的用户)。

在一些浏览器如chrome的Password Manager配置chrome://password-manager/settings中,有一个选项Offer to save passwords

image

是否允许保存密码。它在打开后,有两个作用,一是允许代码调用credentials.store存储凭证信息;二是允许浏览器智能的为你存储网页的登录凭证,即便该网页并未显式调用credentials.store。它的效果如下:

image

接口

Credential

基础凭证接口,本身不能直接使用。

PasswordCredential

密码凭证接口,继承于Credential,用于存储、读取密码类型的凭证。

FederatedCredential

联合凭证接口,比如接入google联合登录凭证。

CredentialsContainer

Navigator.credentials获取该接口实例,提供creategetstore等方法来创建、读取、存储凭证。create接口一般不直接使用,而直接用PasswordCredential这种具体的接口去创建凭证。

方法和属性

略,见示例。

示例

示例:https://taoliujun.github.io/example/web-api/Credential_Management_API/index.html

  1. 输入账号密码,点击登录,提示是否存储密码凭证:

image

  1. 读取密码凭证并打印:

image

  1. 如果有多个凭证,需要用户手动选择使用哪个凭证:

image