แสดง Google One Tap

เพิ่มพรอมต์ One Tap ลงในเว็บไซต์เพื่อให้ผู้ใช้ลงชื่อสมัครใช้หรือลงชื่อเข้าใช้เว็บแอป ใช้ HTML และ JavaScript เพื่อแสดงผลและปรับแต่งพรอมต์

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

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

เพิ่มปุ่มลงชื่อเข้าใช้ด้วย Google ไปยังหน้าเข้าสู่ระบบ

การแสดงผลพรอมต์

วางข้อมูลโค้ดลงในหน้าเว็บที่คุณต้องการให้แสดง One Tap

HTML

แสดงข้อความแจ้งการแตะครั้งเดียว โดยส่งคืนข้อมูลเข้าสู่ระบบ JWT ไปยังปลายทางการเข้าสู่ระบบ

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-your_own_param_1_to_login="any_value"
   data-your_own_param_2_to_login="any_value">
</div>

แอตทริบิวต์ data-login_uri คือ URI ของปลายทางการเข้าสู่ระบบของเว็บแอป คุณสามารถเพิ่มแอตทริบิวต์ข้อมูลที่กำหนดเอง ซึ่งจะส่งไปยังปลายทางการเข้าสู่ระบบพร้อมกับโทเค็นรหัสที่ Google ออกให้

คุณอาจใช้แอตทริบิวต์ data-skip_prompt_cookie และคุกกี้เพื่อควบคุมว่าจะแสดงข้อความแจ้งให้ใช้ One Tap ในหน้า HTML แบบคงที่ซึ่งคุณไม่สามารถเปลี่ยนเนื้อหาได้หรือไม่ หากตั้งค่าคุกกี้ที่ระบุไว้ ระบบจะไม่แสดงข้อความแจ้ง

ใช้แอตทริบิวต์ data-context ที่ไม่บังคับเพื่อเปลี่ยนข้อความที่ใช้ใน ชื่อพรอมต์ เช่น data-context: "signup" เปลี่ยน "ลงชื่อเข้าใช้" เป็น "ลงชื่อสมัครใช้"

โดยค่าเริ่มต้น ข้อความแจ้งแบบแตะครั้งเดียวจะปิดโดยอัตโนมัติหากผู้ใช้คลิก ภายนอกข้อความแจ้ง คุณปิดใช้ลักษณะการทำงานนี้ได้หากตั้งค่าแอตทริบิวต์ data-cancel_on_tap_outside เป็น "เท็จ"

ดูรายการแอตทริบิวต์ที่รองรับทั้งหมดได้ในข้อมูลอ้างอิงของ g_id_onload

JavaScript

แสดงข้อความแจ้งการแตะครั้งเดียว โดยส่งคืนข้อมูลเข้าสู่ระบบ JWT ไปยังเครื่องจัดการ JavaScript Callback ของเบราว์เซอร์

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: 'YOUR_CALLBACK_HANDLER'
    });
    google.accounts.id.prompt();
  }
</script>

หากต้องการกำหนดค่าข้อความแจ้งแบบแตะครั้งเดียวใน JavaScript คุณต้องเรียกใช้เมธอด initialize() ก่อน จากนั้นเรียกใช้เมธอด prompt() เพื่อแสดง UI ของพรอมต์

ใช้ช่อง context (ไม่บังคับ) เพื่อเปลี่ยนข้อความที่ใช้ในชื่อพรอมต์ เช่น context: 'signup' เปลี่ยน "ลงชื่อเข้าใช้" เป็น "ลงชื่อสมัครใช้"

โดยค่าเริ่มต้น ข้อความแจ้งแบบแตะครั้งเดียวจะปิดโดยอัตโนมัติหากผู้ใช้คลิก ภายนอกข้อความแจ้ง คุณปิดใช้ลักษณะการทำงานนี้ได้หากตั้งค่าพร็อพเพอร์ตี้ cancel_on_tap_outside เป็น "เท็จ"

ดูรายการตัวเลือกข้อมูลทั้งหมดได้ในidConfigurationอ้างอิง

สถานะพรอมต์

ใช้ฟังก์ชัน Callback ของ JavaScript เพื่อฟังการแจ้งเตือนสถานะ UI ของพรอมต์

ระบบจะส่งการแจ้งเตือนในกรณีต่อไปนี้

  • ช่วงเวลาที่แสดง: เกิดขึ้นหลังจากเรียกใช้เมธอด prompt() การแจ้งเตือนมีค่าบูลีนเพื่อระบุว่า UI แสดงอยู่หรือไม่

  • ช่วงที่ข้าม: กรณีนี้เกิดขึ้นเมื่อมีการปิดข้อความแจ้งแบบ One Tap โดยการยกเลิกอัตโนมัติ การยกเลิกด้วยตนเอง หรือเมื่อ Google ไม่สามารถออกข้อมูลเข้าสู่ระบบ เช่น เมื่อมีการออกจากระบบ Google ในเซสชันที่เลือก

    ในกรณีนี้ เราขอแนะนำให้คุณดำเนินการต่อกับผู้ให้บริการข้อมูลประจำตัวรายถัดไป หากมี

  • ช่วงเวลาที่ปิด: เหตุการณ์นี้เกิดขึ้นเมื่อ Google ดึงข้อมูล ข้อมูลเข้าสู่ระบบได้สำเร็จ หรือผู้ใช้ต้องการหยุดขั้นตอนการดึงข้อมูลเข้าสู่ระบบ ตัวอย่างเช่น เมื่อผู้ใช้เริ่มป้อนชื่อผู้ใช้และรหัสผ่านลงใน กล่องโต้ตอบการเข้าสู่ระบบ คุณสามารถเรียกใช้เมธอด google.accounts.id.cancel() เพื่อ ปิด One Tap และทริกเกอร์ช่วงเวลาที่ถูกปิดได้

HTML

ใช้แอตทริบิวต์ data-moment_callback เพื่อระบุฟังก์ชันเรียกกลับของ JavaScript ต้องมีตัวแฮนเดิลการเรียกกลับเพื่อรับการแจ้งเตือน

<html>
  <head>
    <script>
      function continueWithNextIdp(notification) {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
          // try Next provider if One Tap is not displayed or skipped
        }
      }
    </script>
  </head>
  <body>
    ...
    <div id="g_id_onload"
      data-client_id="YOUR_GOOGLE_CLIENT_ID"
      data-login_uri="https://your.domain/your_login_endpoint"
      data-moment_callback="continueWithNextIdp"
    </div>
    ...
  </body>
</html>

หากต้องการช่วยให้ผู้ใช้ลงชื่อเข้าใช้หรือลงชื่อสมัครใช้ได้ คุณสามารถสื่อสารกับ ผู้ให้บริการข้อมูลประจำตัวหลายรายเพื่อค้นหาข้อมูลเข้าสู่ระบบที่ใช้ได้ คุณอาจต้องการทราบสถานะ UI ของพรอมต์เพื่อให้เรียกผู้ให้บริการข้อมูลประจำตัวรายถัดไปได้

JavaScript

ส่งตัวแฮนเดิล Callback เป็นพารามิเตอร์ไปยัง google.accounts.id.prompt, โดยใช้ฟังก์ชันลูกศรเพื่อจัดการการอัปเดตการแจ้งเตือน

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  google.accounts.id.prompt((notification) => {
    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
      // try next provider if OneTap is not displayed or skipped
    }
  });
}
</script>

ปุ่มและพรอมต์

ปุ่มลงชื่อเข้าใช้ด้วย Google และข้อความแจ้ง One Tap อาจแสดงร่วมกัน ในหน้าเดียว

HTML

แสดงทั้งปุ่มลงชื่อเข้าใช้ด้วย Google และข้อความแจ้ง One Tap โดยใส่ทั้งองค์ประกอบ g_id_onload และ g_id_signin

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-context="signin"
   data-ux_mode="redirect"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-itp_support="true">
</div>

<div class="g_id_signin"
   data-type="standard"
   data-shape="rectangular"
   data-theme="outline"
   data-text="signin_with"
   data-size="large"
   data-logo_alignment="left">
</div>

JavaScript

แสดงปุ่มลงชื่อเข้าใช้ด้วย Google และข้อความแจ้ง One Tap โดยเรียกใช้ทั้งฟังก์ชัน renderButton() และ prompt() พร้อมกัน

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  const parent = document.getElementById('google_btn');
  google.accounts.id.renderButton(parent, {theme: "filled_blue"});
  google.accounts.id.prompt();
}
</script>

อย่าบัง One Tap

ส่วนนี้จะมีผลเฉพาะเมื่อปิดใช้ FedCM เท่านั้น เมื่อเปิดใช้ FedCM แล้ว เบราว์เซอร์จะแสดงข้อความแจ้งผู้ใช้ที่ด้านบนของเนื้อหาในหน้า

Google One Tap ต้องไม่ถูกเนื้อหาอื่นบดบังเพื่อให้ผู้ใช้ปลายทางเห็นข้อมูลทั้งหมดที่แสดง มิเช่นนั้น ระบบอาจทริกเกอร์หน้าต่างป๊อปอัปในบางกรณี

ตรวจสอบเลย์เอาต์หน้าเว็บและพร็อพเพอร์ตี้ z-index ขององค์ประกอบอีกครั้งเพื่อให้แน่ใจว่า Google One Tap จะไม่ถูกเนื้อหาอื่นบดบังในทุกกรณี การเปลี่ยนแปลงโฟลว์ UX อาจเกิดขึ้นแม้ว่าจะครอบคลุมพิกเซลเดียวที่ขอบก็ตาม

การตอบกลับเกี่ยวกับข้อมูลเข้าสู่ระบบ

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

การเรียกกลับของ JS

ใช้ HTML หรือ JavaScript เพื่อกำหนดค่าการเรียกกลับ

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-callback="YOUR_CALLBACK_HANDLER"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  callback: 'YOUR_CALLBACK_HANDLER'
});

ตัวอย่างเช่น handleCredentialResponse จะถอดรหัส JWT และพิมพ์ฟิลด์โทเค็น บางส่วนของรหัสไปยังคอนโซล

<script>
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: handleCredentialResponse
  });

  function handleCredentialResponse(response) {
    const responsePayload = decodeJwtResponse(response.credential);

    console.log("ID: " + responsePayload.sub);
    console.log('Full Name: ' + responsePayload.name);
    console.log('Given Name: ' + responsePayload.given_name);
    console.log('Family Name: ' + responsePayload.family_name);
    console.log("Image URL: " + responsePayload.picture);
    console.log("Email: " + responsePayload.email);
  }

  function decodeJwtResponse(token) {
    let base64Url = token.split('.')[1];
    let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
  }
</script>

เปลี่ยนเส้นทาง

หากต้องการส่งคืนข้อมูลเข้าสู่ระบบไปยังปลายทางการเข้าสู่ระบบของแพลตฟอร์ม ให้เพิ่ม URL ไปยังการตั้งค่าURI การเปลี่ยนเส้นทางที่ได้รับอนุญาตของเว็บไคลเอ็นต์ OAuth 2.0

ใช้ HTML หรือ JavaScript เพื่อกำหนดค่า URI เปลี่ยนเส้นทาง

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-ux_mode="redirect"
  data-login-uri="YOUR_LOGIN_URI"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  ux_mode: 'redirect',
  login_uri: 'YOUR_LOGIN_URI'
});