# JWT経由でimpact.comのマイクロサイトにSSOを設定する

アドボケイト（Advocate）プログラムのマイクロサイトでは通常、顧客アドボケイトが共有リンクや報酬の詳細にアクセスする前にユーザー名とパスワードでサインアップする必要があります。ただし、上級者向けの代替手段として、サーバー側で生成した [JSON Web Token (JWT)](https://en.wikipedia.org/wiki/JSON_Web_Token) をマイクロサイトにURLパラメータとして渡して認証することもできます。

この方法を使用すると、参加者はマイクロサイト用のログイン資格情報を持ちません。代わりに、既存の顧客ポータルにログインすると、そのポータルがJWTを使用して参加者を識別し、パーソナライズされたコンテンツを表示するためにマイクロサイトにリダイレクトします。

#### 開始前に

{% hint style="warning" %}
**重要：** これはマイクロサイトの標準的なManaged Identity Serviceをバイパスする上級実装であり、設定には開発チームのサポートが必要です。
{% endhint %}

次のすべてが当てはまる場合にのみこの方法を使用してください：

* 参加者をプログラムのマイクロサイトに自動的にログインさせることでシングルサインオン（SSO）の体験をシミュレートしたい。
* サーバー側でJWTを生成できる。
* あなたのサイトに [Universal Tracking Tag (UTT)](https://help.impact.com/brand/ja/nitsuitebitaidesuka/platform-features/tracking/javascript-tag-tracking/tracking-with-universal-tracking-tag-utt) をインストールできない、またはしたくない。

{% stepper %}
{% step %}

### ステップ1：Managed Identityを無効にしてマイクロサイトを作成する

マイクロサイトを作成する際に、Managed Identity Serviceをオフにし、すべてのページを「未確認（unverified）」ユーザーがアクセスできるように設定する必要があります。ページはJWTを使用してユーザーを認証し、マイクロサイトを読み込みます。 *ダッシュボード* ページはJWTを使用してユーザーを認証し、マイクロサイトを読み込みます。

<details>

<summary>マイクロサイトを作成する</summary>

まず、設定を調整して *Participant Login* オプションをオフにします。

1. 左側のナビゲーションメニューから選択します ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fh35M3mMIl7XP42pqh7Ls%2Fimage.png?alt=media\&token=bf6b6ba2-295c-4cdb-8c77-f171416c13e1) **\[Engage]** **→ コンテンツ**.
2. の *Microsite* カードで、を選択します **設定を編集**.
3. その後、新しい *Microsite Settings* ページにリダイレクトされます。
4. の中で、 *Login* セクションで、 ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-2c3a3c392d640f7b79d44c16f21c2c4f0ec3dcca%2F80381ca112cfb2757e97b8669cc0b5c98c8ce8d60ed9e3048b4a86a52e76719f.svg?alt=media) **［オフに切替］** **Participant Login**.
5. を組み合わせるのは避ける） **設定を保存**.

</details>

<details>

<summary>ダッシュボードページを構成する</summary>

次に、マイクロサイトのページを未確認ユーザーに見えるように構成します。その後、ページ上のコンポーネントをリファラルプログラムに接続して、正しい情報が表示されるようにします。 *ダッシュボード* ページを未確認ユーザーに見えるように構成します。その後、ページ上のコンポーネントをリファラルプログラムに接続して、正しい情報が表示されるようにします。

1. サイトの *ダッシュボード* ページ設定を調整します。
   * 左側のナビゲーションメニューから選択します ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F8AYI7cAhXQWYRoQlKHte%2Fimage.png?alt=media\&token=d2b5a01e-c7b4-4a71-a6a0-0cea5a4b7ac4) **\[Engage]** **→ コンテンツ** → **コンテンツを設定** または **コンテンツを編集**.
   * から *Microsite* タブで、を選択します **ダッシュボード** にある *Logged In Layout* セクション。
   * を組み合わせるのは避ける） ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c746d936c908b9090325464502f7c10acda0e993%2F2a92939e8e78dd7e0c0416b1a250d5ef1d7ab0dec966fb5ed320ca62acfc06c5.svg?alt=media) **［メニュー］→設定**.
   * から *許可されたユーザー* ドロップダウンリストで、を選択します **Unverified**.
2. マイクロサイト上のコンポーネントにプログラムIDを追加します。 *ダッシュボード*.
   * ユーザースタッツ — 表示する各個別のユーザースタッツにIDを追加する必要があります。
   * 共有リンク
   * 紹介コード
   * ソーシャルメディアボタン — 含める各ソーシャルメディア共有ボタンにIDを追加する必要があります。
3. 右上隅で、を選択します **保存**.

   <div data-with-frame="true"><figure><img src="https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-7314ab2d13689a218d7b2ab0ff0ae784aecc169d%2Fe489a23c2242c41439531bebcaa74a7caac8de79b22b4e423c11194933156962.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

エディタを使用してページやコンポーネントの設定を見つけて調整する方法については、参照してください [マイクロサイトエディタの説明](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsite-editor-explained) および [マイクロサイトのレイアウト＆ページをカスタマイズする](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages).

</details>

<details>

<summary>不要なページを削除する</summary>

マイクロサイトで使用しないレイアウトとページを削除します。

1. ページまたはレイアウトにカーソルを合わせます。
2. を組み合わせるのは避ける） ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-8ec3e877b1397045c61d394485e72ac4d93120ee%2Fc6ddb46c637059f06e86c790a911217a9428f5c47b5efef046f90555e85b03cd.svg?alt=media) **［その他］** **→ 削除**.
3. 次のを削除します： *Logged In Layout*.
4. 次のページを削除します：
   * プロフィール編集
   * メール確認
   * パスワードを忘れた場合
   * Login
   * ログアウト
   * 登録
   * パスワードをリセット
   * メールを確認

</details>
{% endstep %}

{% step %}

### ステップ2：JWTを生成する

JWTの構造はユーザー認証に関する標準的なAdvocate要件に従います。以前にAdvocateを統合している場合、UTT向けに類似のトークンをすでに生成している可能性があります。

JWTはブラウザではなく、サーバーまたは信頼できるバックエンドシステムで安全に生成する必要があります。

について学ぶ [JWTの生成方法とペイロード要件](https://integrations.impact.com/impact-brand/docs/json-web-tokens).
{% endstep %}

{% step %}

### ステップ3：JWTをマイクロサイトのURLに追加する

ユーザーがあなたのプラットフォームにログインしたら、JWTをURLクエリ文字列に含めてマイクロサイトにリダイレクトします。

{% hint style="info" %}
**例：** `https://your-microsite.squatch.app/?jwt=<YOUR_GENERATED_JWT>`
{% endhint %}

マイクロサイトを新しいブラウザタブで開くか、iframeを使用してアプリに埋め込むことができます。マイクロサイトを埋め込む場合は、 [クロスオリジンリソース共有 (CORS)](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) およびブラウザ制限を適切に処理してください。
{% endstep %}
{% endstepper %}

#### 注意事項

* この認証方法を使用すると、ユーザーはマイクロサイト用のログイン資格情報を持ちません。
* JWTベースのアクセスは厳重に管理する必要があります。クライアント側のJavaScriptで公開したり操作したりしないでください。
* これは非標準のアプローチです — 本番展開前にステージング環境で徹底的にテストしてください。
* サポートが必要な場合 [サポート](mailto:saasquatch-support@impact.com)には、マイクロサイトのURL、実装の詳細、およびサンプルJWTペイロードをサポートリクエストに含めてください。
