หน้านี้ได้รับการแปลโดย Cloud Translation API

ผู้ใช้ที่ลงชื่อเข้าใช้

Eiji Kitamura

Meggin Kearney

หากต้องการลงชื่อเข้าใช้ ให้ดึงข้อมูลเข้าสู่ระบบจากรหัสผ่านของเบราว์เซอร์ แล้วใช้ฟีเจอร์เหล่านั้นเพื่อเข้าสู่ระบบผู้ใช้โดยอัตโนมัติ สำหรับผู้ใช้ที่มีหลายบัญชี ให้ผู้ใช้เลือกบัญชีได้ด้วยการแตะเพียงครั้งเดียวโดยใช้ตัวเลือกบัญชี

ลงชื่อเข้าใช้อัตโนมัติ

การลงชื่อเข้าใช้อัตโนมัติเกิดขึ้นได้ทุกที่ในเว็บไซต์ ไม่ใช่เฉพาะหน้าแรกเท่านั้น แต่ยังรวมถึงหน้าอื่นๆ ด้วย วิธีนี้มีประโยชน์เมื่อผู้ใช้เข้าถึงหน้าต่างๆ ในเว็บไซต์ ผ่านเครื่องมือค้นหา

หากต้องการเปิดใช้การลงชื่อเข้าใช้อัตโนมัติ ให้ทำดังนี้

รับข้อมูลเข้าสู่ระบบ
ตรวจสอบสิทธิ์ผู้ใช้
โปรดอัปเดต UI หรือไปยังหน้าที่ปรับเปลี่ยนในแบบของคุณ

รับข้อมูลเข้าสู่ระบบ

การรองรับเบราว์เซอร์

แหล่งที่มา

หากต้องการข้อมูลเข้าสู่ระบบ ให้เรียกใช้ 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

หากการตรวจสอบสิทธิ์สำเร็จ อัปเดต 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');
      });
  }
}

ลงชื่อเข้าใช้ผ่านตัวเลือกบัญชี

หากผู้ใช้ต้องใช้สื่อกลาง หรือมีหลายบัญชี ใช้ตัวเลือกบัญชีเพื่อให้ผู้ใช้ลงชื่อเข้าใช้ได้ ข้ามขั้นตอนการลงชื่อเข้าใช้ตามปกติ เช่น

ขั้นตอนในการลงชื่อเข้าใช้ผ่านตัวเลือกบัญชีจะเหมือนกับใน ลงชื่อเข้าใช้อัตโนมัติ ด้วยการโทรติดต่อเพิ่มเติมเพื่อแสดงตัวเลือกบัญชี เพื่อเป็นส่วนหนึ่งของการรับข้อมูลเข้าสู่ระบบ:

รับข้อมูลเข้าสู่ระบบและแสดงตัวเลือกบัญชี
ตรวจสอบสิทธิ์ผู้ใช้
อัปเดต UI หรือไปยังหน้าที่ปรับเปลี่ยนในแบบของคุณ

รับข้อมูลเข้าสู่ระบบและแสดงตัวเลือกบัญชี

แสดงตัวเลือกบัญชีผู้ใช้เพื่อตอบสนองต่อการดำเนินการที่กำหนดของผู้ใช้ เช่น เมื่อผู้ใช้แตะปุ่ม "ลงชื่อเข้าใช้" โทร 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';
      });
  }
});

การลงชื่อเข้าใช้แบบรวมศูนย์

การเข้าสู่ระบบแบบรวมศูนย์ช่วยให้ผู้ใช้ลงชื่อเข้าใช้ได้ด้วยการแตะเพียงครั้งเดียว โดยไม่ต้องจดจำรายละเอียดการเข้าสู่ระบบเพิ่มเติมสำหรับเว็บไซต์ของคุณ

วิธีใช้การเข้าสู่ระบบแบบรวมศูนย์

ตรวจสอบสิทธิ์ผู้ใช้ด้วยข้อมูลประจำตัวของบุคคลที่สาม
จัดเก็บข้อมูลข้อมูลประจำตัว
อัปเดต UI หรือไปยังหน้าที่ปรับเปลี่ยนในแบบของคุณ (เหมือนกับในการลงชื่อเข้าใช้อัตโนมัติ)

ตรวจสอบสิทธิ์ผู้ใช้ด้วยข้อมูลประจำตัวของบุคคลที่สาม

เมื่อผู้ใช้แตะปุ่มการเข้าสู่ระบบแบบรวมศูนย์ ให้เรียกใช้ขั้นตอนการตรวจสอบสิทธิ์ของผู้ให้บริการข้อมูลประจำตัวที่เจาะจงด้วย FederatedCredential

การรองรับเบราว์เซอร์

แหล่งที่มา

ตัวอย่างเช่น หากผู้ให้บริการคือ Google ให้ใช้ ไลบรารี JavaScript ของ Google Sign-In:

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 Sign-In จะส่งผลให้มีการใช้โทเค็นรหัสเพื่อเป็นหลักฐานการตรวจสอบสิทธิ์

โดยทั่วไป การลงชื่อเข้าใช้แบบรวมศูนย์สร้างขึ้นบนพื้นฐานของโปรโตคอลมาตรฐาน เช่น OpenID Connect หรือ OAuth หากต้องการดูวิธีตรวจสอบสิทธิ์ด้วยบัญชีแบบรวมศูนย์ อ้างอิงถึงผู้ให้บริการข้อมูลประจำตัวแบบรวมศูนย์ที่เกี่ยวข้อง เอกสาร ตัวอย่างยอดนิยม ได้แก่

จัดเก็บข้อมูลอัตลักษณ์

เมื่อตรวจสอบสิทธิ์แล้ว คุณจะจัดเก็บข้อมูลประจำตัวได้ ข้อมูลที่คุณจะจัดเก็บไว้ที่นี่คือ id จากผู้ให้บริการข้อมูลประจำตัว และสตริงผู้ให้บริการที่แสดงถึงผู้ให้บริการข้อมูลประจำตัว (name และ iconURL เป็นตัวเลือกที่ไม่บังคับ) ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อมูลนี้ใน ข้อกำหนดการจัดการข้อมูลเข้าสู่ระบบ

ในการจัดเก็บรายละเอียดบัญชีแบบรวมศูนย์ ให้สร้างอินสแตนซ์ FederatedCredential ด้วยตัวระบุผู้ใช้และตัวระบุของผู้ให้บริการ จากนั้นเรียกใช้ 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

อย่าลืมแสดงข้อความแสดงข้อผิดพลาดของการตรวจสอบสิทธิ์

ตัวอย่างโค้ดแบบเต็ม

ลงชื่อเข้าใช้ผ่านตัวเลือกบัญชี

รับข้อมูลเข้าสู่ระบบและแสดงตัวเลือกบัญชี

อย่าลืมกลับไปใช้แบบฟอร์มลงชื่อเข้าใช้

ตัวอย่างโค้ดแบบเต็ม

การลงชื่อเข้าใช้แบบรวมศูนย์

ตรวจสอบสิทธิ์ผู้ใช้ด้วยข้อมูลประจำตัวของบุคคลที่สาม

จัดเก็บข้อมูลอัตลักษณ์

ออกจากระบบ

ปิดการลงชื่อเข้าใช้อัตโนมัติสำหรับการเข้าชมในอนาคต

ความคิดเห็น