Identifier les utilisateurs connectés dans Messenger Notiondesk

Notiondesk Messenger peut identifier les utilisateurs connectés à votre application.

L'identification utilise un jeton utilisateur éphémère généré par votre serveur. Votre interface utilisateur transmet ce jeton au SDK Messenger Notiondesk lors de l'initialisation de Messenger.

Cela empêche l'exposition des informations d'identification sensibles dans le code du navigateur.

Avant de commencer

Vous avez besoin de :

• Messagerie Notiondesk installée avec le paquet @notiondesk-so/messenger-js-sdk

• L'authentification est déjà implémentée dans votre application.

• Un backend capable de générer un jeton utilisateur Notiondesk

• Votre secret d'application Notiondesk

Ne jamais exposer votre secret d'application Notiondesk dans le JavaScript frontend, les composants React, les variables d'environnement envoyées au navigateur ou les dépôts publics.

Comment fonctionne l'identification des utilisateurs

Le flux d'authentification est le suivant :

1. Un utilisateur se connecte à votre application

2. Votre interface utilisateur demande un jeton utilisateur Notiondesk à votre serveur.

3. Votre serveur signe un jeton éphémère pour cet utilisateur authentifié.

4. Votre serveur renvoie le jeton signé au navigateur

5. Votre site web ou application transmet le jeton à Messenger Notiondesk

6. Messenger reconnaît le visiteur comme l'utilisateur correspondant

Votre serveur doit déterminer l'identité de l'utilisateur à partir de la session d'application authentifiée. Ne vous fiez pas à un identifiant utilisateur fourni directement par le navigateur.

Étape 1 : Créer un secret d’application

Allez dans Paramètres → Accès dans Notiondesk et créez un secret d'application.

Stockez le secret dans une variable d'environnement côté serveur, par exemple :

NOTIONDESK_APP_SECRET

Le code secret de l'application n'est affiché qu'une seule fois, lors de sa création. Copiez-le et conservez-le en lieu sûr dès son apparition.

Vous pouvez gérer et faire tourner vos secrets d'application depuis Paramètres → Accès .

N'ajoutez jamais le secret de l'application à :

• JavaScript côté client

• Composants clients React ou Vue

• variables de l'environnement public

• Packs de navigateurs

• dépôts publics

Étape 2 : Signez un jeton utilisateur sur votre serveur.

Générez le jeton utilisateur depuis votre serveur après que votre application a authentifié l'utilisateur actuel.

Les jetons utilisateur Notiondesk utilisent HS256 et doivent contenir les revendications suivantes :

Utilisez user_id comme identifiant utilisateur. N'utilisez pas sub à la place de user_id.

Vous pouvez également fournir des informations sur l'utilisateur telles que :

• email

• name

Utilisez des jetons à durée de vie courte et générez-les uniquement sur votre serveur.

Notiondesk fournit des exemples de signature spécifiques à chaque langage dans votre configuration Messenger, notamment pour Node.js, Python, PHP et Ruby. Utilisez l'exemple fourni dans votre tableau de bord Notiondesk plutôt que de signer les jetons directement dans le code du navigateur.

Étape 3 : Transmettez le jeton à Messenger

Une fois que votre serveur a généré le jeton, transmettez-le à votre installation Messenger.

Installation standard du site Web

Si vous avez installé Messenger à l'aide du script standard, fournissez le jeton signé avec data-user-token :

Remplacer:

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

• YOUR_MESSENGER_ID avec votre identifiant Messenger

• YOUR_SIGNED_TOKEN avec le jeton généré par votre serveur pour l'utilisateur actuel

N’intégrez pas en dur le jeton d’un utilisateur dans un modèle de site web statique. Le jeton doit être généré pour l’utilisateur authentifié.

Kit de développement logiciel (SDK) JavaScript/TypeScript

Récupérez le jeton signé depuis votre serveur et transmettez-le à initNotiondesk :

Le point de terminaison /api/notiondesk-token est un exemple. Utilisez la route backend correspondant à votre application.

React et Next.js

Transmettez le jeton signé à NotiondeskProvider :

Le jeton peut être récupéré depuis votre serveur une fois l'utilisateur authentifié.

Le secret d'application Notiondesk ne doit jamais être accessible au composant client.

Étape 4 : Valider le jeton

Avant la mise en ligne, utilisez l'outil de validation de jeton disponible dans votre configuration Messenger Notiondesk.

Collez le jeton que votre serveur vient de générer.

Notiondesk vérifie le jeton par rapport à vos secrets d'application actifs et affiche les informations utilisateur que Messenger peut lire à partir de celui-ci.

Le jeton utilisé pour la validation est vérifié mais non stocké.

La validation est utile pour détecter :

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>

• Réclamations requises manquantes

• Un user_id incorrect

• Un site_uuid incorrect

• Jetons expirés

• Jetons signés avec le mauvais secret

• Signatures invalides

Actualiser un jeton utilisateur

Les jetons utilisateur doivent avoir une durée de vie courte.

Si votre application reçoit un jeton actualisé alors que Messenger est déjà initialisé, mettez à jour la configuration de Messenger :

Vous n'avez pas besoin de créer une autre instance de Messenger uniquement pour mettre à jour le jeton utilisateur.

Gérer la déconnexion

Effacer l'utilisateur identifié lorsqu'une personne se déconnecte de votre application.

Vous pouvez supprimer le jeton actuel :

Ou supprimez complètement l'instance Messenger :

Assurez-vous que l'identité de l'utilisateur précédent soit effacée avant qu'un autre utilisateur ne démarre une session sur le même navigateur.

Messenger est réservé aux utilisateurs authentifiés.

Identifier un utilisateur et décider si Messenger doit être disponible sont deux choses distinctes.

Si Messenger ne doit se charger que pour les utilisateurs connectés, conservez cette vérification d'autorisation au sein de votre application.

Par exemple, avec React :

L'utilisation de Messenger anonyme peut rester activée si votre service d'assistance doit être accessible à la fois aux visiteurs et aux clients connectés.

meilleures pratiques de sécurité

Lors de l'identification des utilisateurs dans Notiondesk Messenger :

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

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

notiondesk.destroy();

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

• Conservez le secret de votre application sur le serveur

• Signez les jetons uniquement sur votre serveur.

• Utilisez HS256

• Inclure toutes les réclamations requises

• Déterminez user_id à partir de votre session authentifiée côté serveur

• Limitez la durée de vie des jetons

• Ne jamais intégrer en dur les jetons d'utilisateur dans le code frontend

• Actualiser les jetons lorsque nécessaire

• Effacer le jeton actuel lorsqu'un utilisateur se déconnecte

• Changez votre clé secrète d'application si vous pensez qu'elle a été divulguée.

Dépannage

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