Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

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

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

เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript
ในคอนโซล Firebase ให้ไปที่ ความปลอดภัย > การตรวจสอบสิทธิ์
ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้ผู้ให้บริการการลงชื่อเข้าใช้ GitHub
เพิ่มรหัสไคลเอ็นต์ และรหัสลับไคลเอ็นต์ จากคอนโซลนักพัฒนาแอปของผู้ให้บริการรายนั้น ลงในการกำหนดค่าผู้ให้บริการ โดยทำดังนี้:
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 บัญชีต่อ 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

ระบบจะใช้โดเมนนี้เป็นกลไกการเปลี่ยนเส้นทางสำหรับการลงชื่อเข้าใช้ 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