凭据管理 API
api 有相应更新 https://www.chromestatus.com/features/4781762488041472
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajanuw</title>
<link rel="shortcut icon" type="image/ico" href="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta name="keywords" content="ajanuw">
</head>
<body>
<!--[if lt IE 8]> <h3>请升级你的浏览器，或更换主浏览器！！!</h3> <![endif]-->
<div class="form" role="form">
<div role="username">
<label for="username">账号: </label>
<input id="username" type="text" name="username" placeholder="账号" autocomplete="on" />
</div>
<div role="password">
<label for="password">密码: </label>
<input id="password" type="text" name="password" placeholder="密码" autocomplete="off" />
</div>
<span onclick="return signIn()" class="submit" role="submit" style="border: 1px solid #f48;">登录 ></span>
</div>
<div class="show-login-view" style="display: none;">
<button class="sign-out" onclick="return signOut()">< sign out</button>
<h1 class="welcome" style="color: #f48;"></h1>
</div>
<p class="doc" style="color: #f48;"></p>
<script type="text/javascript">
const info = {
name: 'ajanuw',
pass: 123456
}
function $(a) {
return document.querySelector(a);
}
const [name, pass, submit] = [$('#username'), $('#password'), $('.submit')];
const [el_from, el_wel_view] = [$('.form'), $('.show-login-view')];
function hideFrom() {
el_from.style.display = 'none';
}
function hideWel() {
el_wel_view.style.display = 'none';
}
function showLoginView(nameV, passV) {
if (nameV !== '' && passV !== '') {
$('.welcome').innerHTML = `welcome - ${nameV}`;
el_wel_view.style.display = 'block';
credential_store(nameV, nameV, passV);
return true;
}
return false;
}
function showFromView() {
el_from.style.display = 'block';
}
function signOut() {
showFromView();
hideWel();
// navigator.credentials.preventSilentAccess();
}
function signIn() {
if (showLoginView(name.value, pass.value)) {
hideFrom();
}
}
function credential_store(id, name, password) {
if(!('credentials' in navigator)){
console.dir('不支持 navigator.credentials');
$('.doc').innerHTML = '不支持 navigator.credentials';
return null;
}
let cred = new PasswordCredential({
id: id,
password: password,
name: name
});
navigator.credentials.store(cred)
.then(function() {
// done
});
}
function credential_get() {
if(!('credentials' in navigator)){
console.dir('不支持 navigator.credentials');
$('.doc').innerHTML = '不支持 navigator.credentials';
return null;
}
navigator.credentials.get({
password: true,
mediation: 'optional'
}).then(cred => {
console.log( cred);
if(cred){
$('.welcome').innerHTML = `welcome - ${cred.name} [[${cred.password}]]`;
el_wel_view.style.display = 'block';
hideFrom();
}
}).catch(e=>{
console.log( e);
})
}
window.onload = function(){
credential_get();
}
/* 凭据管理 API
* navigator.credential.get(); => mediation 增加的属性 // https://developers.google.cn/web/fundamentals/security/credential-management/retrieve-credentials
* navigator.credentials.store(); // https://developers.google.cn/web/fundamentals/security/credential-management/store-credentials
* navigator.credentials.requireUserMediation(); => navigator.credentials.preventSilentAccess() // https://developers.google.cn/web/fundamentals/security/credential-management/retrieve-credentials#sign-out
*/
</script>
</body>
</html>
凭据管理 API的更多相关文章
- WIN7凭据管理器保存的凭据过段时间会自动删除的解决办法
控制面板\用户帐户和家庭安全\凭据管理器 进入该页面可看到所有凭据
- php版redis插件,SSDB数据库,增强型的Redis管理api实例
php版redis插件,SSDB数据库,增强型的Redis管理api实例 SSDB是一套基于LevelDB存储引擎的非关系型数据库(NOSQL),可用于取代Redis,更适合海量数据的存储.另外,ro ...
- Spring3.1新属性管理API：PropertySource、Environment、Profile
Spring3.1提供了新的属性管理API,而且功能非常强大且很完善,对于一些属性配置信息都应该使用新的API来管理.虽然现在Spring已经到4版本了,这篇文章来的晚点. 新的属性管理API Pro ...
- win7问题解决，凭据管理器和无法访问，不允许一个用户使用一个以上用户名与服务器或共享资源进行多重连接。
WIN7凭据管理器,如果你用一个帐号远程登录以后在电脑中会记住这个信息,假如你想用另外的帐号,那么就到控制面板-凭据管理器里中进行修改或者删除. 如果你登录以后提示,“无法访问.不允许一个用户使用一个 ...
- 阿里云API网关（12）为员工创建子账号，实现分权管理API：使用RAM管理API
网关指南: https://help.aliyun.com/document_detail/29487.html?spm=5176.doc48835.6.550.23Oqbl 网关控制台: https ...
- asp.net core系列 54 IS4用客户端凭据保护API
一. 概述 本篇开始进入IS4实战学习,从第一个示例开始,该示例是 “使用客户端凭据保护API”,这是使用IdentityServer保护api的最基本场景.该示例涉及到三个项目包括:Identity ...
- windows凭据管理
解决windows凭据无法保存的问题1: 运行-gpedit.msc(组策略)-计算机配置-管理模板-系统-凭据分配 双击右侧”允许分配保存的凭据用于仅NTLM服务器身份验证“ 在弹出的窗口中选中“已 ...
- 框架源码系列十一：事务管理（Spring事务管理的特点、事务概念学习、Spring事务使用学习、Spring事务管理API学习、Spring事务源码学习）
一.Spring事务管理的特点 Spring框架为事务管理提供一套统一的抽象,带来的好处有:1. 跨不同事务API的统一的编程模型,无论你使用的是jdbc.jta.jpa.hibernate.2. 支 ...
- win7凭据管理、win7多用户远程登录、主机头设置、nuget.org无法访问
前言 最近遇到的几个问题,然后处理在此对处理方式进行记录一下. 1.服务器共享文件夹,在本机进行访问登录时,每次登录或者每次开机进入都要进行登录的权限认证,这样很麻烦. 2.服务器难免会有多用户同时 ...
随机推荐
- 【Spark】Sparkstreaming-性能调优
Sparkstreaming-性能调优 Spark Master at spark://node-01:7077 sparkstreaming 线程 数量_百度搜索 streaming中partiti ...
- TerminateProcess的使用问题
最好时外部进程来结束目标进程,类似于任务管理器的结束目标进程方式.如果是自身进程想结束自身,可能不同版本的windows行为不一致,有一些能自身强制退出,有一些强制退出不了. 本来MSDN上就说了这个 ...
- C#去除HTML标签
public static string ReplaceHtmlTag(string html, int length = 0) { string strText = System.Text.Regu ...
- 【SqlServer】解析SqlServer中的事务
目录结构: contents structure [+] 事务是什么 控制事务 数据并发访问产生的影响 事务的隔离级别 锁 NOLOCK.HOLDLOCK.UPDLOCK 死锁分析 在这篇Blog中, ...
- EasyUI tabs update 正确用法
来源:http://ewoyaofei.blog.163.com/blog/static/343562612012617111734974/ 一直以为 tabs update 是 easyui 的 b ...
- FTP上传、下载（简单小例子）
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...
- [docker]docker自带的overlay网络实战
overlay网络实战 n3启动consul docker run -d -p 8500:8500 -h consul --name consul progrium/consul -server -b ...
- [k8s]通过openssl生成证书
证书认证原理: http://www.cnblogs.com/iiiiher/p/7873737.html [root@m1 ssl]# cat master_ssl.cnf [req] req_ex ...
- Python list 常用方法总结
一,创建列表 只要把逗号分隔的不同的数据项使用方括号([ ])括起来即可 下标(角标,索引)从0开始,最后一个元素的下标可以写-1 list = ['1',‘2,‘3’] list = [] 空 ...
- Android adb input 命令介绍
input命令是用来向设备发送模拟操作的命令: 因为版本不同,input命令也有所不同 以下为Android 4.0的input命令: usage:input text <string> ...