凭据管理 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>