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

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

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

Chrome 51(最新版本)支持了Credential Management API（證書(shū)管理API）。它遵循了W3C提議的標(biāo)準(zhǔn)，為開(kāi)發(fā)者提供了管理瀏覽器認(rèn)證的入口，以幫助用戶(hù)以更簡(jiǎn)單的方式登錄。

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

navigator.credentials.get()

navigator.credentials.store()

navigator.credentials.requireUserMediation()

通過(guò)使用這些API，開(kāi)發(fā)者可以完成以下強(qiáng)大的功能：

讓用戶(hù)可以通過(guò)一次點(diǎn)擊完成登錄

記錄用戶(hù)登錄時(shí)使用的聯(lián)合認(rèn)證賬號(hào)

當(dāng)session過(guò)期時(shí)，幫助用戶(hù)重新登錄

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

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

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

首頁(yè)是一個(gè)登錄表單。

點(diǎn)擊“登錄”按鈕時(shí)，用戶(hù)會(huì)被導(dǎo)向一個(gè)登錄表單。

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

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

在用戶(hù)登錄時(shí)，顯示賬號(hào)選擇框： 當(dāng)用戶(hù)點(diǎn)擊“登錄”時(shí)，彈出原生賬號(hào)選擇框。

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

調(diào)解自動(dòng)登錄： 一旦用戶(hù)退出登錄，在用戶(hù)下一次訪(fǎng)問(wèn)時(shí)，停止自動(dòng)登錄。

你們可以通過(guò)這個(gè)例子體驗(yàn)一下，它的代碼在這兒.

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

在用戶(hù)點(diǎn)擊了“登錄”按鈕，并跳到登錄表單之前，你可以通過(guò)navigator.credentials.get()方法獲得認(rèn)證信息。Chrome會(huì)彈出一個(gè)賬號(hào)選擇框，供用戶(hù)選擇。

彈出了一個(gè)賬號(hào)選擇框，用戶(hù)可選擇一個(gè)賬號(hào)進(jìn)行登錄。

獲取密碼認(rèn)證對(duì)象

如果想支持通過(guò)密碼認(rèn)證登錄，請(qǐng)使用password: true

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

使用密碼認(rèn)證登錄

當(dāng)用戶(hù)選擇了一個(gè)賬號(hào)時(shí)，resolve函數(shù)會(huì)收到一個(gè)密碼認(rèn)證對(duì)象，你可以通過(guò)fetch()方法將信息發(fā)送到服務(wù)器。

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

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

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

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

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

如果想為用戶(hù)展示聯(lián)合登錄賬號(hào)，請(qǐng)?jiān)谡{(diào)用get()方法時(shí)，通過(guò)federated選項(xiàng)定義一個(gè)包含賬號(hào)提供者id的數(shù)組。

密碼管理器保存了多個(gè)賬號(hào)

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

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

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

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

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

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

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

Chrome詢(xún)問(wèn)用戶(hù)是否希望保存認(rèn)證信息（或是作為聯(lián)合賬號(hào)）

通過(guò)表單元素創(chuàng)建和保存密碼認(rèn)證對(duì)象

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

HTML

JavaScript:

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

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

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

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

當(dāng)用戶(hù)自動(dòng)登錄時(shí)，會(huì)彈出一個(gè)通知

獲取一個(gè)認(rèn)證對(duì)象

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

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

這會(huì)使函數(shù)馬上resolve，并返回一個(gè)認(rèn)證對(duì)象，幫助用戶(hù)自動(dòng)登錄。自動(dòng)登錄有以下條件：

瀏覽器已顯式地告知用戶(hù)正在進(jìn)行自動(dòng)登錄

用戶(hù)曾經(jīng)通過(guò)認(rèn)證管理API登陸了網(wǎng)站

用戶(hù)在瀏覽你的網(wǎng)站時(shí)只保存了一個(gè)認(rèn)證對(duì)象

用戶(hù)在上一次訪(fǎng)問(wèn)時(shí)沒(méi)有主動(dòng)退出登錄

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

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

調(diào)解自動(dòng)登錄

navigator.credentials.requireUserMediation();

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

不能。密碼只能作為PasswordCredential對(duì)象中的一部分，對(duì)外是不可訪(fǎng)問(wèn)的。
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?
我們可以通過(guò)認(rèn)證管理API為一個(gè)id保存三組數(shù)字嗎？

目前還不行。我們非常感謝你對(duì)標(biāo)準(zhǔn)的反饋?

我可以在iframe中使用認(rèn)證管理API嗎？

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

我可以在我的密碼管理Chrome擴(kuò)展中集成認(rèn)證管理API嗎？

你可以重寫(xiě)navigator.credentials，并將它指向你的Chrome擴(kuò)展，由擴(kuò)展來(lái)get()或store()認(rèn)證對(duì)象。

作者