ตรวจสอบสิทธิ์การใช้ 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 โทรกลับการอนุญาต ของคุณในหน้าการตั้งค่าของแอป ใน config ของแอป 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 ด้วยโค้ดตามตัวอย่างต่อไปนี้:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  GitHubAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using GitHub.
  let result = await signInWithPopup(getAuth(), new GitHubAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending GitHub credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the GitHub credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

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

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

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

คุณยังสามารถตรวจสอบสิทธิ์กับ 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 ตรวจสอบให้แน่ใจว่าคุณได้เพิ่ม URL https://apis.google.com ลงในรายการอนุญาต 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 และ กฎความปลอดภัยของ พื้นที่เก็บข้อมูลบนคลาวด์ คุณสามารถรับ 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