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

เพิ่มปุ่มลงชื่อเข้าใช้ด้วย 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 ไปยัง Callback Handler 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() เพื่อแสดง One Tap เป็นตัวเลือกที่ 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 ไปยัง Callback Handler ของคุณ หรือ
  • 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 การเปลี่ยนเส้นทาง