การจัดการเซสชันด้วย Service Worker

Firebase Auth ช่วยให้สามารถใช้ Service Worker เพื่อตรวจหาและส่งโทเค็นรหัส Firebase สำหรับการจัดการเซสชัน ซึ่งมีข้อดีดังต่อไปนี้

  • ความสามารถในการส่งโทเค็นระบุตัวตนในคําขอ HTTP ทุกรายการจากเซิร์ฟเวอร์โดยไม่ต้องดำเนินการเพิ่มเติม
  • ความสามารถในการรีเฟรชโทเค็นระบุตัวตนโดยไม่ต้องมีการส่งข้อมูลไปมาหรือเวลาในการตอบสนองเพิ่มเติม
  • เซสชันที่ซิงค์กันของแบ็กเอนด์และฟีดหน้า แอปพลิเคชันที่ต้องเข้าถึงบริการ Firebase เช่น ฐานข้อมูลเรียลไทม์, Firestore และอื่นๆ รวมถึงทรัพยากรฝั่งเซิร์ฟเวอร์ภายนอกบางอย่าง (ฐานข้อมูล SQL เป็นต้น) จะใช้โซลูชันนี้ได้ นอกจากนี้ คุณยังเข้าถึงเซสชันเดียวกันได้จาก Service Worker, Web Worker หรือ Shared Worker
  • ลดความจําเป็นในการใส่ซอร์สโค้ด Firebase Auth ในแต่ละหน้า (ลดเวลาในการตอบสนอง) เมื่อโหลดและเริ่มต้นใช้งานแล้ว Service Worker จะจัดการเซสชันสําหรับไคลเอ็นต์ทั้งหมดในเบื้องหลัง

ภาพรวม

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

Web

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

const auth = getAuth();
getIdToken(auth.currentUser)
  .then((idToken) => {
    // idToken can be passed back to server.
  })
  .catch((error) => {
    // Error occurred.
  });
auth_svc_get_idtoken.js

Web

firebase.auth().currentUser.getIdToken()
  .then((idToken) => {
    // idToken can be passed back to server.
  })
  .catch((error) => {
    // Error occurred.
  });
service-worker-sessions.js

อย่างไรก็ตาม วิธีนี้หมายความว่าสคริปต์บางรายการต้องทำงานจากไคลเอ็นต์เพื่อรับโทเค็นระบุตัวตนล่าสุด จากนั้นส่งไปยังเซิร์ฟเวอร์ผ่านส่วนหัวคำขอ, เนื้อหา POST และอื่นๆ

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

แม้ว่า Firebase Auth จะมีโซลูชันการจัดการเซสชันแบบคุกกี้แบบดั้งเดิม แต่โซลูชันนี้เหมาะกับแอปพลิเคชันฝั่งเซิร์ฟเวอร์ที่ใช้คุกกี้ httpOnly มากที่สุด และจัดการได้ยากกว่าเนื่องจากโทเค็นฝั่งไคลเอ็นต์และโทเค็นฝั่งเซิร์ฟเวอร์อาจไม่ตรงกัน โดยเฉพาะในกรณีที่คุณต้องใช้บริการ Firebase อื่นๆ ฝั่งไคลเอ็นต์ด้วย

แต่จะใช้ Service Worker เพื่อจัดการเซสชันผู้ใช้สําหรับการใช้งานฝั่งเซิร์ฟเวอร์แทนได้ ซึ่งการทํางานนี้เกิดขึ้นจากสาเหตุต่อไปนี้

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

การเปลี่ยนแปลง Service Worker

Service Worker จะต้องมีคลัง Auth และความสามารถในการรับโทเค็นระบุตัวตนปัจจุบันหากผู้ใช้ลงชื่อเข้าใช้

Web

import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged, getIdToken } from "firebase/auth";

// Initialize the Firebase app in the service worker script.
initializeApp(config);

/**
 * Returns a promise that resolves with an ID token if available.
 * @return {!Promise<?string>} The promise that resolves with an ID token if
 *     available. Otherwise, the promise resolves with null.
 */
const auth = getAuth();
const getIdTokenPromise = () => {
  return new Promise((resolve, reject) => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      unsubscribe();
      if (user) {
        getIdToken(user).then((idToken) => {
          resolve(idToken);
        }, (error) => {
          resolve(null);
        });
      } else {
        resolve(null);
      }
    });
  });
};
auth_svc_subscribe.js

Web

// Initialize the Firebase app in the service worker script.
firebase.initializeApp(config);

/**
 * Returns a promise that resolves with an ID token if available.
 * @return {!Promise<?string>} The promise that resolves with an ID token if
 *     available. Otherwise, the promise resolves with null.
 */
const getIdToken = () => {
  return new Promise((resolve, reject) => {
    const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
      unsubscribe();
      if (user) {
        user.getIdToken().then((idToken) => {
          resolve(idToken);
        }, (error) => {
          resolve(null);
        });
      } else {
        resolve(null);
      }
    });
  });
};
service-worker-sessions.js

ระบบจะขัดขวางคำขอดึงข้อมูลทั้งหมดไปยังต้นทางของแอป และหากมีโทเค็นระบุตัวตน ระบบจะเพิ่มโทเค็นดังกล่าวต่อท้ายคำขอผ่านส่วนหัว ฝั่งเซิร์ฟเวอร์ ระบบจะตรวจสอบส่วนหัวคำขอเพื่อหาโทเค็นระบุตัวตน ยืนยัน และประมวลผล สคริปต์ Service Worker จะขัดขวางคำขอดึงข้อมูลและแก้ไข

Web

const getOriginFromUrl = (url) => {
  // https://stackoverflow.com/questions/1420881/how-to-extract-base-url-from-a-string-in-javascript
  const pathArray = url.split('/');
  const protocol = pathArray[0];
  const host = pathArray[2];
  return protocol + '//' + host;
};

// Get underlying body if available. Works for text and json bodies.
const getBodyContent = (req) => {
  return Promise.resolve().then(() => {
    if (req.method !== 'GET') {
      if (req.headers.get('Content-Type').indexOf('json') !== -1) {
        return req.json()
          .then((json) => {
            return JSON.stringify(json);
          });
      } else {
        return req.text();
      }
    }
  }).catch((error) => {
    // Ignore error.
  });
};

self.addEventListener('fetch', (event) => {
  /** @type {FetchEvent} */
  const evt = event;

  const requestProcessor = (idToken) => {
    let req = evt.request;
    let processRequestPromise = Promise.resolve();
    // For same origin https requests, append idToken to header.
    if (self.location.origin == getOriginFromUrl(evt.request.url) &&
        (self.location.protocol == 'https:' ||
         self.location.hostname == 'localhost') &&
        idToken) {
      // Clone headers as request headers are immutable.
      const headers = new Headers();
      req.headers.forEach((val, key) => {
        headers.append(key, val);
      });
      // Add ID token to header.
      headers.append('Authorization', 'Bearer ' + idToken);
      processRequestPromise = getBodyContent(req).then((body) => {
        try {
          req = new Request(req.url, {
            method: req.method,
            headers: headers,
            mode: 'same-origin',
            credentials: req.credentials,
            cache: req.cache,
            redirect: req.redirect,
            referrer: req.referrer,
            body,
            // bodyUsed: req.bodyUsed,
            // context: req.context
          });
        } catch (e) {
          // This will fail for CORS requests. We just continue with the
          // fetch caching logic below and do not pass the ID token.
        }
      });
    }
    return processRequestPromise.then(() => {
      return fetch(req);
    });
  };
  // Fetch the resource after checking for the ID token.
  // This can also be integrated with existing logic to serve cached files
  // in offline mode.
  evt.respondWith(getIdTokenPromise().then(requestProcessor, requestProcessor));
});
auth_svc_intercept.js

Web

const getOriginFromUrl = (url) => {
  // https://stackoverflow.com/questions/1420881/how-to-extract-base-url-from-a-string-in-javascript
  const pathArray = url.split('/');
  const protocol = pathArray[0];
  const host = pathArray[2];
  return protocol + '//' + host;
};

// Get underlying body if available. Works for text and json bodies.
const getBodyContent = (req) => {
  return Promise.resolve().then(() => {
    if (req.method !== 'GET') {
      if (req.headers.get('Content-Type').indexOf('json') !== -1) {
        return req.json()
          .then((json) => {
            return JSON.stringify(json);
          });
      } else {
        return req.text();
      }
    }
  }).catch((error) => {
    // Ignore error.
  });
};

self.addEventListener('fetch', (event) => {
  /** @type {FetchEvent} */
  const evt = event;

  const requestProcessor = (idToken) => {
    let req = evt.request;
    let processRequestPromise = Promise.resolve();
    // For same origin https requests, append idToken to header.
    if (self.location.origin == getOriginFromUrl(evt.request.url) &&
        (self.location.protocol == 'https:' ||
         self.location.hostname == 'localhost') &&
        idToken) {
      // Clone headers as request headers are immutable.
      const headers = new Headers();
      req.headers.forEach((val, key) => {
        headers.append(key, val);
      });
      // Add ID token to header.
      headers.append('Authorization', 'Bearer ' + idToken);
      processRequestPromise = getBodyContent(req).then((body) => {
        try {
          req = new Request(req.url, {
            method: req.method,
            headers: headers,
            mode: 'same-origin',
            credentials: req.credentials,
            cache: req.cache,
            redirect: req.redirect,
            referrer: req.referrer,
            body,
            // bodyUsed: req.bodyUsed,
            // context: req.context
          });
        } catch (e) {
          // This will fail for CORS requests. We just continue with the
          // fetch caching logic below and do not pass the ID token.
        }
      });
    }
    return processRequestPromise.then(() => {
      return fetch(req);
    });
  };
  // Fetch the resource after checking for the ID token.
  // This can also be integrated with existing logic to serve cached files
  // in offline mode.
  evt.respondWith(getIdToken().then(requestProcessor, requestProcessor));
});
service-worker-sessions.js

ด้วยเหตุนี้ คำขอที่ตรวจสอบสิทธิ์ทั้งหมดจึงจะมีโทเค็นระบุตัวตนที่ส่งในส่วนหัวเสมอโดยไม่ต้องมีการดำเนินการเพิ่มเติม

Service Worker ต้องติดตั้งในหน้าลงชื่อเข้าใช้/ลงชื่อสมัครใช้เพื่อให้ตรวจหาการเปลี่ยนแปลงสถานะการตรวจสอบสิทธิ์ได้ ตรวจสอบว่าได้รวม Service Worker ไว้แล้วเพื่อให้ยังคงทำงานต่อไปได้หลังจากที่ปิดเบราว์เซอร์

หลังจากติดตั้งแล้ว ผู้ให้บริการต้องโทรหา clients.claim() เพื่อเปิดใช้งานเพื่อให้ตั้งค่าเป็นคอนโทรลเลอร์สําหรับหน้าปัจจุบันได้

Web

self.addEventListener('activate', (event) => {
  event.waitUntil(clients.claim());
});
auth_svc_listen_activate.js

Web

self.addEventListener('activate', (event) => {
  event.waitUntil(clients.claim());
});
service-worker-sessions.js

การเปลี่ยนแปลงฝั่งไคลเอ็นต์

หากรองรับ จะต้องติดตั้ง Service Worker ฝั่งไคลเอ็นต์ในหน้าลงชื่อเข้าใช้/ลงชื่อสมัครใช้

Web

// Install servicerWorker if supported on sign-in/sign-up page.
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js', {scope: '/'});
}
auth_svc_register.js

Web

// Install servicerWorker if supported on sign-in/sign-up page.
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js', {scope: '/'});
}
service-worker-sessions.js

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

Web

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

// Sign in screen.
const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((result) => {
    // Redirect to profile page after sign-in. The service worker will detect
    // this and append the ID token to the header.
    window.location.assign('/profile');
  })
  .catch((error) => {
    // Error occurred.
  });
auth_svc_sign_in_email.js

Web

// Sign in screen.
firebase.auth().signInWithEmailAndPassword(email, password)
  .then((result) => {
    // Redirect to profile page after sign-in. The service worker will detect
    // this and append the ID token to the header.
    window.location.assign('/profile');
  })
  .catch((error) => {
    // Error occurred.
  });
service-worker-sessions.js

การเปลี่ยนแปลงฝั่งเซิร์ฟเวอร์

โค้ดฝั่งเซิร์ฟเวอร์จะตรวจหาโทเค็นระบุตัวตนในคําขอทุกรายการได้ Admin SDK สําหรับ Node.js หรือ Web SDK ที่ใช้ FirebaseServerApp รองรับลักษณะการทํางานนี้

Node.js

  // Server side code.
  const admin = require('firebase-admin');

  // The Firebase Admin SDK is used here to verify the ID token.
  admin.initializeApp();

  function getIdToken(req) {
    // Parse the injected ID token from the request header.
    const authorizationHeader = req.headers.authorization || '';
    const components = authorizationHeader.split(' ');
    return components.length > 1 ? components[1] : '';
  }

  function checkIfSignedIn(url) {
    return (req, res, next) => {
      if (req.url == url) {
        const idToken = getIdToken(req);
        // Verify the ID token using the Firebase Admin SDK.
        // User already logged in. Redirect to profile page.
        admin.auth().verifyIdToken(idToken).then((decodedClaims) => {
          // User is authenticated, user claims can be retrieved from
          // decodedClaims.
          // In this sample code, authenticated users are always redirected to
          // the profile page.
          res.redirect('/profile');
        }).catch((error) => {
          next();
        });
      } else {
        next();
      }
    };
  }

  // If a user is signed in, redirect to profile page.
  app.use(checkIfSignedIn('/'));
service-worker-sessions.js

Web Modular API

import { initializeServerApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { headers } from 'next/headers';
import { redirect } from 'next/navigation';

export default function MyServerComponent() {

    // Get relevant request headers (in Next.JS)
    const authIdToken = headers().get('Authorization')?.split('Bearer ')[1];

    // Initialize the FirebaseServerApp instance.
    const serverApp = initializeServerApp(firebaseConfig, { authIdToken });

    // Initialize Firebase Authentication using the FirebaseServerApp instance.
    const auth = getAuth(serverApp);

    if (auth.currentUser) {
        redirect('/profile');
    }

    // ...
}
firebaseserverapp.js

บทสรุป

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

แม้ว่าปัจจุบันเบราว์เซอร์หลักๆ สมัยใหม่ทั้งหมดจะรองรับ Service Worker แต่เบราว์เซอร์รุ่นเก่าบางรุ่นยังไม่รองรับ คุณจึงอาจต้องใช้กลไกสำรองบางอย่างเพื่อส่งโทเค็นระบุตัวตนไปยังเซิร์ฟเวอร์เมื่อ Service Worker ไม่พร้อมใช้งาน หรืออาจจำกัดแอปให้ทำงานในเบราว์เซอร์ที่รองรับ Service Worker เท่านั้น

โปรดทราบว่า Service Worker มีต้นทางเดียวเท่านั้นและจะติดตั้งในเว็บไซต์ที่ให้บริการผ่านการเชื่อมต่อ https หรือ localhost เท่านั้น

ดูข้อมูลเพิ่มเติมเกี่ยวกับการรองรับ Service Worker ของเบราว์เซอร์ได้ที่ caniuse.com