凭据管理 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.服务器难免会有多用户同时 ...
随机推荐
- stm32型号解读
ST意法半导体在牵手ARM后可以说是做的非常成功,抓住了从普通MCU到ARM的市场转变的机会.由于ST公司的STM32系列ARM 使用了完善的库开发,作为芯片的应用者不用从底层的寄存器来实现每个功 ...
- centos安装memcached和PHP php-pecl-memcached.x86_64
安装memcached sudo yum install memcached.x86_64 安装php-pecl-memcached php memcache有两个实现类 php-pecl-memca ...
- 【Spark】Sparkstreaming-性能调优
Sparkstreaming-性能调优 Spark Master at spark://node-01:7077 sparkstreaming 线程 数量_百度搜索 streaming中partiti ...
- 【T01】理解面向连接和无连接协议之间的区别
1.面向连接和无连接指的是协议,本质区别在于:对于无连接协议来说,每个分组的处理都独立于其他的分组. 而对于面向连接的协议,协议实现维护了当前分组与后继分组有关的状态信息. 2.无连接就是指udp,分 ...
- Web缓存知识体系
转载自[运维社区]https://www.unixhot.com/page/cache
- Java 8 新特性——Lambdas 表达式
本文内容 引入 测试数据 collect(toList()) map filter flatMap max 和 min reduce 整合操作 参考资料 Java 8 对核心类库的改进主要包括集合类的 ...
- 动态库DLL中类的使用
一.DLL中类的导出 在类名称前添加 _declspec(dllexport)定义,比如: class _declspec(dllexport) CMath{ .... }; 通常使用预编译开关切换类 ...
- N1, T1刷机记录
硬件配置 N1和T1使用的是晶晨Amlogic方案的芯片, 配置明细分别如下, 都是现在盒子的主流配置 N1CPU: Amlogic S905, ARM Cortex-A53 四核 up to 2.0 ...
- openssl - 怎么打开POD格式的帮助文件
原文链接: http://zhidao.baidu.com/link?url=47I6A0YGA9FnK6galKZ5sxPSZzFGRdng2qhACb4ToBuhuyMhdrwcYpZmNI28y ...
- Kubernetes1.2如何使用iptables
转:http://blog.csdn.net/horsefoot/article/details/51249161 本次分析的kubernetes版本号:v1.2.1-beta.0. Kubernet ...