Premiers pas
Ce guide décrit les deux intégrations nécessaires pour intégrer un RealityTwin : créer une session d’embed auprès de la RealityConnect API (depuis votre back-end) et transmettre cette session au SDK (dans votre front-end). Tout ce qui est propre au SDK lui-même — détails d’installation, initialisation, surface complète des commandes et observables, codes d’erreur et bac à sable exécutable — se trouve dans le README du package @prevu3d/realityconnect-embed, qui fait référence.
Prérequis
Section intitulée « Prérequis »Avant de commencer, assurez-vous de disposer de :
- Un forfait Enterprise avec RealityConnect Embed activé dans les paramètres de Sécurité de votre organisation.
- Une application OAuth RealityConnect API utilisant le flux Client Credentials. Si vous n’en avez pas encore configuré, suivez d’abord le guide Flux Client Credentials.
- L’ID du jumeau que vous souhaitez intégrer.
- Un accès en lecture au dépôt GitHub privé
prevu3d/realityconnect-embedpour le compte qui installera le SDK. L’accès est accordé manuellement par client sur demande — contactez votre Customer Success Manager (CSM) avec les noms d’utilisateur GitHub qui ont besoin d’un accès, et Prevu3D les ajoutera au dépôt. La visibilité du package sur GitHub Packages suit la visibilité du dépôt : un PATread:packagesseul ne suffit donc pas — l’accès au dépôt est également requis.
Comment cela s’assemble
Section intitulée « Comment cela s’assemble »À un niveau élevé, une session d’embed se déroule ainsi :
- Votre back-end s’authentifie auprès de la RealityConnect API et appelle
create-sessionpour un jumeau spécifique. L’API renvoie des jetons et des URL. - Votre back-end transmet les valeurs utilisables côté navigateur (l’access token, l’URL frontend et l’URL régionale de l’API) à votre front-end.
- Votre front-end transmet ces valeurs au SDK, qui injecte l’iframe et ouvre un canal bidirectionnel avec le jumeau.
- Avant l’expiration du jeton courant, votre back-end appelle
refresh-sessionet retransmet les nouvelles valeurs au front-end.
Votre client secret OAuth ne doit jamais parvenir au navigateur — seul votre back-end l’utilise.
Étape 1 : Créer une session d’embed (back-end)
Section intitulée « Étape 1 : Créer une session d’embed (back-end) »La gestion des sessions d’embed réutilise la RealityConnect API. Authentifiez-vous avec le flux Client Credentials exactement comme décrit dans le guide Flux Client Credentials, puis appelez les deux opérations de session d’embed sur le jumeau :
| Opération | Objectif |
|---|---|
POST {apiUrl}/twin/{twinId}/create-session | Démarre une session. Renvoie accessToken, refreshToken, frontendUrl et apiUrl. |
POST {apiUrl}/twin/{twinId}/refresh-session | Échange un refreshToken (envoyé dans le corps) contre un nouvel accessToken et un nouveau refreshToken. |
Les deux appels utilisent le jeton bearer issu du flux Client Credentials dans l’en-tête Authorization. Consultez la référence interactive de l’API pour les chemins et schémas exacts.
Étape 2 : Installer le SDK (front-end)
Section intitulée « Étape 2 : Installer le SDK (front-end) »Une fois que votre compte GitHub a obtenu l’accès (voir Prérequis), installez le SDK depuis le registre npm privé GitHub Packages sous le nom @prevu3d/realityconnect-embed. Le README du SDK documente de bout en bout la configuration unique du .npmrc et du Personal Access Token.
Étape 3 : Transmettre la session au SDK
Section intitulée « Étape 3 : Transmettre la session au SDK »Transmettez les champs de la réponse create-session de votre back-end à votre front-end et associez-les à la configuration du SDK :
Champ create-session | Config du SDK | Notes |
|---|---|---|
frontendUrl | iframeUrl | Ajoutez la route d’embed et l’ID du jumeau : `${frontendUrl}/embed/${twinId}`. |
apiUrl | backendUrl | La base d’API régionale à laquelle l’embed s’adresse. |
accessToken | platformJWT | Le jeton de session signé avec lequel l’embed s’authentifie. |
À partir de là, suivez le README du SDK pour installer le package, initialiser le visualiseur et piloter le jumeau.
Étape 4 : Maintenir la session active
Section intitulée « Étape 4 : Maintenir la session active »Les sessions d’embed sont de courte durée — l’accessToken renvoyé par create-session expire au bout d’un certain temps. Pour maintenir le jumeau en fonctionnement au-delà de cette fenêtre, rafraîchissez la session depuis votre back-end et transmettez le nouveau jeton d’accès au SDK en cours d’exécution — inutile de recréer l’iframe.
Un schéma courant :
-
Sur le back-end, exposez un endpoint qui lit le
refreshTokenstocké pour le jumeau de l’utilisateur courant, appellerefresh-session, persiste le nouveaurefreshTokenet renvoie le nouvelaccessToken(et les autres champs de session) au navigateur. -
Sur le front-end, planifiez un rafraîchissement peu avant l’expiration du jeton courant.
-
Lorsque la nouvelle session arrive, transmettez le nouveau jeton d’accès au SDK en cours d’exécution en appelant
twin.updateAccessToken(newAccessToken):await twin.updateAccessToken(newAccessToken);Le jumeau transmet le nouveau JWT lors de sa prochaine requête back-end — les abonnements ouverts, l’état de la caméra et le workflow chargé sont tous préservés. L’appel renvoie
trueen cas d’acceptation etfalseen cas de rejet (également signalé viaonError) ; l’appeler avant le déclenchement deonReadylèveRealityConnectEmbedError('TWIN_NOT_READY').
La stratégie de planification exacte (minuteur fixe avant l’expiration, à l’activité de l’utilisateur, au changement de visibilité de l’onglet, etc.) dépend de votre application.
Points à connaître
Section intitulée « Points à connaître »- Votre page possède l’interface. L’embed est un visualiseur nu — construisez vos propres contrôles et reliez-les aux commandes du SDK. Consultez l’Introduction pour savoir ce que l’embed inclut et n’inclut pas.
- Conservez les identifiants côté serveur. Demandez et rafraîchissez les sessions uniquement depuis votre back-end.
- Les sessions expirent. Prévoyez le rafraîchissement du jeton dans le cadre de votre intégration.
- Paramètres Enterprise et Sécurité. L’embed ne se charge que lorsqu’il est activé pour votre organisation.
Référence du SDK
Section intitulée « Référence du SDK »Le package @prevu3d/realityconnect-embed constitue la référence complète pour travailler avec le SDK. Lisez son README pour :
- La configuration complète du
.npmrcet du Personal Access Token pour le registre privé GitHub Packages - La référence de configuration
RealityConnectEmbed.init(config) - Les actions et observables d’état de chaque namespace (navigation, objets, POI, POV, utilitaires)
- Le flux d’encodage de vue de la caméra pour les liens partageables
- Tous les codes d’erreur documentés et les conditions de leur déclenchement
- Un bac à sable exécutable que vous pouvez pointer vers un jumeau en direct pour explorer la surface des commandes
Prochaines étapes
Section intitulée « Prochaines étapes »- Introduction : vue d’ensemble des capacités.
- Flux Client Credentials : l’authentification sur laquelle repose ce guide.
- Référence interactive de l’API : le catalogue complet de la RealityConnect API.
- Exemple en direct sur GitHub : une intégration Vue.js fonctionnelle que vous pouvez copier.
@prevu3d/realityconnect-embed: dépôt des sources