VisualforceからFirebase認証を呼び出す実装手順

なぜVisualforceからFirebase認証を呼ぶのか

Salesforceの外部（Experience Cloudのゲストページなど）で、Salesforceのユーザーアカウントを持たない人にログイン機能を提供したいときがあります。Firebase Authenticationは、そのログイン処理だけをSalesforceの外へ切り出す手段です。ここではVisualforceページの中でJavaScriptからFirebaseを呼び、ブラウザだけでユーザー登録とログインを行います。Apexからのコールアウトではありません。

Firebaseプロジェクトを用意する

1. Firebaseプロジェクトを作成する

   GoogleアカウントでFirebase Consoleを開き、プロジェクトを作成します。

2. ウェブアプリを登録する

   「プロジェクトの概要」から「アプリを登録」を選び、アプリのニックネームを入力します。登録するとfirebaseConfigが発行されます。

3. Authenticationでメール・パスワードを有効にする

   「Authentication」の「Sign-in method」タブを開き、「メール/パスワード」を有効にして保存します。ここを飛ばすと、登録・ログインの呼び出しがauth/operation-not-allowedエラーになります。

SDKをVisualforceページで読み込む

以前の記事で使っていた<apex:includeScript value="https://www.gstatic.com/firebasejs/...">は、現在のCSPでは通りません。Salesforceの信頼済みURL（Trusted URLs）はconnect-src・font-src・frame-src・img-src・media-src・style-srcの6つのディレクティブしか選べず、外部JavaScriptの読み込みを許可するscript-srcの項目がありません。外部サイトのJavaScriptライブラリを使うときの公式の案内も「静的リソースに追加してから使う」という形です。

1. Firebase SDKを静的リソースとしてアップロードする

   firebase-app-compat.jsとfirebase-auth-compat.jsをダウンロードし、Salesforceの静的リソースとしてそれぞれアップロードします。VisualforceはES ModulesのCDN読み込みを前提にしていないため、グローバル変数firebaseを公開する compat 版を使います。

2. 信頼済みURLにFirebaseの通信先を追加する

   SDK自体は静的リソースから読み込みますが、認証処理は実行時にFirebaseのサーバーへ通信します。設定から「信頼済みURL」を開き、https://identitytoolkit.googleapis.comとhttps://securetoken.googleapis.comを、コンテキスト「Visualforceページ」・ディレクティブconnect-srcで追加します。

⚠️ compat版はFirebase側が「移行期間のためのつなぎ」と位置づけている形式です。新規にモジュール型（v9以降のimport形式）で書ける環境なら、そちらが公式の推奨です。Visualforceで手軽に使える形として、この記事ではcompat版を使います。

Visualforceページとコード

FirebasePage.page

<apex:page
  sidebar="false"
  showHeader="false"
  standardStylesheets="false"
  applyHtmlTag="false"
  applyBodyTag="false"
  docType="html-5.0"
>
  <html>
    <apex:includeScript value="{!URLFOR($Resource.FirebaseAppCompat)}" />
    <apex:includeScript value="{!URLFOR($Resource.FirebaseAuthCompat)}" />
    <body>
      <script>
        const firebaseConfig = {
          apiKey: "AIzaSyXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          authDomain: "example-project.firebaseapp.com",
          projectId: "example-project",
          storageBucket: "example-project.appspot.com",
          messagingSenderId: "123456394807",
          appId: "1:000000000000:web:xxxxxxxxxxxxxxxx"
        };
        const app = firebase.initializeApp(firebaseConfig);
        const email = "xxxxxxxx@example.com";
        const password = "xxxxxxxx";
        firebase.auth().createUserWithEmailAndPassword(email, password)
          .then((cred) => { console.log(cred.user.uid); })
          .catch((error) => { console.log(error.code); });
        firebase.auth().signInWithEmailAndPassword(email, password)
          .then((cred) => { console.log(cred.user.uid); })
          .catch((error) => { console.log(error.code); });
      </script>
    </body>
  </html>
</apex:page>

Visualforceページ全体です。登録とログインの呼び出しをまとめて書いています。

measurementIdはAnalytics用の項目なので、認証だけを使うこの構成では省いています。

設定値の置き場所

firebaseConfigはページに直書きしても情報が漏れる心配はありませんが、開発用と本番用でFirebaseプロジェクトを分けると、切り替えのたびにページを編集してデプロイすることになります。カスタムメタデータ型にprojectIdやapiKeyなどの項目を持つレコードを作り、Visualforceの数式で埋め込むと、値の切り替えだけで済みます。Named Credential・External Credentialは、サーバー側で秘密情報を保護する仕組みなので、ブラウザで完結するこの構成では出番がありません。

動作確認

1. Visualforceページを開く

   作成したページのURLへアクセスします。

2. コンソールログを確認する

   登録・ログインそれぞれの結果として、ユーザーのuidがログに出力されることを確認します。

3. Firebase ConsoleでUsersを確認する

   「Authentication」の「Users」タブに、指定したメールアドレスのユーザーが追加されていることを確認します。

ここで間違えやすい

確認した環境

• 2026年9月／Salesforce Summer '26（APIバージョン67.0）時点のhelp.salesforce.comとdeveloper.salesforce.comの公式ドキュメントで、信頼済みURLのディレクティブと静的リソースの扱いを確認しています
• Firebase側はfirebase.google.comの公式ドキュメントで、APIキーの位置づけとメール/パスワード認証の有効化手順を確認しています

まとめ

• VisualforceからのFirebase認証はブラウザ内のJavaScript呼び出しで、Apexのコールアウトではありません
• Authenticationでメール/パスワードのサインイン方法を先に有効にします
• 外部JavaScriptの読み込みは信頼済みURLのscript-src非対応により通らないため、SDKは静的リソースとしてアップロードします
• SDKの実行時通信先（identitytoolkit.googleapis.com等）は信頼済みURLのconnect-srcに追加します
• apiKeyは公開前提の値です。データを守るのはセキュリティルールとサインイン方法の設定です