Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

WebアプリのアプリチェックでFirebase以外のリソースを保護する

App Checkを使用すると、自己ホスト型バックエンドなど、アプリのFirebase以外のリソースを保護できます。これを行うには、次の両方を行う必要があります。

あなたが始める前に

デフォルトのいずれかを使用して、あなたのアプリにアプリのチェックを追加reCAPTCHAのv3のプロバイダ、またはカスタムプロバイダを

バックエンドリクエストでアプリチェックトークンを送信する

アプリのクライアントでは、各要求の前に、有効なを取得し、期限が切れていない、アプリケーションがでトークンをチェックappCheck().getToken() App Checkライブラリは、必要に応じてトークンを更新します。

有効なトークンを取得したら、リクエストと一緒にバックエンドに送信します。あなたはこれを実現する方法の詳細は、あなた次第ですが、これは偶然の漏れや傍受するためにそれらが脆弱になりますよう、クエリパラメータを含め、URLの一部としてのAppチェックトークンを送信しません。次の例では、カスタムHTTPヘッダーでトークンを送信します。これは推奨されるアプローチです。

Webバージョン9

const { initializeAppCheck, getToken } = require('firebase/app-check');

const appCheck = initializeAppCheck(
    app,
    { provider: provider } // ReCaptchaV3Provider or CustomProvider
);

const callApiWithAppCheckExample = async () => {
  let appCheckTokenResponse;
  try {
      appCheckTokenResponse = await getToken(appCheck, /* forceRefresh= */ false);
  } catch (err) {
      // Handle any errors if the token was not retrieved.
      return;
  }

  // Include the App Check token with requests to your server.
  const apiResponse = await fetch('https://yourbackend.example.com/yourApiEndpoint', {
      headers: {
          'X-Firebase-AppCheck': appCheckTokenResponse.token,
      }
  });

  // Handle response from your backend.
};

Webバージョン8

const callApiWithAppCheckExample = async () => {
  let appCheckTokenResponse;
  try {
      appCheckTokenResponse = await firebase.appCheck().getToken(/* forceRefresh= */ false);
  } catch (err) {
      // Handle any errors if the token was not retrieved.
      return;
  }

  // Include the App Check token with requests to your server.
  const apiResponse = await fetch('https://yourbackend.example.com/yourApiEndpoint', {
      headers: {
          'X-Firebase-AppCheck': appCheckTokenResponse.token,
      }
  });

  // Handle response from your backend.
};