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

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

ก่อนเริ่มต้น

  1. เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript
  2. ในคอนโซล Firebase ให้เปิดส่วนการตรวจสอบสิทธิ์
  3. ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้ผู้ให้บริการ GitHub
  4. เพิ่มรหัสไคลเอ็นต์และรหัสลับไคลเอ็นต์จาก Play Console ของผู้ให้บริการรายนั้นลงในการกำหนดค่าผู้ให้บริการ ดังนี้
    1. ลงทะเบียนแอปเป็นแอปพลิเคชันสำหรับนักพัฒนาซอฟต์แวร์ใน GitHub และรับ Client-ID ของ OAuth 2.0 และรหัสลับไคลเอ็นต์ของแอป
    2. ตรวจสอบว่าได้ตั้งค่า URL การเปลี่ยนเส้นทาง OAuth ของ Firebase (เช่น 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 Modular API

    import { GithubAuthProvider } from "firebase/auth";

const provider = new GithubAuthProvider();
    auth_github_provider_create.js

    API ที่ใช้เนมสเปซในเว็บ

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

    Web Modular API

    provider.addScope('repo');
    auth_github_provider_scopes.js

    API ที่ใช้เนมสเปซในเว็บ

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

    Web Modular API

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

    API ที่ใช้เนมสเปซในเว็บ

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

      Web Modular API

      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);
    // ...
  });
      auth_github_signin_popup.js

      API ที่ใช้เนมสเปซในเว็บ

      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;
    // ...
  });
      github.js
      นอกจากนี้ โปรดทราบว่าคุณสามารถเรียกโทเค็น OAuth ของผู้ให้บริการ GitHub ซึ่งสามารถใช้เพื่อดึงข้อมูลเพิ่มเติมโดยใช้ GitHub API

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

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

      Web Modular API

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

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js

      API ที่ใช้เนมสเปซในเว็บ

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

      Web Modular API

      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);
    // ...
  });
      auth_github_signin_redirect_result.js

      API ที่ใช้เนมสเปซในเว็บ

      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;
    // ...
  });
      github.js
      นอกจากนี้ คุณจะสามารถตรวจหาและจัดการข้อผิดพลาดได้ด้วย โปรดดูรายการรหัสข้อผิดพลาดในเอกสารข้อมูลอ้างอิงการตรวจสอบสิทธิ์

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

นอกจากนี้ คุณยังตรวจสอบสิทธิ์กับ Firebase โดยใช้บัญชี GitHub ได้ด้วย โดยจัดการขั้นตอนการลงชื่อเข้าใช้ด้วยการเรียกใช้ปลายทาง OAuth 2.0 ของ GitHub ดังนี้

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

    Web Modular API

    import { GithubAuthProvider } from "firebase/auth";

const credential = GithubAuthProvider.credential(token);
    auth_github_provider_credential.js

    API ที่ใช้เนมสเปซในเว็บ

    var credential = firebase.auth.GithubAuthProvider.credential(token);
    github.js
  4. ตรวจสอบสิทธิ์ด้วย Firebase โดยใช้ข้อมูลเข้าสู่ระบบ Firebase ดังนี้

    Web Modular API

    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;
    // ...
  });
    auth_signin_credential.js

    API ที่ใช้เนมสเปซในเว็บ

    // 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;
    // ...
  });
    index.js

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

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

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

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

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

  • ในกฎความปลอดภัยของ Firebase Realtime Database และ Cloud Storage คุณจะรับรหัสผู้ใช้ที่ไม่ซ้ำของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร 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.
});
auth_sign_out.js

API ที่ใช้เนมสเปซในเว็บ

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