Google 致力于为黑人社区推动种族平等。查看具体举措

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

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

ก่อนจะเริ่ม

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

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

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

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

  1. สร้างอินสแตนซ์ของวัตถุผู้ให้บริการของ Google:

    Web version 9

    import { GoogleAuthProvider } from "firebase/auth";
    
    const provider = new GoogleAuthProvider();

    Web version 8

    var provider = new firebase.auth.GoogleAuthProvider();
  2. ไม่บังคับ : ระบุขอบเขต OAuth 2.0 เพิ่มเติมที่คุณต้องการขอจากผู้ให้บริการตรวจสอบสิทธิ์ หากต้องการเพิ่มขอบเขต ให้เรียก addScope ตัวอย่างเช่น:

    Web version 9

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

    Web version 8

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    ดู เอกสารผู้ให้บริการตรวจสอบสิทธิ์
  3. ไม่บังคับ : หากต้องการแปลโฟลว์ OAuth ของผู้ให้บริการเป็นภาษาที่ผู้ใช้ต้องการโดยไม่ผ่านพารามิเตอร์ OAuth ที่กำหนดเองที่เกี่ยวข้องอย่างชัดแจ้ง ให้อัปเดตรหัสภาษาบนอินสแตนซ์ Auth ก่อนเริ่มโฟลว์ OAuth ตัวอย่างเช่น:

    Web version 9

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();

    Web version 8

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  4. ไม่บังคับ : ระบุพารามิเตอร์ผู้ให้บริการ OAuth ที่กำหนดเองเพิ่มเติมที่คุณต้องการส่งด้วยคำขอ OAuth ในการเพิ่มพารามิเตอร์ที่กำหนดเอง ให้เรียก setCustomParameters บนตัวให้บริการที่เริ่มต้นด้วยอ็อบเจ็กต์ที่มีคีย์ตามที่ระบุโดยเอกสารของผู้ให้บริการ OAuth และค่าที่เกี่ยวข้อง ตัวอย่างเช่น:

    Web version 9

    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });

    Web version 8

    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    ไม่อนุญาตให้ใช้พารามิเตอร์ OAuth ที่สงวนไว้และจะถูกละเว้น ดู ข้อมูลอ้างอิงผู้ให้บริการรับรองความถูกต้อง สำหรับรายละเอียดเพิ่มเติม
  5. ตรวจสอบสิทธิ์กับ Firebase โดยใช้วัตถุผู้ให้บริการของ Google คุณสามารถแจ้งให้ผู้ใช้ลงชื่อเข้าใช้ด้วยบัญชี Google ได้โดยเปิดหน้าต่างป๊อปอัปหรือเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ แนะนำให้ใช้วิธีการเปลี่ยนเส้นทางบนอุปกรณ์มือถือ
    • หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัป ให้โทร signInWithPopup :

      Web version 9

      import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access the Google API.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          // The signed-in user info.
          const user = result.user;
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      firebase.auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a Google Access Token. You can use it to access the Google API.
          var token = credential.accessToken;
          // The signed-in user info.
          var user = result.user;
          // ...
        }).catch((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

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

    • หากต้องการลงชื่อเข้าใช้โดยเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ ให้โทร signInWithRedirect :

      Web version 9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Web version 8

      firebase.auth().signInWithRedirect(provider);
      จากนั้น คุณยังสามารถเรียกข้อมูลโทเค็น OAuth ของผู้ให้บริการ Google ได้โดยเรียก getRedirectResult เมื่อหน้าเว็บของคุณโหลด:

      Web version 9

      import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access Google APIs.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          // The signed-in user info.
          const user = result.user;
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a Google Access Token. You can use it to access the Google API.
            var token = credential.accessToken;
            // ...
          }
          // The signed-in user info.
          var user = result.user;
        }).catch((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;
          // ...
        });
      นี่คือที่ที่คุณสามารถตรวจจับและจัดการข้อผิดพลาดได้ สำหรับรายการรหัสข้อผิดพลาด โปรดดู เอกสารอ้างอิงการตรวจสอบสิทธิ์

ตรวจสอบสิทธิ์ด้วย Firebase ในส่วนขยายของ Chrome

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

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

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

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

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

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

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

  • ในฐานข้อมูล Firebase Realtime Database และ Cloud Storage Security Rules คุณสามารถรับ ID ผู้ใช้เฉพาะของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร auth และใช้เพื่อควบคุมข้อมูลที่ผู้ใช้สามารถเข้าถึงได้

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

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

Web version 9

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web version 8

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