Building a Full-Stack Outlook Add-in: .NET Core, React Frontend, and Odoo Integration

Building an Outlook add-in requires navigating Microsoft’s complex ecosystem of interconnected platforms. For instance, our Odoo Ex is a seamless Outlook add-in that acts as a middleware to connect the Odoo platform with the Outlook app. In addition to a typical .NET Core API, SQL, and a React UI, building this add-in throws challenges such as integrating the add-in itself, implementing Azure Active Directory authentication, and configuring a SaaS offer in AppSource. This article focuses on the integration architecture for a commercial Outlook add-in.

Outlook Add-in Platform Architecture and AppSource Distribution

Microsoft allows developers to embed an entire web application as an Outlook add-in. This web app can be as simple as an HTML page or as advanced as a React application. To ensure security between the add-in and the Outlook app, the add-in is hosted inside an iframe.

To manage permissions, capabilities, and accessibility of the add-in, there is a manifest file and a JavaScript library called office.js. The manifest file declares the web application’s resources (such as URL and logo) and defines the scopes of the add-in—such as whether it can read, write, or access emails. The office.js library acts as a bridge that allows the web application to interact with the Outlook app based on the definitions and scopes specified in the manifest file.

Publisher Verification and Domain Security

Most commercial Outlook add-ins are multi-tenant, which requires the publisher to be a member of the Microsoft Partner Network (MPN). The domain hosting the add-in must be a verified domain or subdomain owned by the publisher. This verification process helps establish trust when requesting permissions from users. Additionally, a redirect URL—used after the user grants permissions—must also belong to the verified domain.

Microsoft SaaS Marketplace Platform

Microsoft AppSource provides a SaaS marketplace to host SaaS offers and support subscription-based billing and lifecycle management within its own infrastructure. During the purchase of an offer, it provides a token to securely activate the subscription for the customer.

Additionally, through webhooks, it sends subscription events such as purchases, plan changes, and cancellations. Overall, from a developer’s perspective, this is handled via the SaaS Fulfillment API.

Platform Integration Architecture

Here’s the complete flow of the add-in,

1. We need to register the app in the Azure App Portal. This registration will provide us with the Client ID, Client Secret, and Resource ID. From our application backend, after a license is purchased, we must use the Resource ID, Client ID, and Client Secret to validate the token and activate the subscription. This is also where we define our verified publisher and owned domain.
2. For the Outlook Add-in, we will require a manifest file. The Client ID and Resource ID from the app registration must be defined in this manifest file.
3. In the SaaS offer, under Technical Configuration, we need to define the webhook and the landing page. The landing page is responsible for handling the token, while the webhook handles events via the SaaS Fulfillment API.
4. The frontend will be served from the path defined in the Outlook Add-in manifest.
5. The backend is solely responsible for license validation and handling the SaaS Fulfillment API.

Experience the iXora Solution difference as your trusted offshore software development partner. We’re here to empower your vision with dedicated, extended, and remote software development teams. Our agile processes and tailored software development services optimize your projects, ensuring efficiency and success. At iXora Solution, we thrive in a dynamic team culture and experience innovation in the field of custom-made software development.

Have specific project requirements? Personalized or customized software solutions! You can contact iXora Solution expert teams for any consultation or coordination from here. We are committed to maximizing your business growth with our expertise as a custom software development and offshore solutions provider. Let’s make your goals a reality.
Thanks for your patience!