เพิ่มปุ่ม "ลงชื่อเข้าใช้ด้วย Google" ลงในเว็บไซต์เพื่อให้ผู้ใช้ลงชื่อสมัครใช้หรือลงชื่อเข้าใช้เว็บแอปได้ ใช้ HTML หรือ JavaScript เพื่อแสดงปุ่มและแอตทริบิวต์เพื่อปรับแต่งรูปร่าง ขนาด ข้อความ และธีมของปุ่ม
หลังจากที่ผู้ใช้เลือกบัญชี Google และให้ความยินยอมแล้ว Google จะแชร์โปรไฟล์ผู้ใช้โดยใช้ JSON Web Token (JWT) สำหรับภาพรวมของขั้นตอนที่เกี่ยวข้องระหว่างการลงชื่อเข้าใช้และประสบการณ์ของผู้ใช้ โปรดดูวิธีการทำงาน ทําความเข้าใจปุ่มที่ปรับเปลี่ยนในแบบของคุณจะตรวจสอบเงื่อนไขและสถานะต่างๆ ที่ส่งผลต่อวิธีแสดงปุ่มให้ผู้ใช้เห็น
ข้อกำหนดเบื้องต้น
ป้อนข้อมูลต่อไปนี้ก่อนที่จะเพิ่มปุ่มลงในหน้าเข้าสู่ระบบของคุณ:
- ทำตามขั้นตอนที่อธิบายไว้ในการตั้งค่าเพื่อกำหนดค่าหน้าจอคำยินยอม OAuth และเพื่อรับรหัสไคลเอ็นต์
- โหลดไลบรารีของไคลเอ็นต์
การแสดงปุ่ม
หากต้องการแสดงปุ่ม "ลงชื่อเข้าใช้ด้วย Google" คุณสามารถเลือก HTML หรือ JavaScript เพื่อแสดงปุ่มในหน้าเข้าสู่ระบบ ดังนี้
HTML
แสดงผลปุ่มลงชื่อเข้าใช้โดยใช้ HTML ซึ่งแสดงผล JWT ไปยังปลายทางการเข้าสู่ระบบของแพลตฟอร์ม
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async></script>
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
<body>
</html>
องค์ประกอบที่มีคลาส g_id_signin
จะแสดงผลเป็นปุ่ม "ลงชื่อเข้าใช้ด้วย Google"
ปุ่มจะถูกกำหนดค่าโดยพารามิเตอร์ที่ระบุไว้ในแอตทริบิวต์ข้อมูล
หากต้องการแสดงปุ่มลงชื่อเข้าใช้ด้วย Google และ Google One Tap ในหน้าเดียวกัน ให้นำ data-auto_prompt="false"
ออก เราขอแนะนำให้ใช้วิธีนี้เพื่อลดการติดขัด
และปรับปรุงอัตราการลงชื่อเข้าใช้
ดูรายการแอตทริบิวต์ข้อมูลทั้งหมดได้ที่หน้าข้อมูลอ้างอิง g_id_signin
JavaScript
แสดงผลปุ่มลงชื่อเข้าใช้โดยใช้ JavaScript โดยแสดง JWT กลับไปยังเครื่องจัดการเรียกกลับ JavaScript ของเบราว์เซอร์
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID"
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" } // customization attributes
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</body>
</html>
องค์ประกอบที่ระบุเป็นพารามิเตอร์แรกไปยัง renderButton
จะแสดงเป็นปุ่ม "ลงชื่อเข้าใช้ด้วย Google" ในตัวอย่างนี้ buttonDiv
ใช้เพื่อแสดงผลปุ่มในหน้าเว็บ ปุ่มปรับแต่งโดยใช้แอตทริบิวต์ที่ระบุในพารามิเตอร์ที่ 2 เป็น renderButton
มีการเรียกให้ google.accounts.id.prompt()
แสดง "การแตะครั้งเดียว" เป็นทางเลือกที่ 2 แทนการใช้ปุ่มเพื่อลงชื่อสมัครใช้หรือลงชื่อเข้าใช้เพื่อลดความติดขัดของผู้ใช้
ไลบรารี GIS จะแยกวิเคราะห์เอกสาร HTML สำหรับองค์ประกอบที่ตั้งค่าแอตทริบิวต์ ID เป็น g_id_onload
หรือแอตทริบิวต์คลาสที่มี g_id_signin
หากพบองค์ประกอบที่ตรงกัน ปุ่มจะแสดงผลโดยใช้ HTML ไม่ว่าคุณจะแสดงปุ่มนั้นใน JavaScript ด้วยหรือไม่ก็ตาม เพื่อหลีกเลี่ยงการแสดงปุ่ม 2 ครั้ง อาจมีพารามิเตอร์ที่ขัดแย้งกันที่ไม่รวมองค์ประกอบ HTML ที่ตรงกับชื่อเหล่านี้ในหน้า HTML
ภาษาของปุ่ม
ภาษาของปุ่มจะกำหนดโดยภาษาเริ่มต้นของเบราว์เซอร์หรือค่ากำหนดของผู้ใช้เซสชัน Google โดยอัตโนมัติ คุณยังเลือกภาษาด้วยตนเองได้โดยเพิ่มพารามิเตอร์ hl
และรหัสภาษาลงในคำสั่ง src เมื่อโหลดไลบรารี และเพิ่มพารามิเตอร์ data-locale หรือ locale data-locale ที่ไม่บังคับใน HTML หรือ locale ใน JavaScript ก็ได้
HTML
ข้อมูลโค้ดต่อไปนี้แสดงวิธีแสดงภาษาของปุ่มเป็นภาษาฝรั่งเศสโดยเพิ่มพารามิเตอร์ hl
ลงใน URL ของไลบรารีของไคลเอ็นต์และตั้งค่าแอตทริบิวต์ data-locale
เป็นภาษาฝรั่งเศส
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>
JavaScript
ข้อมูลโค้ดต่อไปนี้แสดงวิธีแสดงภาษาของปุ่มเป็นภาษาฝรั่งเศสโดยเพิ่มพารามิเตอร์ hl
ลงใน URL ไลบรารีของไคลเอ็นต์และเรียกใช้เมธอด google.accounts.id.renderButton
โดยตั้งค่าพารามิเตอร์ locale
เป็นภาษาฝรั่งเศส
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ locale: "fr" }
);
</script>
การจัดการข้อมูลเข้าสู่ระบบ
หลังจากผู้ใช้ให้ความยินยอมแล้ว Google จะส่งข้อมูลเข้าสู่ระบบ JSON Web Token (JWT) หรือที่เรียกว่าโทเค็นรหัสไปยังเบราว์เซอร์ของผู้ใช้หรือไปยังปลายทางการเข้าสู่ระบบที่แพลตฟอร์มของคุณโฮสต์โดยตรง
ตำแหน่งที่คุณเลือกรับ JWT จะขึ้นอยู่กับว่าคุณแสดงปุ่มโดยใช้ HTML หรือ JavaScript และมีการใช้โหมด UX แบบป๊อปอัปหรือเปลี่ยนเส้นทางหรือไม่
โหมดป๊อปอัป
การใช้โหมด UX ของ popup
จะดำเนินการขั้นตอน UX ลงชื่อเข้าใช้ในหน้าต่างป๊อปอัป ซึ่งโดยทั่วไปจะไม่รบกวนการใช้งานของผู้ใช้และเป็นโหมด UX เริ่มต้น
เมื่อแสดงผลปุ่มโดยใช้:
HTML
คุณสามารถตั้งค่าอย่างใดอย่างหนึ่งต่อไปนี้
data-callback
เพื่อส่ง JWT กลับไปยังเครื่องจัดการโค้ดเรียกกลับ หรือdata-login_uri
เพื่อให้ Google ส่ง JWT ไปยังปลายทางการเข้าสู่ระบบของคุณโดยตรงโดยใช้คำขอ POST
หากมีการตั้งค่าทั้ง 2 ค่า data-callback
จะมีความสำคัญมากกว่า data-login_uri
การตั้งค่าทั้ง 2 ค่าอาจเป็นประโยชน์เมื่อใช้ตัวควบคุมโค้ดเรียกกลับสำหรับการแก้ไขข้อบกพร่อง
JavaScript
คุณต้องระบุ callback
โหมดป๊อปอัปไม่รองรับการเปลี่ยนเส้นทางเมื่อส่งปุ่มใน JavaScript หากตั้งค่าไว้ ระบบจะไม่สนใจ login_uri
ดูจัดการการตอบกลับข้อมูลเข้าสู่ระบบที่ส่งคืนเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการถอดรหัส JWT ภายในเครื่องจัดการเรียกกลับ JS
โหมดเปลี่ยนเส้นทาง
การใช้โหมด UX ของ redirect
จะดำเนินการขั้นตอนการลงชื่อเข้าใช้ UX โดยใช้การเปลี่ยนเส้นทางแบบเต็มหน้าของเบราว์เซอร์ของผู้ใช้ และ Google จะส่ง JWT กลับไปยังปลายทางการเข้าสู่ระบบของคุณโดยตรงโดยใช้คำขอ POST
ซึ่งโดยทั่วไปจะเป็นประสบการณ์ที่รบกวนผู้ใช้มากกว่า แต่ถือว่าเป็นวิธีลงชื่อเข้าใช้ที่ปลอดภัยที่สุด
เมื่อแสดงผลปุ่มโดยใช้:
- HTML จะตั้งค่า
data-login_uri
เป็น URI ของปลายทางการเข้าสู่ระบบ (ไม่บังคับ) - JavaScript เลือกที่จะตั้งค่า
login_uri
เป็น URI ของปลายทางการเข้าสู่ระบบ
หากไม่ระบุค่า Google จะส่ง JWT กลับไปยัง URI ของหน้าปัจจุบัน
URI ปลายทางการเข้าสู่ระบบของคุณ
ใช้ HTTPS และ URI แบบสัมบูรณ์เมื่อตั้งค่า data-login_uri
หรือ login_uri
เช่น https://example.com/path
อนุญาต HTTP เฉพาะเมื่อใช้ localhost ระหว่างการพัฒนา: http://localhost/path
.
ดูคำอธิบายฉบับเต็มเกี่ยวกับข้อกำหนดและกฎการตรวจสอบของ Google ได้ที่ใช้ต้นทาง JavaScript ที่ปลอดภัยและเปลี่ยนเส้นทาง URI