How to Embed Editable Excel File in Angular 10 App with .NET Core 3 Backend and OAuth Token Authentication?

Question

Title:
How to Embed Editable Excel File in Angular 10 App with .NET Core 3 Backend and OAuth Token Authentication?

Body:
I am developing an Angular 10 application that needs to incorporate an editable Excel file, allowing users to interact and modify it directly within the app. The backend of the application is built with .NET Core 3, and authentication is managed through OAuth tokens via Azure AD.

What I have tried:

1. Accessing Excel files through the Microsoft Graph API, with OAuth tokens handled by the .NET Core 3 backend.
2. Attempting to embed Excel Online in an iframe, managing authentication with access tokens.
3. Exploring the use of the Office JavaScript API and other third-party libraries to facilitate Excel file manipulation.

Requirements:

• Users must be able to edit Excel files seamlessly within the Angular 10 application.
• Authentication must be secured using OAuth tokens, integrated between the Angular front-end and the .NET Core 3 backend.
• The Excel file changes should be savable in real-time or based on user actions.

Questions:

1. What are the best practices for embedding an editable Excel file in an Angular 10 app, with .NET Core 3 backend authentication using OAuth tokens?
2. Are there specific libraries or APIs particularly well-suited for this combination of technologies?
3. Tips for managing OAuth tokens securely in this context would also be valuable.

Additional Information:

• Angular version: 10
• Backend: .NET Core 3
• Authentication: Handled by Azure AD with OAuth tokens via MSAL.js

I am looking for any guidance or references that could help streamline this integration, especially regarding secure token handling and embedding functionalities. Any pointers would be greatly appreciated.

Answer 1

Embedding of the Microsoft Office Web Apps into a third-party application (such as angular applications) is governed by the Microsoft Cloud Storage Partner Program. You need to be a member of that program to be able to embed Microsoft Excel web application into a public web application. If you already are a member of that program, you should look at the program's documentation.

This applies if your application is public; if it is not public (private for the company where you are working for), and the company is eligible for Office Web Apps volume license, you can just install that office web apps server locally and use the same way as above.

An alternative to that could be to use not Microsoft's Excel Web App but some third-party editor for your Excel files. Some companies provide a ready-to-use components that can edit Excel files and look similar to Excel.

Another alternative is to use Google sheets. Not sure if it is applicable in your case.

Yet another alternative is to provide some simple table as a user interface and use excel graph API to update the Excel file (it the file is stored on in a SharePoint site). The excel graph API does not provide any visual user interface; it is just an API to read and update Excel files that are stored in Microsoft cloud platform.

There may be a new option that was just introduced recently: a SharePoint Embedded. Could be worth looking at in your case. But I have no experience with that one. From my side, the experience is limited to implementing the WOPI thing (my GitHub link; first option) for a couple of companies.