本頁面由 Cloud Translation API 翻譯而成。

透過服務工作站管理工作階段

Firebase 驗證可讓服務工作站偵測及傳遞 Firebase ID 符記，以進行工作階段管理。這麼做有以下好處：

能夠在伺服器的每個 HTTP 要求中傳遞 ID 權杖，無須進行額外工作。
可重新整理 ID 權杖，不需要任何其他往返或延遲時間。
後端和前端同步處理工作階段。如果應用程式需要存取 Firebase 服務 (例如即時資料庫、Firestore 等)，以及某些外部伺服器端資源 (SQL 資料庫等)，就可以使用這項解決方案。此外，您也可以透過 Service Worker、網路工作站或共用工作站存取相同的工作階段。
您不需要在每個頁面中加入 Firebase 驗證原始碼，可縮短延遲時間。載入及初始化一次 Service Worker 後，會在背景處理所有用戶端的工作階段管理。

總覽

Firebase Auth 經過最佳化，可在用戶端執行。權杖會儲存在網站儲存空間中。如此一來，也能輕鬆與其他 Firebase 服務整合，例如即時資料庫、Cloud Firestore、Cloud Storage 等。如要從伺服器端管理工作階段，系統必須擷取 ID 權杖並傳送至伺服器。

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

不過，這表示某些指令碼必須從用戶端執行，才能取得最新的 ID 權杖，然後透過要求標頭、POST 主體等傳遞至伺服器。

這種做法可能無法擴充，也可能需要伺服器端工作階段 Cookie。 ID 符記可設為工作階段 Cookie，但這類 Cookie 的效期很短，且需要從用戶端重新整理並設為到期時設為新 Cookie。如果使用者有一段時間未造訪該網站，可能需要額外往返時間。

雖然 Firebase 驗證提供了較為傳統的以 Cookie 為基礎的工作階段管理解決方案，但此解決方案最適合伺服器端 httpOnly Cookie 型應用程式，且更難管理，因為用戶端權杖和伺服器端權杖可能會無法同步，尤其是如果您還需要使用其他用戶端型 Firebase 服務時。

相反地，服務工作站可用於管理使用者工作階段，以便處理伺服器端用量。系統提供這個功能的原因如下：

Service Worker 可存取目前的 Firebase 驗證狀態。您可以從 Service Worker 擷取目前的使用者 ID 權杖。如果權杖已過期，用戶端 SDK 會重新整理並傳回新的權杖。
服務工作處理程序可以攔截及修改擷取要求。

Service Worker 異動

Service Worker 需要包含驗證程式庫，以及在使用者登入後取得目前 ID 權杖的能力。

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

系統會攔截傳送至應用程式來源的所有擷取要求，如果有 ID 權杖，則會透過標頭附加至要求。伺服器端會檢查要求標頭，確認是否含有 ID 權杖，並經過驗證和處理。在 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

因此，所有已驗證的要求一律會在標頭中傳遞 ID 符記，而不會進行額外處理。

為了讓 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 就能在重新導向完成前，將 ID 權杖插入標頭。

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

伺服器端變更

伺服器端程式碼將能偵測每次請求的 ID 權杖。Node.js 適用的 Admin SDK 或使用 FirebaseServerApp 的 Web SDK 支援這個行為。

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

網頁模組 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

結論

此外，由於 ID 權杖會透過 Service Worker 設定，且服務工作站只能從相同來源執行，因此 CSRF 不會有 CSRF 的風險，因為以不同來源的網站嘗試呼叫您的端點時，無法叫用 Service Worker，導致從伺服器的角度來看，要求顯示為未經驗證。

雖然所有新式主要瀏覽器現在都支援 Service Worker，但有些舊版瀏覽器並不支援這類瀏覽器。因此，當無法使用 Service Worker，或者應用程式只能在支援服務工作站的瀏覽器上執行時，您可能需要某些備用機制，將 ID 權杖傳送至伺服器。

請注意，Service Worker 只有單一來源，且只會安裝在透過 https 連線或 localhost 提供的網站上。

如要進一步瞭解 Service Worker 的瀏覽器支援，請前往 caniuse.com。

實用連結

如要進一步瞭解如何使用服務工作站管理工作階段，請查看 GitHub 上的範例應用程式原始碼。
您可以在 https://auth-service-worker.appspot.com 找到上述已部署的範例應用程式。