While the SharePoint Framework (aka SPFx) is getting more and more features, it becomes very handy to build engaging UI in the SharePoint context, at the Micro-services Era, it would be nice to let our solutions calling our various sets of APIs from various origins.
We already have a large set of capabilities with the Microsoft Graph but we might also need to call API’s outside of the Office 365 ecosystem (Line-of-Business or third parties…).
Obviously, if the API processes sensitive data, it has to have at least a basic authorization mechasnism.
In this post, I will show how we can achieve this using Azure Functions. If your Azure functions are contained in your tenant underlying Azure AD, there are some tricks that can be used to authenticate the current Office 365 user. (I blogged in the past about it here). If, instead, they are in an external Azure AD, or even if it is an API hosted on a totally different platform, we can use access keys in the tenant. The technique explained below will help you do that.
Our protected API
As I said above, we will use an Azure Function to simulate a protected API, but it can be any kind of API on any kind of platform. It will just be really easy to provision an new Azure Function with just a few clicks.
Once logged in the Azure Portal, if you don’t already have one, create a new Azure Functions app.
There is a requirement the API should meet to be called from your SPFx solution, it must allow Cross Origin Resource Sharing (CORS), If you use a public API, it will most likely satisfy this condition. In the case of our Azure Function, we have to tweak a dedicated setting. Switch to the Platform Features tab and select the CORS item.
In the Allowed Origins, remove the default values and add “*“, you can also choose to allow only certain domains.
I leave the sample code as it is (except for the body that I make a JSON object with a message property and append “from protected API” in the default message).
Click the Get function URL link in the right corner
Choose the default for Key (it will be the “password” to access our API, then copy/paste the URL, we will need it in our code.
And that’s it for our API !
Our SPFx extension
I opted here to create an simplistic SPFx Application Customizer extension that will show the message from the API in an Alert Dialog.
Let’s create our extension. Go for the now famous yo @microsoft/sharepoint. Answer the questions to choose a SharePoint Online target environment, extension and ApplicationCustomizer.
In your Application Customizer code file, let’s first create a constant outside of our class that will hold the API URL:
Notice that I removed the ?code= … but let’s keep its value, we will need it later.
Let’s change the properties interface of our customizer to be
In the onInit() method of our ApplicationCustomizer class, we write the following code
in the terminal, type the gulp serve –nobrowser command and go to your SharePoint Online site. in the URL append the following string:
Store the API Access Key in SharePoint
- The value of the URL argument should be the URL of your App Catalog.
- The value of the Value argument is the code we removed from the API URL earlier.
Now that we have the access key or the API stored as a tenant property, we can retry our extension.
Here we use the tenant properties to store the Access Key of our API. It is only one of the possibilities that Tenant properties offer. We can imagine using them to store License keys, configuration objects or any kind of information that must be available across the tenant.
Moreover, here, we do store the API access key in clear directly in the tenant property bag. We might also imagine a solution in which we’d store a kind of pre-shared key or a “secret” that will never go on the wire in clear but instead will be used to compute a unique hash that will be recomputed by the API to check the incoming request is not a malicious one and is issued by an expected endpoint. From a security perspective, we can implement all kind of scenarios to better protect our APIs.
Hope you will find this interesting and it will help you in your SPFx journey ! Please give your feedback !