Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

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

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

เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript
ในคอนโซล Firebase ให้ไปที่ ความปลอดภัย > การตรวจสอบสิทธิ์
ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้ผู้ให้บริการลงชื่อเข้าใช้ GitHub
เพิ่ม Client ID และ Client Secret จาก Developer Console ของผู้ให้บริการรายนั้นลงในการกำหนดค่าผู้ให้บริการ
1. ลงทะเบียนแอป เป็นแอปพลิเคชันสำหรับนักพัฒนาซอฟต์แวร์ใน GitHub และรับ OAuth 2.0 ของแอป รหัสไคลเอ็นต์และรหัสลับไคลเอ็นต์
2. ตรวจสอบว่าได้ตั้งค่า URI การเปลี่ยนเส้นทาง OAuth ของ Firebase (เช่น my-app-12345.firebaseapp.com/__/auth/handler) เป็น URL เรียกกลับการให้สิทธิ์ในการตั้งค่าแอปใน การกำหนดค่าของแอป GitHub
คลิกบันทึก

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

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

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

สร้างอินสแตนซ์ของออบเจ็กต์ผู้ให้บริการ GitHub

Web

import { GithubAuthProvider } from "firebase/auth";

const provider = new GithubAuthProvider();auth_github_provider_create.js

Web

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

ไม่บังคับ: ระบุขอบเขต OAuth 2.0 เพิ่มเติมที่ต้องการขอจากผู้ให้บริการตรวจสอบสิทธิ์ หากต้องการเพิ่มขอบเขต ให้เรียกใช้ addScope เช่น
Web
```
provider.addScope('repo');auth_github_provider_scopes.js
```
Web
```
provider.addScope('repo');github.js
```
ดูเอกสารประกอบของผู้ให้บริการตรวจสอบสิทธิ์
ไม่บังคับ: ระบุพารามิเตอร์ผู้ให้บริการ OAuth ที่กำหนดเองเพิ่มเติม ที่คุณต้องการส่งพร้อมกับคำขอ OAuth หากต้องการเพิ่มพารามิเตอร์ที่กำหนดเอง ให้เรียกใช้ setCustomParameters ในผู้ให้บริการที่เริ่มต้นด้วยออบเจ็กต์ที่มีคีย์ ตามที่ระบุไว้ในเอกสารประกอบของผู้ให้บริการ OAuth และค่าที่เกี่ยวข้อง เช่น
Web
```
provider.setCustomParameters({
  'allow_signup': 'false'
});auth_github_provider_params.js
```
Web
```
provider.setCustomParameters({
  'allow_signup': 'false'
});github.js
```
ไม่อนุญาตให้ใช้พารามิเตอร์ OAuth ที่จำเป็นซึ่งสงวนไว้ และระบบจะเพิกเฉยต่อพารามิเตอร์ดังกล่าว ดูรายละเอียดเพิ่มเติมได้ที่ ข้อมูลอ้างอิงของผู้ให้บริการตรวจสอบสิทธิ์

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

หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัป ให้เรียกใช้ signInWithPopup

Web

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

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

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

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

Web

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

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

Web

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

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

การจัดการข้อผิดพลาด account-exists-with-different-credential

หากคุณเปิดใช้การตั้งค่า1 บัญชีต่ออีเมลใน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 ดังนี้

ผสานรวมการตรวจสอบสิทธิ์ GitHub เข้ากับแอปโดยทำตาม เอกสารประกอบสำหรับนักพัฒนาแอป เมื่อสิ้นสุดขั้นตอนการลงชื่อเข้าใช้ GitHub คุณจะได้รับโทเค็นเพื่อการเข้าถึง OAuth 2.0
หากต้องการลงชื่อเข้าใช้ในแอปพลิเคชัน Node.js ให้ส่งโทเค็นเพื่อการเข้าถึง OAuth ไปยังแอปพลิเคชัน Node.js
หลังจากผู้ใช้ลงชื่อเข้าใช้ด้วย GitHub เรียบร้อยแล้ว ให้แลกเปลี่ยนโทเค็นเพื่อการเข้าถึง OAuth 2.0 เป็นข้อมูลเข้าสู่ระบบ Firebase โดยทำดังนี้
Web
```
import { GithubAuthProvider } from "firebase/auth";

const credential = GithubAuthProvider.credential(token);auth_github_provider_credential.js
```
Web
```
var credential = firebase.auth.GithubAuthProvider.credential(token);github.js
```

ตรวจสอบสิทธิ์ด้วย Firebase โดยใช้ข้อมูลเข้าสู่ระบบ Firebase

Web

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

// 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 จะจัดสรรโดเมนย่อยที่ไม่ซ้ำกันสำหรับโปรเจ็กต์ของคุณ ดังนี้ https://my-app-12345.firebaseapp.com

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

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

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

เมื่อเริ่มต้นไลบรารี JavaScript ให้ระบุโดเมนที่กำหนดเองด้วยฟิลด์ authDomain

var config = {
  apiKey: '...',
  // Changed from 'PROJECT_ID.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://PROJECT_ID.firebaseio.com',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

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

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

ในแอป วิธีที่แนะนำในการทราบสถานะการให้สิทธิ์ของผู้ใช้คือการ ตั้งค่า Observer ในออบเจ็กต์ Auth จากนั้นคุณจะดูข้อมูลโปรไฟล์พื้นฐานของผู้ใช้ได้จากออบเจ็กต์ User ดูจัดการผู้ใช้
ใน Firebase Realtime Database และ Cloud Storage กฎความปลอดภัย คุณสามารถ รับรหัสผู้ใช้ที่ไม่ซ้ำของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร auth และใช้รหัสดังกล่าวเพื่อควบคุมข้อมูลที่ผู้ใช้เข้าถึงได้

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

หากต้องการให้ออกจากระบบ ให้โทรหา signOut

Web

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

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