• 凭据管理 API


    api 有相应更新 https://www.chromestatus.com/features/4781762488041472

    image

    <!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>
    
  • 相关阅读:
    good
    C# 调用控制台程序,并获取输出写入文件
    正则基础之——环视(Lookaround)
    C# 正则表达式及常用正则表达式
    c# winform 关于DataGridView的一些操作(很全,绝对够用)
    [bzoj4542][Hnoi2016]大数——同余+莫队
    [bzoj4010][HNOI2015]菜肴制作——拓扑排序
    [bzoj5285][Hnoi2018]寻宝游戏——思维+排序
    NOIP2018游记&&总结
    [bzoj5289][Hnoi2018]排列——贪心+堆
  • 原文地址:https://www.cnblogs.com/ajanuw/p/8404671.html
Copyright © 2020-2023  润新知