ตรวจสอบสิทธิ์การใช้ 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 modular API

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

    Web namespaced API

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

    Web modular API

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

    Web namespaced API

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

    Web modular API

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

    Web namespaced API

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

    Web modular API

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

    Web namespaced API

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

      Web modular API

      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;
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        }).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 namespaced API

      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;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
        }).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

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

    • หากต้องการลงชื่อเข้าใช้โดยเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ ให้โทร signInWithRedirect : ปฏิบัติตาม แนวทางปฏิบัติที่ดีที่สุด เมื่อใช้ `signInWithRedirect`

      Web modular API

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

      Web namespaced API

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

      Web modular API

      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;
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        }).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 namespaced API

      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;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
        }).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;
          // ...
        });
      นี่คือที่ที่คุณสามารถตรวจจับและจัดการกับข้อผิดพลาดได้ สำหรับรายการรหัสข้อผิดพลาด โปรดดูที่ Auth Reference Docs

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

หากคุณกำลังสร้างแอปส่วนขยาย Chrome โปรดดู คำแนะนำเอกสารนอกจอ

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

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

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

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

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

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

Web modular API

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

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

Web namespaced API

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