Google is committed to advancing racial equity for Black communities. See how.
หน้านี้ได้รับการแปลโดย Cloud Translation API
Switch to English

รับรองความถูกต้องโดยใช้ GitHub กับ JavaScript

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

ก่อนที่คุณจะเริ่ม

  1. เพิ่ม Firebase ในโครงการ JavaScript ของคุณ
  2. ใน คอนโซล Firebase เปิดส่วน Auth
  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:
    var provider = new firebase.auth.GithubAuthProvider();
    
  2. ทางเลือก : ระบุขอบเขต OAuth 2.0 เพิ่มเติมที่คุณต้องการขอจากผู้ให้บริการการพิสูจน์ตัวตน หากต้องการเพิ่มขอบเขตให้เรียก addScope ตัวอย่างเช่น:
    provider.addScope('repo');
    
    ดู เอกสาร คู่มือ ผู้ให้บริการการพิสูจน์ ตัว ตน
  3. ทางเลือก : ระบุพารามิเตอร์ผู้ให้บริการ OAuth ที่กำหนดเองเพิ่มเติมที่คุณต้องการส่งพร้อมกับคำขอ OAuth หากต้องการเพิ่มพารามิเตอร์ที่กำหนดเองให้เรียกใช้ setCustomParameters บนผู้ให้บริการที่เตรียมใช้งานด้วยออบเจ็กต์ที่มีคีย์ตามที่ระบุโดยเอกสารประกอบของผู้ให้บริการ OAuth และค่าที่เกี่ยวข้อง ตัวอย่างเช่น
    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    
    ไม่อนุญาตให้ใช้พารามิเตอร์ OAuth ที่สงวนไว้และจะถูกละเว้น ดู ข้อมูลอ้างอิงผู้ให้บริการการพิสูจน์ ตัว ตน สำหรับรายละเอียดเพิ่มเติม
  4. ตรวจสอบสิทธิ์กับ Firebase โดยใช้ออบเจ็กต์ผู้ให้บริการ GitHub คุณสามารถแจ้งให้ผู้ใช้ของคุณลงชื่อเข้าใช้ด้วยบัญชี GitHub ของตนได้โดยการเปิดหน้าต่างป๊อปอัปหรือโดยเปลี่ยนเส้นทางไปที่หน้าลงชื่อเข้าใช้ แนะนำให้ใช้วิธีการเปลี่ยนเส้นทางบนอุปกรณ์เคลื่อนที่
    • หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัปให้เรียก signInWithPopup :
      firebase.auth().signInWithPopup(provider).then(function(result) {
        // This gives you a GitHub Access Token. You can use it to access the GitHub API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        // ...
      }).catch(function(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 :
      firebase.auth().signInWithRedirect(provider);
      
      จากนั้นคุณยังสามารถดึงข้อมูลโทเค็น OAuth ของผู้ให้บริการ GitHub โดยเรียก getRedirectResult เมื่อหน้าของคุณโหลด:
      firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
          // This gives you a GitHub Access Token. You can use it to access the GitHub API.
          var token = result.credential.accessToken;
          // ...
        }
        // The signed-in user info.
        var user = result.user;
      }).catch(function(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:
    var credential = firebase.auth.GithubAuthProvider.credential(token);
    
  4. ตรวจสอบสิทธิ์กับ Firebase โดยใช้ข้อมูลรับรอง Firebase:
    firebase.auth().signInWithCredential(credential).catch(function(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 ดังต่อไปนี้ในรายการ Authorized Domains:
    chrome-extension://CHROME_EXTENSION_ID

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

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

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

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

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

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

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

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

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