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

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

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

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

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

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

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

การสนับสนุนเบราว์เซอร์

  • 51
  • 18
  • 60
  • 13

แหล่งที่มา

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

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

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

ตัวเลือกบัญชี Google ที่แสดงหลายบัญชี

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

  1. รับข้อมูลเข้าสู่ระบบและแสดงตัวเลือกบัญชี
  2. ตรวจสอบสิทธิ์ผู้ใช้
  3. อัปเดต 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';
      });
  }
});

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

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

หากต้องการใช้การเข้าสู่ระบบแบบรวมศูนย์ ให้ทำดังนี้

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

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

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

การสนับสนุนเบราว์เซอร์

  • 51
  • 79
  • x
  • x

แหล่งที่มา

เช่น หากผู้ให้บริการคือ Google ให้ใช้ไลบรารี Google Sign-In 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 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();
}

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

ความคิดเห็น