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

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

ก่อนจะเริ่ม

  1. เพิ่ม Firebase กับโครงการ JavaScript ของคุณ
  2. ใน Firebase คอนโซล , เปิดส่วนการตรวจสอบสิทธิ์
  3. ที่ลงในแท็บวิธีการที่ช่วยให้ผู้ให้บริการ GitHub
  4. เพิ่มรหัสลูกค้าและความลับของไคลเอ็นต์จากผู้ให้บริการที่นักพัฒนาคอนโซลการกำหนดค่าของผู้ให้บริการ:
    1. ลงทะเบียนแอปของคุณ เป็นโปรแกรมสำหรับนักพัฒนาบน GitHub และได้รับรหัสลูกค้าของแอป OAuth 2.0 และความลับของไคลเอ็นต์
    2. ตรวจสอบให้แน่ใจคุณ Firebase OAuth เปลี่ยนเส้นทาง URI (เช่น my-app-12345.firebaseapp.com/__/auth/handler ) ถูกกำหนดให้เป็น URL เรียกกลับการอนุญาตของคุณในแอปหน้าการตั้งค่าบน การตั้งค่า GitHub ของแอป
  5. คลิกบันทึก

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

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

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

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

    เว็บรุ่น 9

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

    เว็บรุ่น8

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

    เว็บรุ่น 9

    provider.addScope('repo');

    เว็บรุ่น8

    provider.addScope('repo');
    ดู เอกสารที่ผู้ให้บริการการตรวจสอบ
  3. บังคับ: ระบุพารามิเตอร์ผู้ให้บริการที่กำหนดเอง OAuth เพิ่มเติมที่คุณต้องการที่จะส่งคำขอของ OAuth หากต้องการเพิ่มพารามิเตอร์ที่กำหนดเองโทร setCustomParameters กับผู้ให้เริ่มต้นได้ด้วยวัตถุที่มีกุญแจสำคัญในการตามที่ระบุโดยผู้ให้บริการเอกสารของ OAuth และความคุ้มค่าที่สอดคล้องกัน ตัวอย่างเช่น:

    เว็บรุ่น 9

    provider.setCustomParameters({
      'allow_signup': 'false'
    });

    เว็บรุ่น8

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

      เว็บรุ่น 9

      import { getAuth, signInWithPopup, GithubAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a GitHub Access Token. You can use it to access the GitHub API.
          const credential = GithubAuthProvider.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.email;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });

      เว็บรุ่น8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a GitHub Access Token. You can use it to access the GitHub 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 ของผู้ให้บริการ GitHub ซึ่งสามารถใช้เพื่อดึงข้อมูลเพิ่มเติมโดยใช้ GitHub API

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

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

      เว็บรุ่น 9

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

      เว็บรุ่น8

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

      เว็บรุ่น 9

      import { getAuth, getRedirectResult, GithubAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          const credential = GithubAuthProvider.credentialFromResult(result);
          if (credential) {
            // This gives you a GitHub Access Token. You can use it to access the GitHub API.
            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.email;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });

      เว็บรุ่น8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a GitHub Access Token. You can use it to access the GitHub 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 โดยใช้บัญชี GitHub โดยจัดการขั้นตอนการลงชื่อเข้าใช้โดยเรียกปลายทาง GitHub OAuth 2.0:

  1. บูรณาการการตรวจสอบ GitHub ใน app ของคุณโดยทำตาม เอกสารของนักพัฒนา เมื่อสิ้นสุดขั้นตอนการลงชื่อเข้าใช้ GitHub คุณจะได้รับโทเค็นการเข้าถึง OAuth 2.0
  2. หากคุณต้องการลงชื่อเข้าใช้แอปพลิเคชัน Node.js ให้ส่งโทเค็นการเข้าถึง OAuth ไปยังแอปพลิเคชัน Node.js
  3. หลังจากที่ผู้ใช้ลงชื่อเข้าใช้ GitHub สำเร็จแล้ว ให้แลกเปลี่ยนโทเค็นการเข้าถึง OAuth 2.0 เป็นข้อมูลรับรอง Firebase:

    เว็บรุ่น 9

    import { GithubAuthProvider } from "firebase/auth";
    
    const credential = GithubAuthProvider.credential(token);

    เว็บรุ่น8

    var credential = firebase.auth.GithubAuthProvider.credential(token);
  4. ตรวจสอบสิทธิ์กับ Firebase โดยใช้ข้อมูลรับรอง Firebase:

    เว็บรุ่น 9

    import { getAuth, signInWithCredential } from "firebase/auth";
    
    // Sign in with the credential from the user.
    const auth = getAuth();
    signInWithCredential(auth, credential)
      .then((result) => {
        // Signed in 
        // ...
      })
      .catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        // The email of the user's account used.
        const email = error.email;
        // ...
      });

    เว็บรุ่น8

    // Sign in with the credential from the user.
    firebase.auth()
      .signInWithCredential(credential)
      .then((result) => {
        // Signed in 
        // ...
      })
      .catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        // The email of the user's account used.
        const email = error.email;
        // ...
      });

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

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

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

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

ในส่วนขยายของ Chrome ของคุณทำให้ไฟล์ที่ประจักษ์แน่ใจว่าคุณเพิ่ม https://apis.google.com URL ไป content_security_policy allowlist

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

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

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

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

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

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

เว็บรุ่น 9

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

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

เว็บรุ่น8

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