儲存表單中的憑證

Meggin Kearney
Meggin Kearney

儲存登入表單中的憑證

請盡可能簡化註冊和登入表單。

儲存登入表單中的憑證 如此一來,使用者下次返回時就不必再次登入。

如何儲存表單的使用者憑證:

  1. 在表單中加入 autocomplete
  2. 禁止提交表單。
  3. 傳送要求以進行驗證。
  4. 儲存憑證。
  5. 更新使用者介面或前往個人化頁面。

在表單中加入 autocomplete

繼續編輯前 檢查表單是否包含 autocomplete 屬性。 這有助於 Credential Management API 找到 idpassword 然後建構憑證物件

這也有助於瀏覽器不支援 Credential Management API 瞭解語意 進一步瞭解自動填入功能: 這篇文章Jason Grigsby

<form id="signup" method="post">
  <input name="email" type="text" autocomplete="username email" />
  <input name="display-name" type="text" autocomplete="name" />
  <input name="password" type="password" autocomplete="new-password" />
  <input type="submit" value="Sign Up!" />
</form>

禁止提交表單

當使用者按下提交按鈕時,阻止系統提交表單,否則 會造成頁面轉換:

    var f = document.querySelector('#signup');
    f.addEventListener('submit', e => {
      e.preventDefault();

只要防止頁面轉換 您可以在驗證憑證的真實性時保留憑證資訊。

傳送要求進行驗證

如要驗證使用者,請使用 AJAX 將憑證資訊傳送至您的伺服器。

在伺服器端建立端點 (或直接修改現有端點) 會以 HTTP 代碼 200 或 401 回應,讓瀏覽器清楚顯示 註冊/登入/變更密碼是否成功。

例如:

// Try sign-in with AJAX
fetch('/signin', {
  method: 'POST',
  body: new FormData(e.target),
  credentials: 'include',
});

儲存憑證

如要儲存憑證,請先檢查 API 是否可用。 接著將 PasswordCredential敬上 做為引數 可以同步或非同步 致電 navigator.credentials.store()。 如果 API 無法使用 只需將商家檔案資訊轉至下一個步驟即可。

同步範例:

if (window.PasswordCredential) {
  var c = new PasswordCredential(e.target);
  return navigator.credentials.store(c);
} else {
  return Promise.resolve(profile);
}

非同步範例:

if (window.PasswordCredential) {
  var c = await navigator.credentials.create({password: e.target});
  return navigator.credentials.store(c);
} else {
  return Promise.resolve(profile);
}

要求成功後,請儲存憑證資訊。 (如果要求失敗,請勿儲存憑證資訊 否則回訪者會感到困惑)。

Chrome 瀏覽器取得憑證資訊後 畫面上會彈出通知視窗,要求儲存憑證 或聯盟供應商的服務或產品。

儲存憑證
自動登入使用者的通知

更新 UI

如果一切順利,請使用設定檔資訊更新使用者介面 或前往個人化頁面

     }).then(profile => {
       if (profile) {
         updateUI(profile);
       }
     }).catch(error => {
       showError('Sign-in Failed');
     });
    });

完整程式碼範例

// Get form's DOM object
var f = document.querySelector('#signup');
f.addEventListener('submit', (e) => {
  // Stop submitting form by itself
  e.preventDefault();

  // Try sign-in with AJAX
  fetch('/signin', {
    method: 'POST',
    body: new FormData(e.target),
    credentials: 'include',
  })
    .then((res) => {
      if (res.status == 200) {
        return Promise.resolve();
      } else {
        return Promise.reject('Sign-in failed');
      }
    })
    .then((profile) => {
      // Instantiate PasswordCredential with the form
      if (window.PasswordCredential) {
        var c = new PasswordCredential(e.target);
        return navigator.credentials.store(c);
      } else {
        return Promise.resolve(profile);
      }
    })
    .then((profile) => {
      // Successful sign-in
      if (profile) {
        updateUI(profile);
      }
    })
    .catch((error) => {
      // Sign-in failed
      showError('Sign-in Failed');
    });
});

瀏覽器相容性

PasswordCredential

瀏覽器支援

  • Chrome:51.
  • Edge:79,
  • Firefox:不支援。
  • Safari:不支援。

資料來源

瀏覽器支援

  • Chrome:51.
  • Edge:79,
  • Firefox:60。
  • Safari:13.

資料來源

意見回饋