api 有相應更新 https://www.chromestatus.com/features/4781762488041472javascript
<!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>