本頁面由 Cloud Translation API 翻譯而成。

登入的使用者

Eiji Kitamura

Meggin Kearney

如要登入使用者，請從瀏覽器的密碼擷取憑證並利用這類帳戶自動登入使用者。如果使用者有多個帳戶讓他們使用帳戶選擇工具，輕觸一下即可選取帳戶。

自動登入

網站的任何位置都可能發生自動登入功能；包括頂端網頁和其他分葉頁面當使用者進入您網站上的不同網頁時，這項功能就很實用。來賺取收益

如何啟用自動登入功能：

取得憑證資訊。
驗證使用者。
更新使用者介面或前往個人化頁面。

取得憑證資訊

瀏覽器支援

資料來源

如要取得憑證資訊，請叫用 navigator.credentials.get()。指定要要求的憑證類型為其提供 password 或 federated 即可。

一律使用 mediation: 'silent' 自動登入，方便你在遇到下列情況時輕鬆關閉程序：

未儲存任何憑證。
儲存了多個憑證。
已登出。

取得憑證之前別忘了檢查使用者是否已登入：

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials.get({
      password: true,
      federated: {
        providers: ['https://accounts.google.com'],
      },
      mediation: 'silent',
    });
    // ...
  }
}

navigator.credentials.get() 傳回的承諾會解析其中含有憑證物件或 null 如要判斷是 PasswordCredential 還是 FederatedCredential，只要查看物件的 .type 屬性即可格式為 password 或 federated

如果 .type 為 federated， .provider 屬性是代表識別資訊提供者的字串。

驗證使用者

取得憑證後根據憑證類型執行驗證流程 password 或 federated：

    }).then(c => {
     if (c) {
       switch (c.type) {
         case 'password':
           return sendRequest(c);
           break;
         case 'federated':
           return gSignIn(c);
           break;
       }
     } else {
       return Promise.resolve();
     }

問題解決後檢查您是否已收到憑證物件。如果不是，表示無法自動登入。關閉自動登入程序。

更新 UI

如果驗證成功更新使用者介面，或將使用者導向個人化頁面：

    }).then(profile => {
     if (profile) {
       updateUI(profile);
     }

別忘了顯示驗證錯誤訊息

為避免造成使用者混淆此時，使用者應該會看到「登入」的藍色浮動式訊息寫入憑證物件時：

重要提示：如果成功取得憑證物件但無法驗證使用者，此時會顯示下列錯誤訊息：

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

完整程式碼範例

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'silent',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        }
      })
      .catch((error) => {
        showError('Sign-in Failed');
      });
  }
}

透過帳戶選擇工具登入

如果使用者需要中介服務，或有多個帳戶使用帳戶選擇工具讓使用者登入略過一般登入表單，例如：

透過帳戶選擇工具登入的步驟與自動登入，另通來電以顯示帳戶選擇工具在取得憑證資訊時：

取得憑證資訊並顯示帳戶選擇工具。
驗證使用者。
更新使用者介面或繼續前往個人化頁面。

取得憑證資訊並顯示帳戶選擇工具

根據已定義的使用者動作顯示帳戶選擇工具。例如使用者輕觸「登入」按鈕。致電 navigator.credentials.get()、並新增 mediation: 'optional' 或 mediation: 'required'，顯示帳戶選擇工具。

如果 mediation 為 required，系統一律會向使用者顯示帳戶選擇工具登入。這個選項可讓擁有多個帳戶的使用者輕鬆切換不同帳戶。當 mediation 為 optional 時，系統明確顯示帳戶選擇工具，讓使用者在登入後 navigator.credentials.preventSilentAccess()敬上呼叫。這通常用於確保不會自動登入使用者選擇登出或取消註冊後。

顯示 mediation: 'optional' 的範例：

    var signin = document.querySelector('#signin');
    signin.addEventListener('click', e => {
     if (window.PasswordCredential || window.FederatedCredential) {
       navigator.credentials.get({
         password: true,
         federated: {
           providers: [
             'https://accounts.google.com'
           ]
         },
         mediation: 'optional'
       }).then(c => {

使用者選取帳戶後承諾會用憑證解析如果使用者取消帳戶選擇工具，或是未儲存憑證承諾使用 null 就會解決。在此情況下，請改回使用登入表單。

別忘了返回登入表單

基於下列任何一種原因，你應該切換回登入表單：

未儲存任何憑證。
使用者已關閉帳戶選擇工具，但未選取帳戶。
API 無法使用。

    }).then(profile => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
    }).catch(error => {
        location.href = '/signin';
    });

完整程式碼範例

var signin = document.querySelector('#signin');
signin.addEventListener('click', (e) => {
  if (window.PasswordCredential || window.FederatedCredential) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'optional',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
      })
      .catch((error) => {
        location.href = '/signin';
      });
  }
});

聯合登入

有了聯合登入，使用者只要輕觸一下即可登入不必記住網站的其他登入詳細資料。

如何實作聯合登入：

使用第三方身分驗證使用者。
儲存識別資訊。
更新使用者介面或前往個人化網頁 (與自動登入相同)。

使用第三方身分驗證使用者

當使用者輕觸聯合登入按鈕時，並透過 FederatedCredential。

瀏覽器支援

資料來源

舉例來說，如果供應器是 Google，請使用 Google 登入 JavaScript 程式庫：

navigator.credentials
  .get({
    password: true,
    mediation: 'optional',
    federated: {
      providers: ['https://account.google.com'],
    },
  })
  .then(function (cred) {
    if (cred) {
      // Instantiate an auth object
      var auth2 = gapi.auth2.getAuthInstance();

      // Is this user already signed in?
      if (auth2.isSignedIn.get()) {
        var googleUser = auth2.currentUser.get();

        // Same user as in the credential object?
        if (googleUser.getBasicProfile().getEmail() === cred.id) {
          // Continue with the signed-in user.
          return Promise.resolve(googleUser);
        }
      }

      // Otherwise, run a new authentication flow.
      return auth2.signIn({
        login_hint: id || '',
      });
    }
  });

Google 登入會產生 ID 權杖做為驗證的證明。

一般來說，聯合登入是以標準通訊協定為基礎，例如 OpenID Connect 或 OAuth。想瞭解如何使用聯合帳戶進行驗證請參閱各個聯合識別資訊提供者的文件。以下列舉幾個熱門的例子：

儲存身分資訊

完成驗證後，即可儲存身分識別資訊。您在這裡儲存的資訊是識別資訊提供者提供的 id 以及代表識別資訊提供者的提供者字串 (name 和 iconURL 為選用項目)。如要進一步瞭解這項資訊，請前往 Credential Management 規格。

如要儲存聯合帳戶詳細資料，請將新的 FederatedCredential敬上與使用者 ID 和提供者 ID 建立關聯。然後叫用 navigator.credentials.store()敬上儲存識別資訊。

成功建立聯盟後以同步或非同步方式將 FederatedCredential 執行個體化：

同步方法的範例：

// Create credential object synchronously.
var cred = new FederatedCredential({
  id: id, // id in IdP
  provider: 'https://account.google.com', // A string representing IdP
  name: name, // name in IdP
  iconURL: iconUrl, // Profile image url
});

非同步方法的範例：

// Create credential object asynchronously.
var cred = await navigator.credentials.create({
  federated: {
    id: id,
    provider: 'https://accounts.google.com',
    name: name,
    iconURL: iconUrl,
  },
});

然後儲存憑證物件：

// Store it
navigator.credentials.store(cred).then(function () {
  // continuation
});

登出

輕觸登出按鈕後，將使用者登出。首先終止工作階段然後關閉自動登入功能，日後造訪時即可。 (活動終止方式完全由您決定)。

關閉日後造訪時自動登入的功能

致電 navigator.credentials.preventSilentAccess()：

signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  navigator.credentials.preventSilentAccess();
}

這樣可確保使用者下次啟用自動登入功能時，不會自動登入。如要繼續自動登入，使用者可以選擇刻意登入從帳戶選擇工具中選擇要登入的帳戶。如此一來，除非使用者明確登出，否則系統一律會重新登入。

登入的使用者

自動登入

取得憑證資訊

驗證使用者

更新 UI

別忘了顯示驗證錯誤訊息

完整程式碼範例

透過帳戶選擇工具登入

取得憑證資訊並顯示帳戶選擇工具

別忘了返回登入表單

完整程式碼範例

聯合登入

使用第三方身分驗證使用者

儲存身分資訊

登出

關閉日後造訪時自動登入的功能

意見回饋