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

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

Firebase 驗證可讓您使用服務工作人員偵測及傳遞 Firebase ID 權杖，以進行工作階段管理。這項機制有以下好處：

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

總覽

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 Auth 提供更傳統的以 Cookie 為基礎的會期管理解決方案，但這個解決方案最適合以伺服器端 httpOnly Cookie 為基礎的應用程式，而且管理起來較為困難，因為用戶端權杖和伺服器端權杖可能會失去同步，特別是當您也需要使用其他以用戶端為基礎的 Firebase 服務時。

不過，服務工作人員可用於管理伺服器端耗用的使用者工作階段。這項功能運作的原理如下：

服務工作人員可以存取目前的 Firebase Auth 狀態。目前的使用者 ID 權杖可從服務工作人員擷取。如果權杖已過期，用戶端 SDK 會重新整理並傳回新權杖。
服務工作人員可以攔截擷取要求並加以修改。

Service Worker 變更

如果使用者已登入，服務工作人員必須包含 Auth 程式庫，並具備取得目前 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 權杖，並進行驗證和處理。在服務工作人員指令碼中，系統會攔截並修改擷取要求。

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。請務必將 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

使用者登入並重新導向至其他頁面時，服務工作人員會在重新導向完成前，將 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 或 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 模組化 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 權杖會透過服務工作人員設定，而服務工作人員只能從相同來源執行，因此不會有 CSRF 風險，因為嘗試呼叫端點的不同來源網站無法叫用服務工作人員，導致要求從伺服器角度來看會顯示為未經驗證。

雖然所有新式主要瀏覽器現在都支援 Service Worker，但部分舊版瀏覽器不支援。因此，如果服務工作人員無法使用，或應用程式只能在支援服務工作人員的瀏覽器上執行，可能需要一些備援措施，才能將 ID 權杖傳遞至伺服器。

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

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

實用連結

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

透過服務工作站管理工作階段 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

總覽

Web

Web