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

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

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

เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript
เปิดใช้ Google เป็นวิธีการลงชื่อเข้าใช้ในFirebaseคอนโซล
1. ในคอนโซล Firebase ให้เปิด ส่วนการตรวจสอบสิทธิ์
2. ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้Google แล้วคลิกบันทึก
เคล็ดลับ: หากต้องการใช้ Firebase CLI ให้เรียกใช้ firebase init auth เพื่อกำหนดค่าผู้ให้บริการตรวจสอบสิทธิ์ แล้วเรียกใช้ firebase deploy --only auth เพื่อนำการเปลี่ยนแปลงไปใช้กับโปรเจ็กต์ ของคุณ

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

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

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

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

Web

import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();auth_google_provider_create.js

Web

var provider = new firebase.auth.GoogleAuthProvider();google-signin.js

ไม่บังคับ: ระบุขอบเขต OAuth 2.0 เพิ่มเติมที่คุณต้องการขอจากผู้ให้บริการตรวจสอบสิทธิ์ หากต้องการเพิ่มขอบเขต ให้เรียกใช้ addScope เช่น
Web
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js
```
Web
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');google-signin.js
```
โปรดดูเอกสารประกอบของผู้ให้บริการตรวจสอบสิทธิ์
ไม่บังคับ: หากต้องการแปลขั้นตอน OAuth ของผู้ให้บริการเป็นภาษาที่ผู้ใช้ต้องการ โดยไม่ต้องส่งพารามิเตอร์ OAuth ที่กำหนดเองที่เกี่ยวข้องอย่างชัดเจน ให้อัปเดตรหัสภาษา ในอินสแตนซ์การตรวจสอบสิทธิ์ก่อนที่จะเริ่มขั้นตอน OAuth เช่น
Web
```
import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();auth_set_language_code.js
```
Web
```
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js
```
ไม่บังคับ: ระบุพารามิเตอร์ผู้ให้บริการ OAuth ที่กำหนดเองเพิ่มเติม ที่คุณต้องการส่งพร้อมกับคำขอ OAuth หากต้องการเพิ่มพารามิเตอร์ที่กำหนดเอง ให้เรียกใช้ setCustomParameters ในผู้ให้บริการที่เริ่มต้นด้วยออบเจ็กต์ที่มีคีย์ ตามที่ระบุไว้ในเอกสารประกอบของผู้ให้บริการ OAuth และค่าที่เกี่ยวข้อง เช่น
Web
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});auth_google_provider_params.js
```
Web
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});google-signin.js
```
ไม่อนุญาตให้ใช้พารามิเตอร์ OAuth ที่จำเป็นซึ่งสงวนไว้ และระบบจะเพิกเฉยต่อพารามิเตอร์ดังกล่าว ดูรายละเอียดเพิ่มเติมได้ที่ ข้อมูลอ้างอิงของผู้ให้บริการตรวจสอบสิทธิ์

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

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

Web

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

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access the Google API.
    const credential = GoogleAuthProvider.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 = GoogleAuthProvider.credentialFromError(error);
    // ...
  });auth_google_signin_popup.js

Web

firebase.auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a Google Access Token. You can use it to access the Google 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;
    // ...
  });google-signin.js

นอกจากนี้ คุณยังดึงโทเค็น OAuth ของผู้ให้บริการ Google ซึ่งใช้เพื่อดึงข้อมูลเพิ่มเติมได้โดยใช้ Google 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 ของผู้ให้บริการ Google ได้โดยการเรียก getRedirectResult เมื่อหน้าเว็บโหลด

Web

import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access Google APIs.
    const credential = GoogleAuthProvider.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 = GoogleAuthProvider.credentialFromError(error);
    // ...
  });auth_google_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 Google Access Token. You can use it to access the Google 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;
    // ...
  });google-signin.js

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

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

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

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

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

try {
  // Step 1: User tries to sign in using Google.
  let result = await signInWithPopup(getAuth(), new GoogleAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Google 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 Google 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 โดยใช้บัญชี Google ได้ด้วยการจัดการ ขั้นตอนการลงชื่อเข้าใช้ด้วยไลบรารีลงชื่อเข้าใช้ด้วย Google

ผสานรวมฟีเจอร์ลงชื่อเข้าใช้ด้วย Google เข้ากับแอปโดยทำตามคู่มือการผสานรวม อย่าลืมกําหนดค่า Google Sign-In ด้วยรหัสไคลเอ็นต์ Google ที่สร้างขึ้นสําหรับโปรเจ็กต์ Firebase คุณดูรหัสไคลเอ็นต์ Google ของโปรเจ็กต์ได้ในหน้าข้อมูลเข้าสู่ระบบของ Developers Console ของโปรเจ็กต์

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

function handleCredentialResponse(response) {
  // Build Firebase credential with the Google ID token.
  const idToken = response.credential;
  const credential = GoogleAuthProvider.credential(idToken);

  // Sign in with credential from the Google user.
  signInWithCredential(auth, credential).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;
    // The credential that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
}

ขั้นสูง: ตรวจสอบสิทธิ์ด้วย Firebase ใน Node.js

หากต้องการตรวจสอบสิทธิ์ด้วย Firebase ในแอปพลิเคชัน Node.js ให้ทำดังนี้

ลงชื่อเข้าใช้ผู้ใช้ด้วยบัญชี Google และรับโทเค็นรหัส Google ของผู้ใช้ ซึ่งทำได้หลายวิธี เช่น
- หากแอปมีส่วนหน้าของเบราว์เซอร์ ให้ใช้ Google Sign-In ตามที่อธิบายไว้ ในส่วนจัดการ ขั้นตอนการลงชื่อเข้าใช้ด้วยตนเอง รับโทเค็นรหัส Google จากการตอบกลับการตรวจสอบสิทธิ์
```
var id_token = googleUser.getAuthResponse().id_token
```
  จากนั้นส่งโทเค็นนี้ไปยังแอป Node.js
- หากแอปทำงานบนอุปกรณ์ที่มีความสามารถในการป้อนข้อมูลจำกัด เช่น ทีวี คุณสามารถใช้ขั้นตอนลงชื่อเข้าใช้ด้วย Google สำหรับทีวีและอุปกรณ์ได้

หลังจากได้รับโทเค็นรหัส Google ของผู้ใช้แล้ว ให้ใช้โทเค็นดังกล่าวเพื่อสร้างออบเจ็กต์ Credential แล้วลงชื่อเข้าใช้ผู้ใช้ด้วยข้อมูลเข้าสู่ระบบ

Web

import { getAuth, signInWithCredential, GoogleAuthProvider } from "firebase/auth";

// Build Firebase credential with the Google ID token.
const credential = GoogleAuthProvider.credential(id_token);

// Sign in with credential from the Google user.
const auth = getAuth();
signInWithCredential(auth, credential).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 = GoogleAuthProvider.credentialFromError(error);
  // ...
});auth_google_build_signin.js

Web

// Build Firebase credential with the Google ID token.
var credential = firebase.auth.GoogleAuthProvider.credential(id_token);

// Sign in with credential from the Google user.
firebase.auth().signInWithCredential(credential).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;
  // ...
});google-signin.js

ตรวจสอบสิทธิ์ด้วย Firebase ในส่วนขยาย Chrome

หากคุณกำลังสร้างแอปส่วนขยาย Chrome โปรดดู คู่มือเอกสารนอกหน้าจอ

เมื่อสร้างโปรเจ็กต์แล้ว Firebase จะจัดสรรโดเมนย่อยที่ไม่ซ้ำกันสำหรับโปรเจ็กต์ของคุณ ดังนี้ https://my-app-12345.firebaseapp.com

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

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

ทำตามขั้นตอนที่ 1-3 ใน ตั้งค่าโดเมนสำหรับ Hosting เมื่อคุณยืนยัน การเป็นเจ้าของโดเมน Hosting จะจัดสรรใบรับรอง SSL สำหรับโดเมนที่กำหนดเอง
เพิ่มโดเมนที่กำหนดเองลงในรายการโดเมนที่ได้รับอนุญาตในFirebase Console auth.custom.domain.com
ในคอนโซลนักพัฒนาแอป Google หรือหน้าการตั้งค่า 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