技術

【設定編】Salesforce の Experience Cloud サイトと Okta（Auth0）の連携

Salesforce の Experience Cloud サイトと Okta（Auth0）の連携

レザボア・コンサルティングの中西です。
今回は、「設定編」と「動作確認編」の２記事に分けて、Salesforce の Experience Cloud サイト と Okta（Auth0）の連携について紹介します。

本記事は設定手順の紹介です。
設定後の実際の動作については、「動作確認編」の記事をご参照ください。

Experience Cloud の概要

Salesforce では、Experience Cloud という、社外向けのWebサイトを構築することのできるサービスがあります。

※本記事では、Experience Cloud のサービスの詳細については割愛します。下記リンクをご参照ください。

（参考）Salesforce公式ヘルプ：Experience Cloud

Auth0 の概要

Auth0は誰でも簡単に導入できる認証・認可プラットフォームです。
（引用: Auth0ホームページ）

Auth0 は IDaaS（Identity as a Service）のサービスを提供する会社であり、さまざまなアプリケーションに対して容易にユーザー認証・認可の仕組みを組み込むことができます。

2021年にOktaによって買収され、OktaのID管理サービスの一角を担う重要な製品となっています。
Oktaホームページ：Okta + Auth0
Oktaホームページ：［抄訳］Okta、Auth0の買収を完了

Auth0 は OAuth 1.0/2.0やOpenID Connectといった一般的な認証・認可の方式に対応しており、ユーザーストアの設定、多要素認証を含む各種認証などさまざまな設定に対応しています。

サンプルのソースコードも多く提供されている上、既存のアプリケーションに組み込む際の手順も提示してくれます。連携時の設定が比較的容易に行えるためのサポートが非常に整っている製品です。

blog-salesforce-with-auth0-01
blog-salesforce-with-auth0-02

Salesforce と Auth0 の連携

Experience Cloud で社外のユーザ（以下、外部ユーザ と言います）をSalesforce内でID管理する際は、通常は Customer Community, Cutomer Community Plus といったライセンス/プロファイルを利用します。

このように、外部ユーザをSalesforceのExperienceサイトの用意するログイン/ユーザ登録画面から、Salesforceの認証の仕組みでユーザを管理する方法がよく採用されているように思います。

一方、本記事で紹介するように Okta の外部向けのIdentity管理のサービスである 「Auth0」 を利用する場合は、External Identity ライセンスを利用してユーザを登録・管理します。

この場合は、Experienceサイトのログイン画面での認証はAuth0に任せ、ログイン後にExperienceサイトのコンテンツを利用することになります。

Experience Cloud と Auth0 の連携手順

連携手順については、Salesforce の公式ヘルプに記載があります。

（参考：Salesforce公式ヘルプ）例: Experience Cloud サイトと Auth0 とのインテグレーション

しかし、公式ヘルプの手順は簡潔に書かれており、ヘルプ内の様々な他のリンクも参照しながら進める必要があり、非常に難易度が高く感じることでしょう。

前提/事前準備

  • Auth0 の無料トライアルに申し込み、管理画面にアクセス可能な状態を前提とします。
  • Auth0 と連携させたい、Experience Cloud サイトが用意されている前提とします。

手順：Auth0の設定 Part1

  1. アプリケーションの作成
    • メニュー > Applications > Applications > Create Application
    • アプリケーション名は任意の名前で構いません
    • 「Regular Web Applications」 を選択してください

blog-salesforce-with-auth0-03

  1. Settings タブにて、必要な情報をメモ
    • (a.) Cliend ID
    • (b.) Client Secret
    • 画面をスクロール > Advanced Settings > Endpoints タブ
      • (c.) OAuth Authorization URL
      • (d.) OAuth Token URL
      • (e.) OAuth User Info URL

blog-salesforce-with-auth0-04
blog-salesforce-with-auth0-05

これらは後でSalesforce側での設定で利用します。

手順：Salesforceの設定

  1. Apexクラスの作成

例: Experience Cloud サイトと Auth0 とのインテグレーション の「登録ハンドラクラスの生成」の章に記載のApexクラスを作成します。

疎通・動作確認のみ行う目的であれば、クラス名・コードは全く同じで構いません。

全く同じコード（2023/01現在）を以下にも記載します。

  1. 認証プロバイダの設定
  • 設定 > 「認証」で検索 > 認証プロバイダ を開く
  • 新規 ボタン > Open Id Connect を選択

blog-salesforce-with-auth0-06

  • 以下のように値を入力し、保存
    • 名前： Auth0
    • URL 接尾辞： Auth0
    • コンシューマ鍵：Auth0の設定でメモした (a.) Cliend ID
    • コンシューマの秘密： Auth0の設定でメモした (b.) Client Secret
    • 承認エンドポイント URL： Auth0の設定でメモした (c.) OAuth Authorization URL
    • トークンエンドポイント URL： Auth0の設定でメモした (d.) OAuth Token URL
    • ユーザ情報エンドポイント URL： Auth0の設定でメモした (e.) OAuth User Info URL
    • 登録ハンドラ： 手順3 で登録したApexクラスを指定
    • 他のアカウントで登録を実行： 任意のユーザを指定

blog-salesforce-with-auth0-07

保存後、「Experience Cloud サイト」 に表示される、Auth0連携したいサイトの 「コールバック URL」 をメモしておきます。

blog-salesforce-with-auth0-08

  1. サイトの認証設定
  • 設定 > デジタルエクスペリエンス > すべてのサイト > Auth0連携したいサイト > ワークスペース
  • 管理 > メニュー > メンバー にて、選択済みプロファイルに 「External Identity User」 を追加し、保存

blog-salesforce-with-auth0-09

  • 管理 > メニュー > ログイン&登録 > ログインページ設定の章
    • 「Auth0」にチェックを入れる
    • 「*** ユーザ名およびパスワード」 のチェックを外す

blog-salesforce-with-auth0-10

※それぞれのメニューで、保存を忘れないようにしてください。

手順：Auth0の設定 Part2

  1. コールバックURLの設定
  • メニュー > Applications > Applications > 作成したアプリケーション > Settings タブ
    • Allowed Callback URLs に、手順4 でメモしたコールバックURLを指定

blog-salesforce-with-auth0-11

  1. ログイン画面のカスタマイズ
  • メニュー > Branding > Universal Login > Advanced Options
  • Login タブ > Customize Login Page をON

blog-salesforce-with-auth0-12

HTMLを以下のように編集し、保存します。

<!-- 中略 -->
    defaultADUsernameFromEmailPrefix: false,
    additionalSignUpFields: [
        {
            name: "family_name ",
            placeholder: "名前（姓）を入力してください",
            storage: "root"
        },
        {
            name: "given_name",
            placeholder: "名前（名）を入力してください",
        storage: "root"
        }
    ]
});
<!-- 中略 -->

引数の json への追記のため、直前の要素の末尾にカンマを追加し忘れないようにご注意ください。

おわりに

設定編は以上となります。

一部でコーディングは発生するものの、少ない設定であっという間に連携の設定を終えることができたのではないでしょうか。

続編の 「動作確認編」 では、本記事で設定した内容で実際にどのようにユーザが管理されるのかについて紹介します。

「動作確認編」 の記事
【動作確認編】Salesforce の Experience Cloud サイトと Okta（Auth0）の連携

関連記事

TOP