凭据管理 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.服务器难免会有多用户同时 ...
随机推荐
- How to make an IntelliJ IDEA plugin in less than 30 minutes
Sometimes it is a nice thing to extend an editor to have it do some new stuff, like being able to re ...
- 【ZH奶酪】如何用textgenrnn处理中文
如何用textgenrnn处理中文 1. 什么是textgenrnn? textgenrnn是建立在Keras和TensorFlow之上的,可用于生成字级别和词级别文本.网络体系结构使用注意力加权来加 ...
- ASP.NET CORE 之 在IIS上部署MVC项目
与ASP.NET时代不同,ASP.NET Core不再是由IIS工作进程(w3wp.exe)托管,而是使用自托管Web服务器(Kestrel)运行,IIS则是作为反向代理的角色转发请求到Kestrel ...
- Abp zero 示例运行
https://aspnetboilerplate.com/Pages/Documents/Zero/Startup-Template-Core Introduction The easiest wa ...
- 关于JAVA 中的Configuration类
properties文件是Java平台默认的配置文件格式,其优点是格式清晰,简单易懂,使用commons-configuration读取properties文件也比较简单,代码如下: 基本用法: 1. ...
- SoapUI Pro Project Solution Collection-XML assert
in soapui the XML object used here is from org.w3c.dom package so you need to read this article car ...
- 使用robot_pose_ekf对传感器信息融合
robot_pose_ekf是ROS Navigation stack中的一个包,通过扩展卡尔曼滤波器对imu.里程计odom.视觉里程计vo的数据进行融合,来估计平面移动机器人的真实位置姿态,输出o ...
- Notes中几个处理多值域的通用函数
1.查找出查找内容在多值域中的索引值 getItemIndex(域名,域值,文档) Public Function getItemIndex(ByVal fieldName As String, By ...
- Failed to execute goal org.mybatis.generator:mybatis-generator-maven-plugin:1.3.2:generate
(1)将Maven项目先clean,接着install下 (2)运行mvn mybatis-generator:generate命令 注意修改generatorConfig.xml的location: ...
- JS前台效果
最新的在上面 2014年3月3日14:46:46 百分比思路 function fixWidth(percent) { return document.body.clientWidth * perce ...