Notiondesk Messenger にログインしているユーザーを識別する

Messenger は、アプリケーションにサインインしているユーザーを識別できます。

認証には、バックエンドで生成された有効期限の短いユーザートークンが使用されます。フロントエンドは、Messengerが初期化される際に、このトークンをNotiondesk Messenger SDKに渡します。

これにより、機密性の高い認証情報がブラウザのコード内に漏洩するのを防ぎます。

始める前に

必要なもの：

• Notiondesk Messenger は @notiondesk-so/messenger-js-sdk パッケージと共にインストールされました

• 認証は既にアプリケーションに実装されています

• Notiondesk ユーザートークンを生成できるバックエンド

• あなたのNotiondeskアプリシークレット

Notiondesk アプリシークレットをフロントエンドの JavaScript、React コンポーネント、ブラウザに渡される環境変数、または公開リポジトリに公開しないでください。

ユーザー認証の仕組み

認証フローは以下のとおりです。

1. ユーザーがアプリケーションにサインインします

2. フロントエンドはバックエンドからNotiondeskユーザートークンを要求します。

3. バックエンドは、認証されたユーザーに対して有効期限の短いトークンに署名します。

4. バックエンドは署名済みトークンをブラウザに返します

5. あなたのウェブサイトまたはアプリケーションはトークンをNotiondesk Messengerに渡します

6. Messengerは訪問者を対応するユーザーとして認識します

バックエンドは、認証済みのアプリケーションセッションからユーザーの身元を特定する必要があります。ブラウザから直接提供されるユーザーIDを信頼しないでください。

ステップ1：アプリシークレットを作成する

設定 → アクセスNotiondesk に移動し、アプリシークレットを作成します。

秘密情報をサーバー側の環境変数に保存します。例：

NOTIONDESK_APP_SECRET

アプリシークレットは作成時に一度だけ表示されます。表示されたらコピーして安全な場所に保管してください。

設定 → アクセスからアプリのシークレットを管理およびローテーションできます。

アプリシークレットを絶対に追加しないでください:

• フロントエンドJavaScript

• ReactまたはVueのクライアントコンポーネント

• 公共環境変数

• ブラウザバンドル

• 公開リポジトリ

ステップ2：バックエンドでユーザートークンに署名する

アプリケーションが現在のユーザーの認証を完了した後、バックエンドからユーザートークンを生成してください。

Notiondesk ユーザー トークンはHS256を使用し、以下のクレームを含める必要があります。

ユーザー識別子にはuser_idを使用してください。user_idの代わりにsubを使用しないでください。

また、以下のようなユーザー情報を提供することもできます。

• email

• name

トークンの有効期限は短くし、サーバー上でのみ生成するようにしてください。

Notiondesk は、Node.js、Python、PHP、Ruby などの言語に対応した、Messenger 設定における言語固有の署名例を提供します。ブラウザ コードでトークンに署名するのではなく、Notiondesk ダッシュボードで提供されている例を使用してください。

ステップ3：トークンをメッセンジャーに渡す

バックエンドでトークンが生成されたら、それをMessengerのインストール先に渡してください。

標準的なウェブサイトのインストール

Messengerを標準スクリプトを使用してインストールした場合は、data-user-token 付きの署名済みトークンを提供してください。

交換する：

<script
  async
  src="https://static.notiondesk.help/messenger/widget.js"
  data-messenger-id="YOUR_MESSENGER_ID"
  data-user-token="YOUR_SIGNED_TOKEN">
</script>

• メッセンジャーIDでYOUR_MESSENGER_ID

• YOUR_SIGNED_TOKEN には、現在のユーザー用にバックエンドで生成されたトークンが含まれます。

静的ウェブサイトテンプレートにユーザーのトークンをハードコーディングしないでください。トークンは現在認証されているユーザー用に生成されるべきです。

JavaScript / TypeScript SDK

バックエンドから署名済みトークンを取得し、initNotiondeskに渡します。

/api/notiondesk-tokenエンドポイントは一例です。ご使用のアプリケーションに合ったバックエンドルートを使用してください。

ReactとNext.js

署名済みトークンをNotiondeskProviderに渡します。

トークンは、ユーザー認証後にバックエンドから取得できます。

Notiondesk アプリケーションシークレットは、クライアントコンポーネントに決して公開してはなりません。

ステップ4：トークンを検証する

公開する前に、Notiondesk Messenger の設定で利用できるトークン検証ツールを使用してください。

バックエンドで生成されたトークンを貼り付けてください。

Notiondesk は、トークンをアクティブなアプリシークレットと照合し、Messenger がそこから読み取ることができるユーザー情報を表示します。

検証に使用されるトークンはチェックされますが、保存されません。

検証は、以下の検出に役立ちます。

import { initNotiondesk } from "@notiondesk-so/messenger-js-sdk";

const userToken = await fetch("/api/notiondesk-token").then((response) =>
  response.ok ? response.text() : null,
);

const notiondesk = await initNotiondesk({
  messengerId: "YOUR_MESSENGER_ID",
  userToken,
});

<NotiondeskProvider
  messengerId="YOUR_MESSENGER_ID"
  userToken={userToken}
>
  {children}
</NotiondeskProvider>

• 必要な請求が漏れています

• 誤った user_id

• 誤った site_uuid

• 有効期限切れのトークン

• トークンが誤った秘密鍵で署名されています

• 無効な署名

ユーザートークンを更新する

ユーザートークンの有効期限は短くすべきである。

Messengerが既に初期化されている状態でアプリケーションが更新トークンを受信した場合は、Messengerの設定を更新してください。

ユーザートークンを更新するためだけに、別のメッセンジャーインスタンスを作成する必要はありません。

ログアウトを処理する

ユーザーがアプリケーションからログアウトした際に、識別されたユーザーをクリアしてください。

現在のトークンを削除できます。

または、Messengerインスタンスを完全に削除します。

別のユーザーが同じブラウザでセッションを開始する前に、前のユーザーの身元がクリアされていることを確認してください。

認証済みユーザーのみメッセンジャーをロード

ユーザーを特定することと、メッセンジャーを利用可能にするかどうかを判断することは、別々の問題である。

Messengerをログイン済みのユーザーのみに読み込ませたい場合は、権限チェックをアプリケーション内部で行ってください。

例えば、Reactの場合：

匿名メッセージ機能の使用は、サポート体験を訪問者とログイン済みの顧客の両方に提供する必要がある場合は、有効のままにしておくことができます。

セキュリティのベストプラクティス

Notiondesk Messengerでユーザーを識別する場合：

notiondesk.updateConfig({
  userToken: refreshedUserToken,
});

notiondesk.updateConfig({
  userToken: null,
});

notiondesk.destroy();

<NotiondeskProvider
  messengerId="YOUR_MESSENGER_ID"
  enabled={currentUser.isAuthenticated}
  userToken={userToken}
>
  {children}
</NotiondeskProvider>

• アプリの情報をサーバー上で秘密に保つ

• トークンへの署名はバックエンドでのみ行ってください。

• HS256を使用する

• 必要な請求事項をすべて含める

• 認証済みのサーバー側セッションからuser_idを特定してください。

• トークンの有効期限を短くする

• ユーザー トークンをフロントエンド コードにハードコーディングしないでください。

• 必要に応じてトークンを更新してください

• ユーザーがログアウトしたときに現在のトークンをクリアする

• アプリシークレットが漏洩したと思われる場合は、アプリシークレットを更新してください。

トラブルシューティング

notiondesk.updateConfig({
  userToken: null,
});