หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

สิ่งที่ต้องดำเนินการก่อน

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

ทําตามขั้นตอนที่อธิบายไว้ในส่วนการตั้งค่าเพื่อกําหนดค่าหน้าจอขอความยินยอม OAuth และรับรหัสไคลเอ็นต์
โหลดไลบรารีของไคลเอ็นต์

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

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

HTML

แสดงปุ่มลงชื่อเข้าใช้ด้วย HTML โดยแสดงผล JWT ไปยังปลายทางการเข้าสู่ระบบของแพลตฟอร์ม

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></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 defer></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() ให้แสดง "One Tap เป็นทางเลือกที่ 2 ในการใช้ปุ่มเพื่อลงชื่อสมัครใช้หรือลงชื่อเข้าใช้

ไลบรารี GIS จะแยกวิเคราะห์เอกสาร HTML สําหรับองค์ประกอบที่มีแอตทริบิวต์รหัสเป็น g_id_onload หรือแอตทริบิวต์คลาสที่มี g_id_signin หากพบองค์ประกอบที่ตรงกัน ปุ่มจะแสดงผลด้วย HTML ไม่ว่าคุณจะแสดงผลปุ่มใน JavaScript ด้วยหรือไม่ก็ตาม เพื่อหลีกเลี่ยงการแสดงปุ่ม 2 ครั้ง พารามิเตอร์ที่ขัดแย้งอาจไม่รวมองค์ประกอบ HTML ที่ตรงกับชื่อเหล่านี้ในหน้า HTML

ภาษาของปุ่ม

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

HTML

ข้อมูลโค้ดต่อไปนี้แสดงวิธีแสดงภาษาปุ่มในภาษาฝรั่งเศสด้วยการเพิ่มพารามิเตอร์ hl ลงใน URL ของไลบรารีของไคลเอ็นต์ และด้วยการตั้งค่าแอตทริบิวต์ data-locale เป็นภาษาฝรั่งเศส

<script src="https://accounts.google.com/gsi/client?hl=fr" async defer></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 defer></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
หากมีการตั้งค่าทั้งสอง data-callback จะมีลําดับความสําคัญสูงกว่า data-login_uri เช่น วิธีนี้มีประโยชน์เมื่อใช้เครื่องจัดการเรียกกลับระหว่างการแก้ไขข้อบกพร่อง
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

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