摘要：保存認證信息在用戶成功登錄后，使用瀏覽器的密碼管理器保存認證信息，以便日后使用。密碼管理器保存了多個賬號設(shè)置為，以獲得密碼認證對象定義一個由聯(lián)合賬號供應(yīng)者組成的數(shù)組通過認證對象的屬性，可以檢查它的類型是還是。

原文連接：http://lea.verou.me/2015/12/my-positive-experience-as-a-woman-in-tech/

為了提供優(yōu)質(zhì)的用戶體驗，我們應(yīng)該幫助用戶在不同網(wǎng)頁進行身份認證。完成認證的用戶可以在不同網(wǎng)頁擁有不同的資料，在多設(shè)備之間同步數(shù)據(jù)，或是在離線情況下處理數(shù)據(jù)；可以擴展的功能數(shù)之不盡。但是創(chuàng)建賬號、記住和輸入密碼對用戶來說非常麻煩，尤其是在手機端，這通常導(dǎo)致用戶在不同網(wǎng)站使用同一份密碼。這在安全性上有很大的風(fēng)險。

Chrome 51(最新版本)支持了Credential Management API（證書管理API）。它遵循了W3C提議的標準，為開發(fā)者提供了管理瀏覽器認證的入口，以幫助用戶以更簡單的方式登錄。

通過認證管理API, 開發(fā)者可以保存和獲取密碼認證信息和聯(lián)合認證信息。它提供了一下3個方法：

navigator.credentials.get()

navigator.credentials.store()

navigator.credentials.requireUserMediation()

通過使用這些API，開發(fā)者可以完成以下強大的功能：

讓用戶可以通過一次點擊完成登錄

記錄用戶登錄時使用的聯(lián)合認證賬號

當(dāng)session過期時，幫助用戶重新登錄

在Chrome的實現(xiàn)中，認證信息會被保存在Chrome的密碼管理器中。用戶登陸后，可以在多設(shè)備之間同步密碼。同步的密碼也可以被分享給Android應(yīng)用，只要這些應(yīng)用集成了Smart Lock for Passwords for Android，以提供無縫的跨平臺體驗.

如何使用認證管理API，取決于你的網(wǎng)站架構(gòu)是如何設(shè)計的。你的網(wǎng)站是一個單頁應(yīng)用？是一個涉及頁面切換的傳統(tǒng)架構(gòu)？只能在首頁登錄？還是到處都能登錄？用戶可否在不登錄的情況下瀏覽網(wǎng)頁？登錄操作是否在彈出的窗口中進行？還是說需要操作不同的頁面才能登錄。

我們不可能覆蓋所有的場景，但讓我們先通過一個典型的單頁應(yīng)用了解一下：

首頁是一個登錄表單。

點擊“登錄”按鈕時，用戶會被導(dǎo)向一個登錄表單。

注冊和登錄表單都提供了id/password認證與聯(lián)合認證登錄的選項，例如：通過Google登錄，或通過Facebook登錄。

使用認證管理API，我們可以為網(wǎng)站添加以下功能，例如：

在用戶登錄時，顯示賬號選擇框： 當(dāng)用戶點擊“登錄”時，彈出原生賬號選擇框。

保存認證信息： 在用戶成功登錄后，使用瀏覽器的密碼管理器保存認證信息，以便日后使用。

調(diào)解自動登錄： 一旦用戶退出登錄，在用戶下一次訪問時，停止自動登錄。

你們可以通過這個例子體驗一下，它的代碼在這兒.

注意：這些API只能在安全網(wǎng)站中使用，例如HTTPS網(wǎng)站、locolhost

在用戶點擊了“登錄”按鈕，并跳到登錄表單之前，你可以通過navigator.credentials.get()方法獲得認證信息。Chrome會彈出一個賬號選擇框，供用戶選擇。

彈出了一個賬號選擇框，用戶可選擇一個賬號進行登錄。

獲取密碼認證對象

如果想支持通過密碼認證登錄，請使用password: true

navigator.credentials.get({  
  password: true, // 設(shè)置為true，以獲取密碼認證對象
}).then(function(cred) {  
  // 繼續(xù)
  ...

使用密碼認證登錄

當(dāng)用戶選擇了一個賬號時，resolve函數(shù)會收到一個密碼認證對象，你可以通過fetch()方法將信息發(fā)送到服務(wù)器。

// 延續(xù)上一個例子
}).then(function(cred) {  
  if (cred) {  
    if (cred.type == "password") {  
      // 構(gòu)建FormData對象
      var form = new FormData();

      // 添加CSRF令牌
      var csrf_token = document.querySelector("csrf_token").value;  
      form.append("csrf_token", csrf_token);

      // 你可以將額外信息添加到`.additionalData`
      cred.additionalData = form;

      // 將認證對象作為`credentials`通過`POST`請求發(fā)送
      // id, 密碼和額外信息會被加密，并作為HTTP主體被發(fā)送給接口
      fetch(url, {           // 請保證url是HTTPS鏈接
        method: "POST",      // 使用POST方法
        credentials: cred    // 添加密碼認證對象
      }).then(function() {  
        // 繼續(xù)  
      });  
    } else if (cred.type == "federated") {  
      // 繼續(xù)

使用聯(lián)合認證登錄

如果想為用戶展示聯(lián)合登錄賬號，請在調(diào)用get()方法時，通過federated選項定義一個包含賬號提供者id的數(shù)組。

密碼管理器保存了多個賬號

navigator.credentials.get({  
  password: true, // 設(shè)置為true，以獲得密碼認證對象
  federated: {  
    providers: [  // 定義一個由聯(lián)合賬號供應(yīng)者id組成的數(shù)組
      "https://accounts.google.com",  
      "https://www.facebook.com"  
    ]  
  }  
}).then(function(cred) {  
  // continuation  
  ...

通過認證對象的type屬性，可以檢查它的類型是PasswordCredential(type == "password")還是FederatedCredential(type == "federated")。
如果是FederatedCredential，你可以將它包含的信息發(fā)送給對應(yīng)的API。

});  
    } else if (cred.type == "federated") {  
      // `provider`屬性包含了聯(lián)合賬號供應(yīng)者的id
      switch (cred.provider) {  
        case "https://accounts.google.com":  
          // 使用Google Sign-In進行聯(lián)合登錄
          var auth2 = gapi.auth2.getAuthInstance();

          // 使用Google Sign-In庫時，可以通過login_hint指定一個賬號
          return auth2.signIn({  
            login_hint: cred.id || ""  
          }).then(function(profile) {  
            // 繼續(xù)  
          });  
          break;

        case "https://www.facebook.com":  
          // 使用Facebook Login進行聯(lián)合登錄
          // 繼續(xù)
          break;

        default:  
          // 顯示表單
          break;  
      }  
    }  
  // 如果cred是undefined
  } else {  
      // 顯示表單

當(dāng)用戶通過表單登錄你的網(wǎng)站時，你可以使用navigator.credentials.store()來保存認證信息。瀏覽器會詢問用戶是否希望保存。你可以根據(jù)認證的類型，決定使用new PasswordCredential()還是new FederatedCredential()來創(chuàng)建認證對象并保存。

Chrome詢問用戶是否希望保存認證信息（或是作為聯(lián)合賬號）

通過表單元素創(chuàng)建和保存密碼認證對象

以下代碼通過屬性autocomplete，自動將表單元素?映射為PasswordCredential對象的參數(shù)。

HTML

JavaScript:

var form = document.querySelector("#form");  
var cred = new PasswordCredential(form);  
// 保存認證對象
navigator.credentials.store(cred)  
.then(function() {  
  // 繼續(xù)
});

創(chuàng)建和保存聯(lián)合認證對象

// 在聯(lián)合認證后，通過你獲得的信息創(chuàng)建一個FederatedCredential對象
var cred = new FederatedCredential({  
  id: id,                                  // 用戶id
  name: name,                              // 可選的用戶名
  provider: "https://accounts.google.com",  // 聯(lián)合賬號提供者的id
  iconURL: iconUrl                         // 可選的用戶頭像地址
});  
// 保存認證對象
navigator.credentials.store(cred)  
.then(function() {  
  // 繼續(xù)
});

當(dāng)用戶再次訪問網(wǎng)站時，session有可能已經(jīng)失效了。我們不必麻煩用戶每次回訪的時候重新輸入密碼。可以幫助他們自動重新登錄。

當(dāng)用戶自動登錄時，會彈出一個通知

獲取一個認證對象

navigator.credentials.get({  
  password: true,
  federated: {
    providers: [
      "https://accounts.google.com",  
      "https://www.facebook.com"  
    ]  
  },  
  unmediated: true // 設(shè)置為true，以支持用戶自動登錄  
}).then(function(cred) {  
  if (cred) {  
    // 可以自動登錄
    ...  
  } else {  
    // 不可以自動登錄
    ...
  }  
});

這段代碼與你在前面的“顯示賬號選擇框”部分的代碼相似。唯一的區(qū)別是這兒設(shè)置了unmediated: true。

這會使函數(shù)馬上resolve，并返回一個認證對象，幫助用戶自動登錄。自動登錄有以下條件：

瀏覽器已顯式地告知用戶正在進行自動登錄

用戶曾經(jīng)通過認證管理API登陸了網(wǎng)站

用戶在瀏覽你的網(wǎng)站時只保存了一個認證對象

用戶在上一次訪問時沒有主動退出登錄

如果任意條件不符合，這個函數(shù)便會被reject

當(dāng)用戶退出登錄時，應(yīng)該由你來確保用戶下次回訪時不會自動登錄 。認證管理API提供了一種叫作mediation（調(diào)解）的機制來確保這一點。你可以通過調(diào)用navigator.credentials.requireUserMediation()來開啟調(diào)解模式。只要用戶在這個網(wǎng)站中的調(diào)解狀態(tài)為開啟，那么如果你在navigator.credentials.get()方法中選擇了unmediate:true，這個函數(shù)會在resolve時，傳入undefined。

調(diào)解自動登錄

navigator.credentials.requireUserMediation();

在網(wǎng)頁中，Javascript是否有可能獲得原始密碼？

不能。密碼只能作為PasswordCredential對象中的一部分，對外是不可訪問的。
No. You can only obtain passwords as a part of?PasswordCredential?and it’s not exposable by any means.

Is it possible to store 3 set of digits for an id using Credential Management API?
我們可以通過認證管理API為一個id保存三組數(shù)字嗎？

目前還不行。我們非常感謝你對標準的反饋?

我可以在iframe中使用認證管理API嗎？

這個API只能在最高級的上下文中使用。如果在iframe中調(diào)用.get()或.store()方法，這些方法會馬上resolve，并且不會產(chǎn)生任何效果。

我可以在我的密碼管理Chrome擴展中集成認證管理API嗎？

你可以重寫navigator.credentials，并將它指向你的Chrome擴展，由擴展來get()或store()認證對象。

作者