Google is committed to advancing racial equity for Black communities. See how.
หน้านี้ได้รับการแปลโดย Cloud Translation API
Switch to English

ตรวจสอบสิทธิ์โดยใช้ Google Sign-In ด้วย JavaScript

คุณสามารถให้ผู้ใช้ตรวจสอบสิทธิ์กับ Firebase โดยใช้บัญชี Google ของพวกเขาได้โดยการรวม Google Sign-In เข้ากับแอปของคุณ คุณสามารถผสานรวม Google Sign-In ได้โดยใช้ Firebase SDK เพื่อดำเนินขั้นตอนการลงชื่อเข้าใช้หรือดำเนินขั้นตอนการลงชื่อเข้าใช้ Google ด้วยตนเองและส่งโทเค็นรหัสผลลัพธ์ไปยัง Firebase

ก่อนที่คุณจะเริ่ม

  1. เพิ่ม Firebase ในโครงการ JavaScript ของคุณ
  2. เปิดใช้งาน Google Sign-In ในคอนโซล Firebase:
    1. ใน คอนโซล Firebase ให้เปิดส่วนการ ตรวจสอบสิทธิ์
    2. บนแท็บ วิธีการลงชื่อเข้า ใช้ให้เปิดใช้งานวิธีการลงชื่อเข้าใช้ ของ Google แล้วคลิก บันทึก

จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase SDK

หากคุณกำลังสร้างเว็บแอปวิธีที่ง่ายที่สุดในการตรวจสอบสิทธิ์ผู้ใช้กับ Firebase โดยใช้บัญชี Google คือจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK (หากคุณต้องการพิสูจน์ตัวตนผู้ใช้ใน Node.js หรือสภาพแวดล้อมอื่น ๆ ที่ไม่ใช่เบราว์เซอร์คุณต้องจัดการขั้นตอนการลงชื่อเข้าใช้ด้วยตนเอง)

ในการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK ให้ทำตามขั้นตอนเหล่านี้:

  1. สร้างอินสแตนซ์ของวัตถุผู้ให้บริการ Google:
    var provider = new firebase.auth.GoogleAuthProvider();
    
  2. ทางเลือก : ระบุขอบเขต OAuth 2.0 เพิ่มเติมที่คุณต้องการขอจากผู้ให้บริการการพิสูจน์ตัวตน หากต้องการเพิ่มขอบเขตให้เรียก addScope ตัวอย่างเช่น
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    
    ดู เอกสาร คู่มือ ผู้ให้บริการการพิสูจน์ ตัว ตน
  3. ทางเลือก : หากต้องการแปลโฟลว์ OAuth ของผู้ให้บริการเป็นภาษาที่ต้องการของผู้ใช้โดยไม่ส่งผ่านพารามิเตอร์ OAuth ที่กำหนดเองที่เกี่ยวข้องอย่างชัดเจนให้อัปเดตรหัสภาษาบนอินสแตนซ์ Auth ก่อนเริ่มโฟลว์ OAuth ตัวอย่างเช่น:
    firebase.auth().languageCode = 'pt';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
    
  4. ทางเลือก : ระบุพารามิเตอร์ผู้ให้บริการ OAuth ที่กำหนดเองเพิ่มเติมที่คุณต้องการส่งพร้อมกับคำขอ OAuth หากต้องการเพิ่มพารามิเตอร์ที่กำหนดเองให้เรียกใช้ setCustomParameters บนผู้ให้บริการที่เตรียมใช้งานด้วยออบเจ็กต์ที่มีคีย์ตามที่ระบุโดยเอกสารประกอบของผู้ให้บริการ OAuth และค่าที่เกี่ยวข้อง ตัวอย่างเช่น:
    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    
    ไม่อนุญาตให้ใช้พารามิเตอร์ OAuth ที่สงวนไว้และจะถูกละเว้น ดู ข้อมูลอ้างอิงผู้ให้บริการการพิสูจน์ ตัว ตน สำหรับรายละเอียดเพิ่มเติม
  5. ตรวจสอบสิทธิ์กับ Firebase โดยใช้ออบเจ็กต์ผู้ให้บริการ Google คุณสามารถแจ้งให้ผู้ใช้ของคุณลงชื่อเข้าใช้ด้วยบัญชี Google ของตนได้โดยการเปิดหน้าต่างป๊อปอัปหรือเปลี่ยนเส้นทางไปที่หน้าลงชื่อเข้าใช้ แนะนำให้ใช้วิธีการเปลี่ยนเส้นทางบนอุปกรณ์เคลื่อนที่
    • หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัปให้เรียก signInWithPopup :
      firebase.auth().signInWithPopup(provider).then(function(result) {
        // This gives you a Google Access Token. You can use it to access the Google API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        // ...
      }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
      });
      
      นอกจากนี้โปรดสังเกตว่าคุณสามารถดึงโทเค็น OAuth ของผู้ให้บริการ Google ซึ่งสามารถใช้เพื่อดึงข้อมูลเพิ่มเติมโดยใช้ Google API

      นอกจากนี้ยังเป็นที่ที่คุณสามารถตรวจจับและจัดการข้อผิดพลาดได้ สำหรับรายการรหัสข้อผิดพลาดโปรดดูที่ Auth Reference Docs

    • หากต้องการลงชื่อเข้าใช้โดยเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ให้เรียก signInWithRedirect :
      firebase.auth().signInWithRedirect(provider);
      
      จากนั้นคุณยังสามารถเรียกข้อมูลโทเค็น OAuth ของผู้ให้บริการ Google โดยเรียก getRedirectResult เมื่อหน้าของคุณโหลด:
      firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
          // This gives you a Google Access Token. You can use it to access the Google API.
          var token = result.credential.accessToken;
          // ...
        }
        // The signed-in user info.
        var user = result.user;
      }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
      });
      
      นอกจากนี้คุณยังสามารถตรวจจับและจัดการข้อผิดพลาดได้อีกด้วย สำหรับรายการรหัสข้อผิดพลาดโปรดดูที่ Auth Reference Docs

ตรวจสอบสิทธิ์กับ Firebase ในส่วนขยาย Chrome

หากคุณกำลังสร้างแอปส่วนขยาย Chrome คุณต้องอนุญาตรหัสส่วนขยาย Chrome ของคุณ:

  1. เปิดโครงการของคุณใน คอนโซล Firebase
  2. ในส่วนการ รับรองความถูกต้อง เปิดหน้า วิธีการลงชื่อเข้าใช้
  3. เพิ่ม URI ดังต่อไปนี้ในรายการ Authorized Domains:
    chrome-extension://CHROME_EXTENSION_ID

เฉพาะการดำเนินการป๊อปอัป ( signInWithPopup และ linkWithPopup ) เท่านั้นที่สามารถใช้ได้กับส่วนขยาย Chrome เนื่องจากส่วนขยายของ Chrome ไม่สามารถใช้การเปลี่ยนเส้นทาง HTTP คุณควรเรียกใช้วิธีการเหล่านี้จากสคริปต์พื้นหลังแทนที่จะเป็นป๊อปอัปการทำงานของเบราว์เซอร์เนื่องจากป๊อปอัปการตรวจสอบสิทธิ์จะยกเลิกป๊อปอัปการทำงานของเบราว์เซอร์

ในไฟล์ Manifest ของส่วนขยาย Chrome ของคุณตรวจสอบให้แน่ใจว่าคุณได้เพิ่ม https://apis.google.com URL ในรายการที่อนุญาตพิเศษของ content_security_policy

ขั้นตอนถัดไป

หลังจากผู้ใช้ลงชื่อเข้าใช้เป็นครั้งแรกบัญชีผู้ใช้ใหม่จะถูกสร้างขึ้นและเชื่อมโยงกับข้อมูลรับรองนั่นคือชื่อผู้ใช้และรหัสผ่านหมายเลขโทรศัพท์หรือข้อมูลผู้ให้บริการรับรองความถูกต้องซึ่งผู้ใช้ลงชื่อเข้าใช้ด้วย บัญชีใหม่นี้จัดเก็บเป็นส่วนหนึ่งของโปรเจ็กต์ Firebase ของคุณและสามารถใช้เพื่อระบุผู้ใช้ในทุกแอปในโปรเจ็กต์ของคุณได้ไม่ว่าผู้ใช้จะลงชื่อเข้าใช้อย่างไร

  • ในแอปของคุณวิธีที่แนะนำในการทราบสถานะการ Auth ของผู้ใช้ของคุณคือการตั้งค่าผู้สังเกตการณ์บนวัตถุ Auth จากนั้นคุณสามารถรับข้อมูลโปรไฟล์พื้นฐานของผู้ใช้จากวัตถุ User ดู จัดการผู้ใช้

  • ในฐานข้อมูลเรียลไทม์ Firebase และ กฎความปลอดภัยของที่ เก็บข้อมูลบนคลาวด์คุณสามารถรับ ID ผู้ใช้เฉพาะของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร auth และใช้เพื่อควบคุมข้อมูลที่ผู้ใช้สามารถเข้าถึงได้

คุณสามารถอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปของคุณโดยใช้ผู้ให้บริการตรวจสอบสิทธิ์หลายรายโดยการ เชื่อมโยงข้อมูลรับรองของผู้ให้บริการรับรองความถูกต้องกับบัญชีผู้ใช้ที่มีอยู่

ในการออกจากระบบผู้ใช้โทร signOut :

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});