Symphony Messaging Dev Docs
Developer CertificationREST API
  • Start Your Developer Journey
  • Bots
    • Building Bots
    • Planning Your Bot
      • Conversational Bot
      • Interactive Bot
      • Headless Bot
    • Getting Started
      • Getting Started with BDK
      • Creating a Service Account
      • Configuration
      • Truststores
    • Overview of REST API
      • REST API Architecture
      • Overview of Pod API
      • Overview of Key Manager API
      • Overview of Agent API
      • Bot Permissions
      • REST API Reference
    • Authentication
      • RSA Authentication Workflow
      • Certificate Authentication Workflow
    • Datafeed
      • Real-Time Events
      • Overview of Streams
    • Messages
      • MessageML
        • MessageML Basics
          • Content Grouping
          • Text formatting and semantics
          • Tables
          • Images
          • Tags and mentions
            • Enhanced tags notice
          • Style Attributes
          • Special Characters
          • Emojis
        • Elements Interactive Forms
          • Buttons
            • Icon set for Buttons
          • Text Field
          • Masked Text Field
          • Text Area
          • Checkbox
          • Radio Button
          • Dropdown Menu
          • Person Selector
          • Room Selector
          • Date Picker
          • Time Picker
          • Timezone Picker
          • Table Select
          • Regular Expressions - Regex
        • Extensibility UI Actions
          • OpenChat
          • Dialog
        • Entities
          • Standard Entities
          • Custom Entities
      • PresentationML
    • Bots Best Practices
    • Open Source Code Samples
  • Extension Apps
    • Building Extension Apps
    • Planning Your App
    • Getting Started
      • Getting Started with ADK
      • Application Manifest Bundle
      • Add an Extension App to a Symphony Pod
    • Overview of Extension API
      • Initialization
      • Register and Connect
      • Extension API Services
        • Service Interface
        • Register and Subscribe
        • Modules Service
        • Entity Service
          • Entity Advanced Templating
          • Message Format - ExtensionML
        • Applications-Nav Service
        • Share Service
        • Commerce Service
        • Dialogs Service
        • UI Service
          • Receiving Conversation and User Information
          • Filter Function
    • App Authentication
      • Circle of Trust Authentication
      • OBO Authentication
  • Developer Tools
    • Symphony Messaging Generator
    • Bot Developer Kit for Java
      • Build a Conversational Bot
      • Build an Interactive Bot
      • Build a Headless Bot
      • Integrate a Bot with an Identity Provider
    • Bot Developer Kit for Python
    • App Developer Kit
      • Build a Basic Extension App
      • Build an Extension App with App Views
        • Add Buttons and Handlers to an Extension App
        • Add BDK to an Extension App for Circle of Trust
      • Build an Extension App with Message Renderers
    • Postman
    • UI Style Guide
      • Colors
      • Form Elements
      • Buttons
  • Embedded Modules
    • Symphony Messaging URI
      • Symphony Messaging URI for Mobile (deprecated)
    • Desktop interoperability
      • FDC3 intents
        • Message format
      • Configuration guide
        • Configure Interop.io
        • Configure Here Core
        • Configure Finsemble
        • Configure with Embedded Mode
        • Troubleshooting
      • Change log
    • Embedded Mode
      • Get started
      • Configuration parameters
      • Open a chat
      • Send a message
      • Create a room
      • Pin a message
      • Notifications
      • Support for extension applications
      • Open an app
      • Embedded Mode with Sponsored Access
      • Pricing tiers
      • Logout
    • Universal Webhook
      • User guide
        • Example with Splunk
      • Installation guide
  • Symphony REST API
    • Messaging REST API
    • Federation
    • Sponsored Access API
    • Enhanced Directory API
  • Developer Certification
    • Developer Certification
  • Mobile Frameworks
    • Blackberry
    • MobileIron
  • Admin Guides
    • Change Logs
      • API Agent
        • Agent - 25.3 (LTS)
        • Agent - 24.12 (LTS)
        • Agent - 24.9 (LTS)
        • Agent - 24.6 (LTS)
        • Archives
          • Agent - 24.11
          • Agent - 24.10
          • Agent - 23.9 (LTS)
          • Agent - 24.8
          • Agent - 24.3 (LTS)
          • Agent - 24.2
          • Agent - 24.1
          • Agent - 23.12 (LTS)
          • Agent - 23.11
          • Agent - 23.10
          • Agent - 23.7
          • Agent - 23.6 (LTS)
          • Agent - 23.4
          • Agent - 23.3 (LTS)
          • Agent - 23.1
          • Agent - 22.12 (LTS)
          • Agent - 22.11
          • Agent - 22.10
          • Agent - 22.9 (LTS)
          • Agent - 22.8
          • Agent - 22.7
          • Agent - 22.6 (LTS)
          • Agent - 20.14
          • Agent - 20.13
          • Agent - 20.12
          • Agent - 20.10
          • Agent - 20.9 (2.62)
          • Agent - 20.7 (2.61)
          • Agent - 20.6 (2.60)
          • Agent - 20.5 (2.59)
          • Agent - 20.4 (2.58)
      • SBE (Pod API)
        • SBE - 24.1
        • SBE - 20.16
        • SBE - 20.15
        • Archives
          • SBE - 20.14
          • SBE - 20.13
          • SBE - 20.12
          • SBE - 20.10
          • SBE - 20.9 (1.62)
          • SBE - 20.7 (1.61)
          • SBE - 20.6 (1.60)
          • SBE - 20.5 (1.59)
          • SBE - 20.4 (1.58)
      • Client 2.0 APIs
        • Client 2.0 - 25.05
        • Client 2.0 - 25.03
        • Client 2.0 - 24.12
        • Client 2.0 - 24.05
        • Client 2.0 - 23.02
        • Client 2.0 - 22.11
        • Archives
          • Client 2.0 - 20.4
          • Client 2.0 - 20.5
          • Client 2.0 - 20.6
          • Client 2.0 - 20.7
          • Client 2.0 - 20.9
          • Client 2.0 - 20.10
          • Client 2.0 - 20.12
          • Client 2.0 - 22.8
          • Client 2.0 - 22.10
      • Universal Webhook
        • Univ Webhook - 2.6
        • Univ Webhook - 2.4
        • Univ Webhook - 2.2
        • Univ Webhook - 2.1
        • Univ Webhook - 2.0
    • API Change Management
    • Global Throttling
    • Agent Guide
      • Network Topology
      • Agent Download
      • Agent Installation
      • Agent Configuration Fields
      • Agent Server High Availability
      • Agent Performance Tuning
Powered by GitBook
On this page
  • Prerequisites
  • User Identity
  • Create BDK Project
  • Configuration
  • Start Backend
  • Build ADK App
  • Start the App
  • Load the App in Symphony Messaging
  • Test the App

Was this helpful?

Export as PDF
  1. Developer Tools
  2. App Developer Kit
  3. Build an Extension App with App Views

Add BDK to an Extension App for Circle of Trust

Last updated 1 month ago

Was this helpful?

Prerequisites

Complete the previous guide on building an extension app with app views

Complete the first part of this guide with the assistance of your pod administrator, ensuring that your app has the Primary User Identity and Trust application permissions.

This guide will use a shared extension app entry that is available for everyone to use on the . The app id is localhost-4000 and the RSA private key can be downloaded from . This entry expects that the app is hosted on https://localhost:4000 with the entrypoint controller.html at the root.

User Identity

In order to obtain identity information of the current user, an extension app needs to perform an authentication call and validation loop as part of the . This requires a backend service to call so as to secure the required private key. You can choose to manually create your own REST API client and link the endpoint contracts to the ADK configuration, but this guide will demonstrate how to use BDK to ease the process.

Create BDK Project

$ yo @finos/symphony
 __   __     ___                 _
 \ \ / /__  / __|_  _ _ __  _ __| |_  ___ _ _ _  _
  \ V / _ \ \__ \ || | '  \| '_ \ ' \/ _ \ ' \ || |
   |_|\___/ |___/\_, |_|_|_| .__/_||_\___/_||_\_, |
                 |__/      |_|                |__/

Welcome to Symphony Generator v2.8.0
Project files will be generated in folder: /home/user/code/bdk-ext-app
______________________________________________________________________________________________________
? Enter your pod host develop2.symphony.com
? Enter your bot username my-bot
? Select your project type Extension App (BDK)
? Select your programing language Java
? Enter your app id localhost-4000
? Select your build system Maven
? Enter your project artifactId bot-application
? Enter your base package com.mycompany.bot

Configuration

As we won't be using the bot components, we can remove configuration relating to bots. We will also remove the TLS configuration as we will use ADK to host the frontend app instead. We also need to expand the CORS configuration as our frontend will make a cross-origin call to this backend in development mode (modify as appropriately for production).

src/main/resources/application.yaml
bdk:
  host: develop2.symphony.com
  app:
    appId: localhost-4000
    privateKey:
      path: rsa/privatekey.pem

bdk-app:
  auth:
    enabled: true
  cors:
    "[/**]":
      allowed-origins: "*"
      allowed-headers: "*"
      allowed-credentials: false
      allowed-methods: [ "POST", "GET" ]

Start Backend

Either launch the BDK project from your IDE or use the respective maven or gradle command:

# Maven
./mvnw spring-boot:run

# Gradle
./gradlew bootRun

Build ADK App

Modify the index.js or index.ts file from the earlier ADK project to be as follows:

index.ts
import * as ADK from '@symphony-ui/adk';

const backendUri = 'http://localhost:8080/bdk/v1/app';

const headers = {
  'Accept': 'application/json',
  'Content-Type': 'application/json'
};

const getAppToken = () => fetch(`${backendUri}/auth`, { method: 'POST' })
  .then(r => r.json())
  .then(r => r.appToken);

const validateAppToken = (appToken: string, symphonyToken: string) =>
  fetch(`${backendUri}/tokens`, { method: 'POST', body: JSON.stringify({ appToken, symphonyToken }), headers })
    .then(r => null);

const validateJwt = (jwt: string) =>
  fetch(`${backendUri}/jwt`, { method: 'POST', body: JSON.stringify({ jwt }), headers })
    .then(r => r.json());

const config : ADK.SymphonyAppDescriptor = {
  id: 'localhost-4000',
  circleOfTrust: { getAppToken, validateAppToken, validateJwt },
};

ADK.start(config).then(() => {
  ADK.navigation.add('My App', () => ADK.modules.open('view-a', { title: 'Hello' }));
});

Note that we previously only supplied id to the ADK.start call but we now supply an additioinal circleOfTrust object in that configuration. This object has 3 properties that each return a promise.

  • getAppToken: calls the backend to perform app authentication and retrieve the token

  • validateAppToken: calls the backend to perform token validation

  • validateJwt: calls the backend to perform JWT validation

Now that the app is authenticated, we can fetch user identity from either the controller or views. Let's edit the existing view to be as follows:

views/view-a.tsx
import * as React from 'react';
import * as ADKReact from '@symphony-ui/adk-react';
import * as ADK from '@symphony-ui/adk';
import { useEffect, useState } from 'react';
import './view-a.css';

const ViewA = () => {
  const [ user, setUser ] = useState<ADK.UserJwt>();

  useEffect(() => {
    ADK.user.getUserInfo().then(response => setUser(response));
  }, []);

  return (
    <div className="main-view">
      <main>
        { user && (
          <div>
            <strong>User</strong>: {user.displayName} ({user.emailAddress})
          </div>
        )}
      </main>
    </div>
  );
};

ADKReact.createView(<ViewA />, { id: 'localhost-4000' });

Start the App

We can now start the app using:

npm start

Load the App in Symphony Messaging

Instead of performing bundle injection as before, load Symphony Messaging normally now. Once Symphony Messaging is loaded, open the Marketplace using the left rail. Locate your App and install it. If you are using the developer sandbox, the app's name is Localhost 4000.

Test the App

Once the app is installed, you should notice a new app appears in the Apps section labelled as My App. If you launch the app, it opens a module showing the view, which contains your display name and email.

If you are using your own extension app id and key, change the values as appropriate. If you are using the developer sandbox, download into rsa/privatekey.pem.

ADK takes care of adherence to the so you only need to define these contracts to allow ADK to perform the required backend calls.

Build an Extension App with App Views
Add an Extension App to a Symphony Pod
developer sandbox
this location
Circle of Trust process
Symphony Messaging REST APIs
this key
Circle of Trust process