凭据管理 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.服务器难免会有多用户同时 ...
随机推荐
- Learning to rank的讲解，单文档方法（Pointwise），文档对方法（Pairwise），文档列表方法（Listwise）
学习排序(Learning to Rank) LTR(Learning torank)学习排序是一种监督学习(SupervisedLearning)的排序方法.LTR已经被广泛应用到文本挖掘的很多领域 ...
- 虚拟机下CentOS7开启SSH连接
在虚拟机(Vmware Workstation)下,安装了CentOS7,现在想通过SSH工具连接虚拟机中的CentOS7 1. 首先,要确保CentOS7安装了 openssh-server,在 ...
- 10个优秀Objective-C和iOS开发在线视频教程
如果你自己开发iOS应用,你肯定会发现网上有很多资源.学习编程的一个最好的方法就是自己写代码,而开始写代码的最快的方式就是看其他人怎么写.我们从海量视频和学习网站中整理出了我们认为对你学习Object ...
- STL--迭代器（iterator）使用详解
迭代器的分类 在STL中,原生指针也是一种迭代器,除了原生指针以外,迭代器被分为五类: Input Iterator 此迭代器不允许修改所指的对象,即是只读的.支持==.!=.++.*.->等操 ...
- jQuery的deferred对象详解（转）
jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...
- LeetCode OJ 238. Product of Array Except Self 解题报告
题目链接:https://leetcode.com/problems/product-of-array-except-self/ 238. Product of Array Except Se ...
- [ci]jenkins-slave的添加(vm模式,通过ssh和jnlp)
jenkins-slave的添加-在vm上通过jnlp方式 参考:http://www.cnblogs.com/sparkdev/p/7102622.html 下载 slave.jar和slave-a ...
- 【转】SAP BW 顾问靠手 — SAP中的例程
什么是例程(Routine)? 例程就是我们可以自己定义的程序代码.通过程序代码来完成我们的需求,因为业务是千变万化,如果想让产品能跟随上业务的脚步,就必须要有非常灵活的功能来补充.大家都知道软件产品 ...
- 【iCore1S 双核心板_FPGA】例程二：GPIO输入实验——识别按键输入
实验现象: iCore1s 双核心板上与FPGA相连的三色LED(PCB上标示为FPGA·LED),按键按下红灯点亮,松开按键红灯熄灭. 核心源代码: module KEY( input CLK_12 ...
- Entlib DAAB映射枚举类型
1. IRowMapper<UserDto> addressMapper = MapBuilder<UserDto> .MapAllProperties() .Map(p =& ...