แสดง Google 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-context เพื่อเปลี่ยนข้อความที่ใช้ในชื่อพรอมต์ เช่น data-context: "signup" เปลี่ยน "ลงชื่อเข้าใช้" เป็น "ลงชื่อสมัครใช้"

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

JavaScript

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

<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' เปลี่ยน "ลงชื่อเข้าใช้" เป็น "ลงชื่อสมัครใช้"

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

สถานะพรอมต์

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

ระบบจะส่งการแจ้งเตือนสำหรับช่วงเวลาต่อไปนี้

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

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

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

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

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

ส่งตัวแฮนเดิลการเรียกคืนเป็นพารามิเตอร์ไปยัง 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 และข้อความแจ้งแบบแตะครั้งเดียวอาจแสดงร่วมกันในหน้าเดียว

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'
});