DEV Community: Luigi Bianchi

Building Seamless Communication: Integrating VirtualFront with Microsoft Teams via Azure Communication Services (ACS)

Luigi Bianchi — Mon, 07 Apr 2025 06:51:31 +0000

The VirtualFront project is a production-grade Single Page Application (SPA) that integrates Microsoft Teams and Azure Communication Services (ACS) to enable video calling, PSTN integration, and secure authentication via Azure Active Directory (AAD). This article provides a comprehensive analysis of the source code, including architecture, project structure, integration steps, and deployment considerations.

Introduction
High-Level Architecture
Detailed Project Structure
Key Components
Integration Steps
Code Snippets and Token Flow
API Endpoints
Technologies Used
Future Enhancements
Conclusion

Introduction

VirtualFront is a modern web application designed to act as a virtual receptionist system. It connects a browser-based SPA with Microsoft Teams users via ACS, making it ideal for kiosk-based solutions, front-desk automation, and remote concierge systems.

Key Features:

One-click video calls to Microsoft Teams users.
Token exchange using Azure AD and ACS.
PSTN calling support (dialing out to phone numbers).
Scalable backend built with Node.js and Express.
Frontend powered by Vanilla JavaScript and ACS SDK.

High-Level Architecture

The architecture of VirtualFront is modular, with a clear separation between the frontend, backend, and Azure services. Below is a high-level diagram:

Workflow:

The Frontend communicates with the Backend to request ACS tokens.
The Backend authenticates users via Azure AD, exchanges tokens, and provides the frontend with call credentials.
The Azure Services (ACS, AAD, Graph API) handle authentication, token management, and communication.

Detailed Project Structure

The project is organized into the following directories and files:

.
├── client/                      # Frontend SPA (HTML, JS, CSS)
│   ├── assets/                  # Static assets (images, styles)
│   ├── app.js                   # Main application logic
│   └── call.js                  # ACS call logic
│
├── constants/                   # Common constants (enums, labels)
│   └── roles.js
│
├── controllers/                 # Express route controllers
│   ├── token.controller.js      # Token management (ACS, AAD)
│   ├── user.controller.js       # Teams users & endpoint APIs
│   └── pstn.controller.js       # PSTN token and phone services
│
├── public/                      # Static public directory
│   └── index.html
│
├── routes/                      # API route definitions
│   ├── token.routes.js
│   ├── user.routes.js
│   └── pstn.routes.js
│
├── services/                    # Service layer for Azure SDK calls
│   ├── acs.service.js
│   ├── auth.service.js
│   └── teams.service.js
│
├── utils/                       # Utility helpers
│   ├── logger.js
│   └── environment.js
│
├── .env                         # Environment variables
├── index.js                     # Express server entry
├── package.json                 # Node dependencies
├── webpack.config.js            # Frontend bundling
└── README.md                    # Project documentation

Key Components

1. Frontend

The frontend is implemented in Vanilla JavaScript and interacts with the Azure Communication Services SDK to manage video calls and UI interactions.

Code Snippet: Initializing the Teams Call Agent

import { CallClient } from '@azure/communication-calling';

const callClient = new CallClient();
const callAgent = await callClient.createCallAgent({ userId: '<user-id>' });

callAgent.on('incomingCall', (call) => {
  console.log('Incoming call:', call);
  call.accept();
});

2. Backend

The backend is built using Node.js and Express. It provides APIs for fetching access tokens, validating tokens, and serving the SPA.

Code Snippet: Fetching Access Tokens

const { getAccessToken } = require('../services/auth.service');

exports.getAccessToken = async (req, res) => {
  const { email, token } = req.body;
  const accessToken = await getAccessToken(email, token);
  res.json({ accessToken });
};

3. Services

The services directory contains the core business logic for interacting with Azure SDKs.

Code Snippet: Fetching ACS Token for Teams User

const { CommunicationIdentityClient } = require('@azure/communication-identity');

exports.getAcsToken = async (aadToken, clientId, userId, tenantId) => {
  const client = new CommunicationIdentityClient(process.env.ACS_CONNECTION_STRING);
  const tokenResponse = await client.getTokenForTeamsUser({
    teamsUserAadToken: aadToken,
    clientId,
    userObjectId: userId,
    tenantId,
  });
  return tokenResponse.token;
};

Integration Steps

1. Provision Azure Communication Services (ACS)

Create a Communication Services resource in Azure.
Copy the connection string.
Enable PSTN (optional).

2. Register an Azure AD Application

Create App Registration in Azure AD.
Configure:
- Redirect URIs (if needed)
- Client ID, Tenant ID, Client Secret
Add Microsoft Graph API permissions:
- User.Read
- Directory.Read.All

3. Enable ACS Federation in Microsoft Teams

Install-Module MicrosoftTeams
Connect-MicrosoftTeams

$resourceId = "<ACS_RESOURCE_ID>"
Set-CsTeamsAcsFederationConfiguration -EnableAcsUsers $true -AllowedAcsResources $resourceId

Set-CsExternalAccessPolicy -Identity Global -EnableAcsFederationAccess $true

4. Configure Environment Variables

Create a .env file in the root directory:

ACS_CONNECTION_STRING=endpoint=https://<your-acs-resource>.communication.azure.com/;accesskey=<your-access-key>
AAD_CLIENT_ID=<your-client-id>
AAD_TENANT_ID=<your-tenant-id>
AAD_SECRET=<your-client-secret>
TEAMS_USER_ID=<your-teams-user-id>

Code Snippets and Token Flow

Backend: Exchange AAD Token for ACS Token

const { CommunicationIdentityClient } = require('@azure/communication-identity');

const client = new CommunicationIdentityClient(process.env.ACS_CONNECTION_STRING);
const tokenResponse = await client.getTokenForTeamsUser({
  teamsUserAadToken: aadToken,
  clientId: process.env.AAD_CLIENT_ID,
  userObjectId: userId,
  tenantId: process.env.AAD_TENANT_ID,
});
return tokenResponse.token;

Frontend: Initiate Call to Teams

import { CallClient } from '@azure/communication-calling';

const callClient = new CallClient();
const tokenCredential = new AzureCommunicationTokenCredential("<acs-token>");
const callAgent = await callClient.createCallAgent(tokenCredential);

callAgent.startCall([
  { communicationUserId: "8:acs:..." }
], { videoOptions: { localVideoStreams: [] } });

API Endpoints

`POST /get-access-token`

Fetches an ACS token for Teams users.

`POST /get-pstn-token`

Fetches a PSTN token for phone calls.

`GET /endpoint`

Fetches the REST API endpoint for the current environment.

Technologies Used

Frontend: Vanilla JavaScript, Webpack, ACS Calling SDK
Backend: Node.js, Express, Azure SDK
Identity: Azure AD, Microsoft Graph
Cloud: Azure Communication Services

Future Enhancements

Add support for group calls and chat features.
Implement a CI/CD pipeline for automated deployments.
Enhance error handling and logging mechanisms.
Add an admin panel for managing Teams users.

Conclusion

VirtualFront demonstrates how to build a secure and scalable communication platform by integrating Microsoft Teams and Azure Communication Services. By leveraging Azure's robust APIs and SDKs, developers can create seamless communication experiences for various use cases, such as virtual receptionists, kiosks, and remote concierge systems.

For more information, refer to:

Curious to see it in action? Explore the complete implementation and code on GitHub:

luigbi / MSTeams-CommunicationService-SPA-Integration

VirtualFront: Seamless Communication with Microsoft Teams via Azure Communication Services (ACS)

VirtualFront is a production-grade Single Page Application (SPA) that integrates Microsoft Teams and Azure Communication Services (ACS) to enable video calling, PSTN integration, and secure authentication via Azure Active Directory (AAD). This repository contains the source code and setup instructions to get started.

🚀 Features

One-click video calls to Microsoft Teams users.
Token exchange using Azure AD and ACS.
PSTN calling support (dialing out to phone numbers).
Scalable backend built with Node.js and Express.
Frontend powered by Vanilla JavaScript and ACS SDK.

📂 Project Structure


├── client/                      # Frontend SPA (HTML, JS, CSS)
│   ├── assets/                  # Static assets (images, styles)
│   ├── app.js                   # Main application logic
│   └── call.js                  # ACS call logic
│
├── constants/                   # Common constants (enums, labels)
│   └── roles.js
│
├── controllers/                 # Express route controllers
│   ├── token.controller.js      # Token

…

View on GitHub

Job Scheduler with Quartz.NET and Azure WebJobs

Luigi Bianchi — Wed, 02 Apr 2025 00:25:57 +0000

This article explores a .NET-based job scheduler built using the Quartz.NET library and hosted as a continuous Azure WebJob. The scheduler dynamically retrieves job definitions from a database via a REST API, loads them into a shared Quartz scheduler, and executes each schedule independently in its own thread. Schedules can be triggered daily, weekly, or monthly using CRON expressions, making it a flexible and scalable solution for automated task management in the cloud.

Introduction

In modern cloud-based applications, scheduling recurring tasks is a common requirement. Whether it's running daily reports, weekly data syncs, or monthly maintenance jobs, a reliable scheduler is essential. This implementation leverages Quartz.NET, a powerful open-source scheduling library, and integrates it with Azure WebJobs for seamless deployment and execution in the Azure cloud. The scheduler fetches job definitions from a database through a REST API, allowing for dynamic configuration without redeploying the application. Each schedule runs in its own thread, ensuring independent execution, and can be triggered based on daily, weekly, or monthly CRON patterns.

Code Structure and Key Components

The application is composed of several key components, each responsible for a specific aspect of the scheduling process. Below is a breakdown of the main parts:

1. Main Entry Point (Program.cs)

The application starts in Program.cs, where the host is configured, and the Quartz scheduler is initialized.

Key Methods:

SetConfiguration(HostBuilder builder)

Configures the hosting environment, WebJobs extensions, logging, and dependency injection.
- Environment: Sets the environment (e.g., "development") based on the YOUR_ENVIRONMENT variable.
- WebJobs Configuration: Adds support for EventHubs, Timers, Azure Storage Queues, and Blobs.
```
builder.ConfigureWebJobs((context, b) =>
{
    b.AddEventHubs();
    b.AddTimers();
    b.AddAzureStorageQueues(a => { a.BatchSize = 1; /* ... */ });
    b.AddAzureStorageBlobs();
});
```
- Logging: Configures logging with a minimum level of Debug and console output, with optional Application Insights integration.
- Services: Registers services like IRestAPIClient, ISchedulerListener, and IBackgroundJob using .NET Core’s dependency injection.
- Quartz Setup: Configures Quartz with an in-memory store, a thread pool (max concurrency of 10), and a scheduler name ("MyScheduler").
```
services.AddQuartz(q =>
{
    q.SchedulerName = "MyScheduler";
    q.UseInMemoryStore();
    q.UseDefaultThreadPool(tp => { tp.MaxConcurrency = 10; });
});
```
InitializeScheduler(HostBuilder builder)

Builds the host, retrieves services, and starts the scheduler.
- Fetches schedules from the REST API using IRestAPIClient.
- Adds a scheduler listener (ISchedulerListener) and starts the Quartz scheduler.
- Iterates through the schedules and calls AddOrUpdateSchedule to load them into the scheduler.
```
var schedules = await restAPI.FetchSchedulesAsync();
foreach (var schedule in schedules)
{
    await myBackgroundJob.AddOrUpdateSchedule(schedule);
}
await host.RunAsync();
```

2. REST API Client (RestAPIClient.cs)

The RestAPIClient class handles communication with the REST API to fetch job schedules and execute jobs.

Key Methods:

Authenticate()

Authenticates with the API using a username and password from the configuration, returning a bearer token.

string jsonRequestBody = JsonConvert.SerializeObject(new Dictionary<string, string>
{
    { "UserName", _config["RESTAPI_USERNAME"] },
    { "Password", _config["RESTAPI_PASSWORD"] }
});

FetchSchedulesAsync()

Retrieves a list of JobScheduleDTO objects from the API using the bearer token.

HttpResponseMessage getResponse = await client.GetAsync(endpoint);
List<JobScheduleDTO> response = JsonConvert.DeserializeObject<List<JobScheduleDTO>>(responseBody);

RunJobs(long scheduleId)

Triggers the execution of jobs for a specific schedule via a POST request to the API.

3. Scheduler Listener (MySchedulerListener.cs)

The MySchedulerListener class implements Quartz’s ISchedulerListener interface to monitor and log scheduler events (e.g., job added, paused, or errors).

Each method logs the event using the injected ILogger.

public Task JobAdded(IJobDetail jobDetail, CancellationToken cancellationToken = default)
{
    _logger.LogInformation($"JobAdded:{jobDetail.Key.Name} \n ID: {jobDetail.Key.Group}");
    return Task.CompletedTask;
}

4. Background Job (BackgroundJob.cs)

The BackgroundJob class implements IBackgroundJob and contains the logic for executing jobs and managing schedules.

Key Methods:

Execute(IJobExecutionContext context)

Executes a job when triggered by Quartz.
- Retrieves job data from the context and logs the execution.
- Calls the REST API to run jobs for the schedule.
code
```
await _restAPI.RunJobs(int.Parse(context.JobDetail.Key.Name));
```

AddOrUpdateSchedule(JobScheduleDTO schedule)

Adds or updates a schedule in the Quartz scheduler.

CRON Expression Generation: Constructs a CRON expression based on the schedule’s recurrence type:

Daily: 0 [Minutes] [Hours] * * ?
Weekly: 0 [Minutes] [Hours] ? * [Days] * (e.g., MON,TUE).
Monthly: 0 [Minutes] [Hours] [DayOfMonth] * ? *.

code

if (schedule.RecurrenceType == 1) // Daily
{
    cronSchedule += " " + schedule.StartTime.GetValueOrDefault().Minutes.ToString();
    cronSchedule += " " + schedule.StartTime.GetValueOrDefault().Hours.ToString();
    cronSchedule += " * * ?";
}

Job and Trigger Creation: Creates a Quartz job and trigger with the CRON expression.

var job = JobBuilder.Create<BackgroundJob>()
    .WithIdentity(name: schedule.Id.ToString(), group: "JOB_" + schedule.ClientId.ToString())
    .Build();

var trigger = TriggerBuilder.Create()
    .WithIdentity(name: "TRIGGER_" + schedule.Id.ToString(), group: "TRIGGER_" + schedule.ClientId.ToString())
    .WithCronSchedule(cronSchedule, x => x.InTimeZone(TimeZoneInfo.Utc))
    .StartNow()
    .Build();

Scheduling Logic: Reschedules, schedules, or deletes a job based on its definition in the database.

5. Queue Trigger (Functions.cs)

The Functions class contains a static method to handle dynamic schedule updates via Azure Storage Queues.

ProcessQueueMessage

Triggered by a queue message, deserializes it into a JobScheduleDTO, and calls AddOrUpdateSchedule.

JobScheduleDTO jobScheduleDTO = JsonConvert.DeserializeObject<JobScheduleDTO>(myQueueItem);
await myBackgroundJob.AddOrUpdateSchedule(jobScheduleDTO);

How It Works

1. Startup

The application starts in Main(), configures the host, and initializes the scheduler.
Services like IRestAPIClient and IBackgroundJob are registered via dependency injection.

2. Schedule Loading:

The RestAPIClient fetches job schedules from the REST API.
Each schedule is passed to AddOrUpdateSchedule, which generates a CRON expression and creates a Quartz job and trigger.

3. Execution:

Quartz triggers jobs based on their CRON schedules.
The BackgroundJob.Execute method runs, invoking the REST API to execute the jobs.

4. Dynamic Updates:

Queue messages trigger the ProcessQueueMessage function, allowing real-time schedule updates.

5. Concurrency:

Each schedule runs in its own thread, managed by Quartz’s thread pool (max 10 concurrent threads).

Key Features

Azure WebJobs: Ensures the scheduler runs continuously in Azure, providing reliability and scalability.
Quartz.NET: Offers robust scheduling capabilities with CRON-based triggers for daily, weekly, or monthly jobs.
REST API Integration: Dynamically fetches schedules from a database, decoupling configuration from code.
CRON Expressions: Flexibly defines recurrence patterns based on schedule properties.
Threading: Independent execution of schedules in separate threads, controlled by Quartz.

Conclusion

This implementation demonstrates a scalable and maintainable scheduler built with Quartz.NET and hosted as an Azure WebJob. By integrating with a REST API for dynamic schedule management and supporting various recurrence patterns via CRON expressions, it provides a flexible solution for automated job scheduling in the cloud. The use of Azure Storage Queues for real-time updates and comprehensive logging further enhances its adaptability and observability, making it a solid choice for managing recurring tasks in a distributed environment.

Curious to see it in action? Explore the complete implementation and code on GitHub:

luigbi / AzureJobScheduler

Job Scheduler with Quartz.NET and Azure WebJobs

Quartz.NET Scheduler for Azure WebJobs

A .NET-based scheduler using Quartz.NET, designed to run as a continuous Azure WebJob. It fetches job definitions from a REST API and supports daily, weekly, or monthly triggers via CRON expressions.

Features

Dynamic schedule loading from a REST API
CRON-based triggers (daily, weekly, monthly)
Independent thread execution
Azure Storage Queue integration

Setup

Clone the repo: git clone https://github.com/luigbi/AzureJobScheduler.git
Configure appsettings.json with your REST API URL and credentials.
Build and deploy as an Azure WebJob.

Learn More

Check out the full article on dev.to: https://dev.to/luigbi/job-scheduler-with-quartznet-and-azure-webjobs-2dne

License

MIT License

View on GitHub

DEV Community: Luigi Bianchi

Building Seamless Communication: Integrating VirtualFront with Microsoft Teams via Azure Communication Services (ACS)

Table of Contents

Introduction

Key Features:

High-Level Architecture

Workflow:

Detailed Project Structure

Key Components

1. Frontend

Code Snippet: Initializing the Teams Call Agent

2. Backend

Code Snippet: Fetching Access Tokens

3. Services

Code Snippet: Fetching ACS Token for Teams User

Integration Steps

1. Provision Azure Communication Services (ACS)

2. Register an Azure AD Application

3. Enable ACS Federation in Microsoft Teams

4. Configure Environment Variables

Code Snippets and Token Flow

Backend: Exchange AAD Token for ACS Token

Frontend: Initiate Call to Teams

API Endpoints

POST /get-access-token

POST /get-pstn-token

GET /endpoint

Technologies Used

Future Enhancements

Conclusion

luigbi / MSTeams-CommunicationService-SPA-Integration

VirtualFront: Seamless Communication with Microsoft Teams via Azure Communication Services (ACS)

🚀 Features

📂 Project Structure

Job Scheduler with Quartz.NET and Azure WebJobs

Introduction

Code Structure and Key Components

1. Main Entry Point (Program.cs)

Key Methods:

2. REST API Client (RestAPIClient.cs)

Key Methods:

3. Scheduler Listener (MySchedulerListener.cs)

4. Background Job (BackgroundJob.cs)

Key Methods:

5. Queue Trigger (Functions.cs)

How It Works

1. Startup

2. Schedule Loading:

3. Execution:

4. Dynamic Updates:

5. Concurrency:

Key Features

Conclusion

luigbi / AzureJobScheduler

Job Scheduler with Quartz.NET and Azure WebJobs

Quartz.NET Scheduler for Azure WebJobs

Features

Setup

Learn More

License

`POST /get-access-token`

`POST /get-pstn-token`

`GET /endpoint`