凭据管理 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.服务器难免会有多用户同时 ...
随机推荐
- Convolutional Neural Networks: Step by Step
Andrew Ng deeplearning courese-4:Convolutional Neural Network Convolutional Neural Networks: Step by ...
- M1 卡技术规范
射频卡简单来讲就是卡的一种工作方式,通过感应的方式来工作,也能够把全部的感应卡都统称为射频卡. IC卡的范围比較广.芯片外露的接触式IC卡.芯片内置的感应式IC卡和双界面IC卡都可统称为IC卡.IC卡 ...
- toml
其目标是成为一个小规模的易于使用的语义化配置文件格式.TOML被设计为可以无二义性的转换为一个哈希表(Hash table). # 这是一个TOML文件 title = "TOML Exam ...
- 动态改变APP图标
一.iOS动态更换App图标(一):基础使用 该功能应用的场景 1.白天/夜间模式切换,在切换App主色调同时切换App图标. 2.各类皮肤主题(淘宝就可换肤),附带App图标一块更换. 3.利用Ap ...
- 【Windows】Windows中解析DOS的DIR命令使用
总结一下cmd中的dir命令的用法 64位win10系统上,打印帮助文档. D:\test>dir /? 显示目录中的文件和子目录列表. DIR [drive:][path][filename] ...
- JDK自带的运行监控工具JConsole观察分析Java程序的运行
原文地址:https://blog.csdn.net/libaolin198706231987/article/details/55057149 一.JConsole是什么 从Java 5开始 引入了 ...
- 查看修改添加环境变量的工具——Rapid Environment Editor
工欲善其事,必先利其器! 特别是公司或者有其他限制的时候,更需要一个比较简单.实用.强大的工具了! 原来的公司都是小公司,给电脑安装系统.软件等都是自己直接上手,现在在一个大点的公司了,电脑运维有单独 ...
- ajax之async属性
Ajax请求中的async:false/true的作用 官方的解释是:http://api.jquery.com/jQuery.ajax/ async Boolean Default: true By ...
- 利用jsPDF有效减轻报表型应用服务器的IO负载
1.利用jsPDF在客户端浏览器上生成pdf文档 使用这种方法可以有效减轻服务器的压力,但是对于国际化,此库任然存在的问题:该库不支持unicode,生成中文文档会乱码,官方也有描述这个问题,详情请参 ...
- 6.翻译系列：EF 6 Code-First中数据库初始化策略（EF 6 Code-First系列）
原文链接:http://www.entityframeworktutorial.net/code-first/database-initialization-strategy-in-code-firs ...