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

   เรียนรู้เพิ่มเติม เกี่ยวกับ Web API แบบโมดูลาร์แบบสั่นได้และ อัปเกรด จาก API แบบเนมสเปซ

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

   Web namespaced API

   var provider = new firebase.auth.GithubAuthProvider();
   github.js

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

   Web modular API

   เรียนรู้เพิ่มเติม เกี่ยวกับ Web API แบบโมดูลาร์แบบสั่นได้และ อัปเกรด จาก API แบบเนมสเปซ

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

   Web namespaced API

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

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

   Web modular API

   เรียนรู้เพิ่มเติม เกี่ยวกับ Web API แบบโมดูลาร์แบบสั่นได้และ อัปเกรด จาก API แบบเนมสเปซ

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

   Web namespaced API

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

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

     Web modular API

     เรียนรู้เพิ่มเติม เกี่ยวกับ Web API แบบโมดูลาร์แบบสั่นได้และ อัปเกรด จาก 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

     Web namespaced 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

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

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

     Web modular API

     เรียนรู้เพิ่มเติม เกี่ยวกับ Web API แบบโมดูลาร์แบบสั่นได้และ อัปเกรด จาก API แบบเนมสเปซ

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

     Web namespaced API

     firebase.auth().signInWithRedirect(provider);
     index.js

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

     Web modular API

     เรียนรู้เพิ่มเติม เกี่ยวกับ Web API แบบโมดูลาร์แบบสั่นได้และ อัปเกรด จาก 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

     Web namespaced 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

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

การจัดการข้อผิดพลาดของบัญชีที่มีอยู่ด้วยข้อมูลประจำตัวที่แตกต่างกัน

หากคุณเปิดใช้งานการตั้ง ค่าหนึ่งบัญชีต่อที่อยู่อีเมล ใน คอนโซล Firebase เมื่อผู้ใช้พยายามลงชื่อเข้าใช้ผู้ให้บริการ (เช่น GitHub) ด้วยอีเมลที่มีอยู่แล้วสำหรับผู้ให้บริการผู้ใช้ Firebase รายอื่น (เช่น Google) ข้อผิดพลาด auth/account-exists-with-different-credential จะถูกส่งไปพร้อมกับวัตถุ AuthCredential (โทเค็นการเข้าถึง GitHub) ในการลงชื่อเข้าใช้ผู้ให้บริการที่ต้องการให้เสร็จสมบูรณ์ ผู้ใช้ต้องลงชื่อเข้าใช้ผู้ให้บริการที่มีอยู่ก่อน (Google) แล้วจึงลิงก์ไปยัง AuthCredential เดิม (โทเค็นการเข้าถึง GitHub)

โหมดป๊อปอัป

หากคุณใช้ signInWithPopup คุณสามารถจัดการข้อผิดพลาด auth/account-exists-with-different-credential ด้วยโค้ดดังตัวอย่างต่อไปนี้:

// Step 1.
// User tries to sign in to GitHub.
auth.signInWithPopup(new firebase.auth.GithubAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending GitHub credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // GitHub account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to GitHub credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // GitHub account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

โหมดเปลี่ยนเส้นทาง

ข้อผิดพลาดนี้ได้รับการจัดการในลักษณะเดียวกันในโหมดเปลี่ยนเส้นทาง โดยมีข้อแตกต่างที่ต้องแคชข้อมูลรับรองที่รอดำเนินการระหว่างการเปลี่ยนเส้นทางหน้า (เช่น การใช้ที่เก็บข้อมูลเซสชัน)

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

คุณยังสามารถตรวจสอบสิทธิ์กับ 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 modular API

   เรียนรู้เพิ่มเติม เกี่ยวกับ Web API แบบโมดูลาร์แบบสั่นได้และ อัปเกรด จาก API แบบเนมสเปซ

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

   Web namespaced API

   var credential = firebase.auth.GithubAuthProvider.credential(token);
   github.js

4. รับรองความถูกต้องด้วย Firebase โดยใช้ข้อมูลรับรอง Firebase:

   Web modular API

   เรียนรู้เพิ่มเติม เกี่ยวกับ Web API แบบโมดูลาร์แบบสั่นได้และ อัปเกรด จาก 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

   Web namespaced 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 คุณต้องเพิ่ม 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

การปรับแต่งโดเมนการเปลี่ยนเส้นทางสำหรับการลงชื่อเข้าใช้ GitHub

ในการสร้างโครงการ Firebase จะจัดเตรียมโดเมนย่อยเฉพาะสำหรับโครงการของคุณ: https://my-app-12345.firebaseapp.com

นอกจากนี้ยังจะใช้เป็นกลไกการเปลี่ยนเส้นทางสำหรับการลงชื่อเข้าใช้ OAuth โดเมนนั้นจะต้องได้รับอนุญาตสำหรับผู้ให้บริการ OAuth ที่รองรับทั้งหมด อย่างไรก็ตาม หมายความว่าผู้ใช้อาจเห็นโดเมนนั้นขณะลงชื่อเข้าใช้ GitHub ก่อนที่จะเปลี่ยนเส้นทางกลับไปที่แอปพลิเคชัน: ดำเนินการต่อที่: https://my-app-12345.firebaseapp.com

หากต้องการหลีกเลี่ยงการแสดงโดเมนย่อย คุณสามารถตั้งค่าโดเมนแบบกำหนดเองด้วย Firebase Hosting:

1. ทำตามขั้นตอนที่ 1 ถึง 3 ใน การตั้งค่าโดเมนของคุณสำหรับการโฮสต์ เมื่อคุณยืนยันความเป็นเจ้าของโดเมน โฮสติ้งจะจัดเตรียมใบรับรอง SSL สำหรับโดเมนที่คุณกำหนดเอง
2. เพิ่มโดเมนที่กำหนดเองของคุณลงในรายการโดเมนที่ได้รับอนุญาตใน คอนโซล Firebase : auth.custom.domain.com
3. ในคอนโซลนักพัฒนาซอฟต์แวร์ GitHub หรือหน้าการตั้งค่า OAuth ให้อนุญาต URL ของหน้าเปลี่ยนเส้นทาง ซึ่งจะเข้าถึงได้บนโดเมนที่กำหนดเองของคุณ: https://auth.custom.domain.com/__/auth/handler
4. เมื่อคุณเริ่มต้นไลบรารี JavaScript ให้ระบุโดเมนที่คุณกำหนดเองด้วยฟิลด์ authDomain :

   var config = {
     apiKey: '...',
     // Changed from 'my-app-12345.firebaseapp.com'.
     authDomain: 'auth.custom.domain.com',
     databaseURL: 'https://my-app-12345.firebaseio.com',
     projectId: 'my-app-12345',
     storageBucket: 'my-app-12345.appspot.com',
     messagingSenderId: '1234567890'
   };
   firebase.initializeApp(config);
   

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

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

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

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

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

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

Web modular API

เรียนรู้เพิ่มเติม เกี่ยวกับ Web API แบบโมดูลาร์แบบสั่นได้และ อัปเกรด จาก 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

Web namespaced API

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