ペットクリニックサイト構築日誌：React × Headless Identity連携の実践ガイド

プロジェクト概要

外部WebサイトとSalesforceをシームレスに統合し、ユーザーにパスワードを意識させないモダンな登録・ログイン体験を提供する。その具体的なアプローチとして、「たてはまペットクリニック」の構築プロセスを全5回の連載としてまとめました。

本連載で構築するシステムの最大のポイントは、Salesforceを完全な「裏方（IDaaS）」として機能させ、OAuthプロトコル特有の画面遷移（リダイレクト）を排除した点にあります。B2C特有の複雑なデータ（個人取引先、ペット、予約）の生成と、OTP（ワンタイムパスワード）によるセキュアなパスワードレス認証を、1つのReactドロワー内の状態（State）管理だけで完結させています。

本連載では、React（Vite）とHeadless Identity APIを組み合わせたアーキテクチャを題材に、公式ドキュメントに記載されている事実（仕様）と、実際の開発現場で直面した推測・見解（トレードオフやハマりどころ）を分けて解説しています。

完成イメージ

React サイト

Experience Cloud サイト

動画（ログイン）

連載記事一覧

Vol.1：アーキテクチャ・要件定義編

React × Headless Identityによる体験設計の全体像です。Salesforceへの登録・ログイン処理から画面遷移を完全に排除するアーキテクチャの革新性と、フロントエンド・バックエンド間のデータモデル設計（Person Account, Pet__c, Appointment__c）におけるトレードオフを解説します。

【ペットクリニックサイト制作日誌 Vol.1】ReactとSalesforce Headless Identityで作るパスワードレス会員ポータルアーキテクチャ

外部Webサイト（React）とSalesforceを連携させた動物病院向けポータルの構築日誌。左スライドインドロワー、Headless Identityを用いたパスワードレス認証のアーキテクチャ設計と技術選定のトレードオフを解説します。

Vol.2：バックエンド・データ処理編

1トランザクションで複数オブジェクトを生成するApexハンドラーの実装です。Auth.HeadlessSelfRegistrationHandlerにおけるデータパース処理や、DML操作の落とし穴（MIXED_DML_OPERATION）、コミュニティユーザー特有のオブジェクト権限エラーの回避策を提示します。

【ペットクリニックサイト制作日誌 Vol.2】Headless Identityでの自己登録ハンドラー実装とデータ処理の最適解

SalesforceのHeadless Identityを用いたパスワードレス登録処理において、Apexハンドラーを用いて複数レコードを1トランザクションで生成する手法と、実装時の落とし穴を解説します。

Vol.3：認証・インフラ設定編

外部クライアントアプリケーション（ECA）とパスワードレス認証の設定に焦点を当てます。OAuthポリシーで「管理者が承認したユーザーは事前承認済み」を選択する理由や、最終的なUIセッション化に必須となる web スコープ設定漏れによる403エラーなど、インフラ設定特有のハマりどころを整理しています。