แสดงปุ่มลงชื่อเข้าใช้ด้วย Google

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

ปุ่มลงชื่อเข้าใช้ที่ปรับเปลี่ยนในแบบของคุณ

หลังจากผู้ใช้เลือกบัญชี Google และให้ความยินยอมแล้ว Google จะแชร์โปรไฟล์ผู้ใช้โดยใช้โทเค็นเว็บ JSON (JWT) ดูภาพรวมของขั้นตอนที่เกี่ยวข้องระหว่างการลงชื่อเข้าใช้และประสบการณ์ของผู้ใช้ได้ที่วิธีการทํางาน ทําความเข้าใจปุ่มที่ปรับตามโปรไฟล์ของผู้ใช้จะตรวจสอบเงื่อนไขและสถานะต่างๆ ที่ส่งผลต่อลักษณะที่ปุ่มแสดงต่อผู้ใช้

ข้อกำหนดเบื้องต้น

ทําตามขั้นตอนต่อไปนี้ให้เสร็จสิ้นก่อนเพิ่มปุ่มลงในหน้าการเข้าสู่ระบบ

การแสดงผลปุ่ม

หากต้องการแสดงปุ่มลงชื่อเข้าใช้ด้วย Google คุณสามารถเลือก HTML หรือ JavaScript เพื่อแสดงผลปุ่มในหน้าเข้าสู่ระบบได้ ดังนี้

HTMLJavaScript

แสดงปุ่มลงชื่อเข้าใช้โดยใช้ 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 โดยส่งคืน 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 สำหรับองค์ประกอบที่แอตทริบิวต์รหัสตั้งค่าเป็น g_id_onload หรือแอตทริบิวต์คลาสที่มี g_id_signin หากการจับคู่ที่ตรงกัน พบ ปุ่มจะแสดงผลโดยใช้ HTML ไม่ว่าคุณจะ แสดงผลปุ่มใน JavaScript ด้วย เพื่อหลีกเลี่ยงการแสดงปุ่ม 2 ครั้ง เช่น เมื่อมีพารามิเตอร์ที่ขัดแย้งกัน จะไม่มีองค์ประกอบ HTML ที่ตรงกับชื่อเหล่านี้ในหน้า HTML

ภาษาของปุ่ม

ภาษาของปุ่มจะกำหนดโดยอัตโนมัติตามภาษาเริ่มต้นของเบราว์เซอร์หรือค่ากำหนดของผู้ใช้เซสชัน Google คุณยังสามารถเลือก ภาษาด้วยตนเองได้โดยเพิ่มพารามิเตอร์ hl และรหัสภาษาลงใน src เมื่อโหลดไลบรารี และโดยการเพิ่มภาษาของข้อมูลที่ไม่บังคับหรือ พารามิเตอร์ภาษา data-locale ใน HTML หรือ locale ใน JavaScript

HTMLJavaScript

ข้อมูลโค้ดต่อไปนี้แสดงวิธีแสดงภาษาของปุ่มเป็นภาษาฝรั่งเศสโดยเพิ่มพารามิเตอร์ 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>

ข้อมูลโค้ดต่อไปนี้แสดงวิธีแสดงภาษาของปุ่มเป็นภาษาฝรั่งเศสโดยเพิ่มพารามิเตอร์ 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 (JWT) หรือที่เรียกว่าโทเค็นระบุตัวตนไปยังเบราว์เซอร์ของผู้ใช้ หรือไปยังปลายทางการเข้าสู่ระบบที่โฮสต์โดยแพลตฟอร์มของคุณโดยตรง

ตำแหน่งที่คุณเลือกรับ JWT จะขึ้นอยู่กับว่าคุณแสดงผลปุ่มโดยใช้ HTML หรือ JavaScript และใช้โหมด UX แบบป๊อปอัปหรือการเปลี่ยนเส้นทางหรือไม่

การใช้โหมด UX ของ popup จะดำเนินการขั้นตอนการลงชื่อเข้าใช้ UX ในหน้าต่างป๊อปอัป นี่คือ มักเป็นประสบการณ์ที่รบกวนผู้ใช้น้อยกว่าและเป็นโหมด UX เริ่มต้น

เมื่อแสดงผลปุ่มโดยใช้

HTMLJavaScript

โดยเลือกดำเนินการอย่างใดอย่างหนึ่งต่อไปนี้

  • data-callback เพื่อส่งคืน JWT ไปยังเครื่องจัดการ Callback หรือ
  • data-login_uri เพื่อให้ Google ส่ง JWT ไปยังปลายทางการเข้าสู่ระบบโดยตรงโดยใช้คําขอ POST

หากตั้งค่าทั้ง 2 ค่าไว้ data-callback จะมีความสำคัญเหนือกว่า data-login_uri การตั้งค่าทั้ง 2 ค่าอาจเป็นประโยชน์เมื่อใช้ Callback ตัวแฮนเดิลสำหรับการแก้ไขข้อบกพร่อง

คุณต้องระบุ 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

โปรดดูใช้ต้นทาง JavaScript ที่ปลอดภัยและ URI การเปลี่ยนเส้นทาง เพื่อดูคำอธิบายโดยละเอียดเกี่ยวกับข้อกำหนดและกฎการตรวจสอบของ Google