ตรวจสอบสิทธิ์โดยใช้ 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. ตรวจสอบให้แน่ใจว่า URI การเปลี่ยนเส้นทาง Firebase OAuth ของคุณ (เช่น my-app-12345.firebaseapp.com/__/auth/handler ) ถูกตั้งค่าเป็น URL โทรกลับการให้สิทธิ์ ในหน้าการตั้งค่าของแอปในการกำหนดค่า แอป GitHub
  5. คลิก บันทึก

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

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

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

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

    Web version 9

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

    Web version 8

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

    Web version 9

    provider.addScope('repo');

    Web version 8

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

    Web version 9

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

    Web version 8

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

      Web version 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;
          // 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 = GithubAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 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;
          // 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 ของผู้ให้บริการ GitHub ซึ่งสามารถใช้ดึงข้อมูลเพิ่มเติมโดยใช้ GitHub API

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

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

      Web version 9

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

      Web version 8

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

      Web version 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;
          // 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 = GithubAuthProvider.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 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;
          // 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 โดยใช้บัญชี GitHub โดยจัดการขั้นตอนการลงชื่อเข้าใช้โดยเรียกปลายทาง GitHub OAuth 2.0:

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

    Web version 9

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

    Web version 8

    var credential = firebase.auth.GithubAuthProvider.credential(token);
  4. รับรองความถูกต้องด้วย Firebase โดยใช้ข้อมูลรับรอง Firebase:

    Web version 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.customData.email;
        // ...
      });

    Web version 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 คุณต้องเพิ่ม ID ส่วนขยาย 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 คุณสามารถรับ 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.
});