หากต้องการลงชื่อเข้าใช้ให้ผู้ใช้ ให้ดึงข้อมูลเข้าสู่ระบบจากเครื่องมือจัดการรหัสผ่านของเบราว์เซอร์ แล้วใช้ข้อมูลนั้นเพื่อเข้าสู่ระบบผู้ใช้โดยอัตโนมัติ สำหรับผู้ใช้ที่มีหลายบัญชี ให้ผู้ใช้เลือกบัญชีด้วยการแตะเพียงครั้งเดียวโดยใช้ตัวเลือกบัญชี
ลงชื่อเข้าใช้อัตโนมัติ
การลงชื่อเข้าใช้อัตโนมัติอาจเกิดขึ้นได้ทุกที่ในเว็บไซต์ ไม่ใช่แค่หน้าแรกเท่านั้น แต่ยังเป็นหน้าใบไม้อื่นๆ อีกด้วย วิธีนี้มีประโยชน์เมื่อผู้ใช้เข้าถึงหน้าต่างๆ ในเว็บไซต์ ผ่านเครื่องมือค้นหา
หากต้องการเปิดใช้งานการลงชื่อเข้าใช้อัตโนมัติ:
- รับข้อมูลเข้าสู่ระบบ
- ตรวจสอบสิทธิ์ผู้ใช้
- อัปเดต 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 ให้ใช้ไลบรารี 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();
}
วิธีนี้จะช่วยป้องกันไม่ให้การลงชื่อเข้าใช้อัตโนมัติเกิดขึ้นจนกว่าจะถึงครั้งถัดไปที่ผู้ใช้เปิดใช้การลงชื่อเข้าใช้อัตโนมัติ หากต้องการลงชื่อเข้าใช้อัตโนมัติต่อ ผู้ใช้สามารถเลือกที่จะลงชื่อเข้าใช้โดยตั้งใจ โดยเลือกบัญชีที่ต้องการลงชื่อเข้าใช้จากตัวเลือกบัญชี จากนั้นผู้ใช้จะลงชื่อเข้าใช้ใหม่ทุกครั้งจนกว่าจะออกจากระบบอย่างชัดแจ้ง