หากต้องการลงชื่อเข้าใช้ ให้ดึงข้อมูลเข้าสู่ระบบจากรหัสผ่านของเบราว์เซอร์ แล้วใช้ฟีเจอร์เหล่านั้นเพื่อเข้าสู่ระบบผู้ใช้โดยอัตโนมัติ สำหรับผู้ใช้ที่มีหลายบัญชี ให้ผู้ใช้เลือกบัญชีได้ด้วยการแตะเพียงครั้งเดียวโดยใช้ตัวเลือกบัญชี
ลงชื่อเข้าใช้อัตโนมัติ
การลงชื่อเข้าใช้อัตโนมัติเกิดขึ้นได้ทุกที่ในเว็บไซต์ ไม่ใช่เฉพาะหน้าแรกเท่านั้น แต่หน้าใบไม้อื่นๆ ด้วย วิธีนี้มีประโยชน์เมื่อผู้ใช้เข้าถึงหน้าต่างๆ ในเว็บไซต์ ผ่านเครื่องมือค้นหา
หากต้องการเปิดใช้การลงชื่อเข้าใช้อัตโนมัติ ให้ทำดังนี้
- รับข้อมูลเข้าสู่ระบบ
- ตรวจสอบสิทธิ์ผู้ใช้
- โปรดอัปเดต 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);
}
อย่าลืมแสดงข้อความแสดงข้อผิดพลาดของการตรวจสอบสิทธิ์
เพื่อไม่ให้ผู้ใช้เกิดความสับสน ผู้ใช้จะเห็นข้อความโทสต์สีน้ำเงินระบุว่า "กำลังลงชื่อเข้าใช้" เมื่อได้รับออบเจ็กต์ข้อมูลเข้าสู่ระบบ ให้ทำดังนี้
![ข้อความโทสต์สีฟ้าแสดงให้เห็นว่าผู้ใช้กำลังลงชื่อเข้าใช้](https://web.developers.google.cn/static/articles/security-credential-management-retrieve-credentials/image/blue-toast-showing-user-i-434a344bb78b3.png?authuser=6&hl=th)
เคล็ดลับสำคัญอย่างหนึ่งคือ หากคุณได้รับออบเจ็กต์ข้อมูลเข้าสู่ระบบสำเร็จแล้ว แต่ไม่สามารถตรวจสอบสิทธิ์ผู้ใช้ คุณควรแสดงข้อความแสดงข้อผิดพลาดดังนี้
}).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 ที่แสดงหลายบัญชี](https://web.developers.google.cn/static/articles/security-credential-management-retrieve-credentials/image/google-account-chooser-sh-76222c6b4a3fb.png?authuser=6&hl=th)
ขั้นตอนในการลงชื่อเข้าใช้ผ่านตัวเลือกบัญชีจะเหมือนกับใน ลงชื่อเข้าใช้อัตโนมัติ ด้วยการโทรติดต่อเพิ่มเติมเพื่อแสดงตัวเลือกบัญชี เพื่อเป็นส่วนหนึ่งของการรับข้อมูลเข้าสู่ระบบ:
- รับข้อมูลเข้าสู่ระบบและแสดงตัวเลือกบัญชี
- ตรวจสอบสิทธิ์ผู้ใช้
- อัปเดต 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();
}
การดำเนินการนี้จะไม่ทำให้การลงชื่อเข้าใช้อัตโนมัติเกิดขึ้นจนกว่าผู้ใช้จะเปิดใช้การลงชื่อเข้าใช้โดยอัตโนมัติในครั้งถัดไป หากต้องการลงชื่อเข้าใช้อัตโนมัติอีกครั้ง ผู้ใช้สามารถเลือกที่จะลงชื่อเข้าใช้โดยตั้งใจ โดยเลือกบัญชีที่ต้องการลงชื่อเข้าใช้จากตัวเลือกบัญชี ซึ่งจะทำให้ผู้ใช้ลงชื่อเข้าใช้อีกครั้งจนกว่าจะออกจากระบบอย่างชัดเจน