Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

Eiji Kitamura

Meggin Kearney

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

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

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

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

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

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

Browser Support

Source

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

Browser Support

Source

เช่น หากผู้ให้บริการคือ 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 เป็นตัวเลือกที่ไม่บังคับ) ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อมูลนี้ใน ข้อกำหนดเฉพาะของ Credential Management

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

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

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

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

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

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

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

การเข้าสู่ระบบแบบรวมศูนย์

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

จัดเก็บข้อมูลประจำตัว

ออกจากระบบ

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

ความคิดเห็น