How to provide public access to SharePoint Online list data via Azure Function using Azure AD app and Microsoft Graph API

In this article, I will show you how to retrieve SharePoint list data in Azure Function using Azure AD app and Microsoft Graph API and expose it for anonymous access. In this example, I will use the exposed data in a public web form designed with Plumsail Forms.

This is my final form with the drop-down field populated from a SharePoint list:

Registration of Azure AD App

First of all, we need to register an Azure AD app and grant read access to SharePoint via Microsoft Graph API. To perform this step, you must be a tenant administrator.

Sign into Microsoft 365 and navigate to the admin center. In the Admin centers list on the left, click Azure Active Directory:

Then, go to Azure Active Directory → App registration → New registration:

• Give the app an arbitrary name, ex.: SharePointListData, since it will be used in our Azure Function only
• Leave the Supported account types on the default setting of Accounts in this organizational directory only
• Click Register
• Save the Application (client) ID of the app. We will use it in Azure Function

Next, we need to provide the newly created app with the permissions:

• Navigate to API Permissions and click Add a permission
• Under the Microsoft APIs tab, select Microsoft Graph
• In the next step, choose Application permissions since we do not want to perform operations under a certain user. In the list of specific permissions, select Sites → Sites.Read.All
• Click Add permissions
• Finally, click Grant admin consent to provide access to your tenant

The last step is creating a secret key for our app to use it in Azure Function:

• Navigate to Certificate & secrets and click New client secret
• Enter any description, specify lifetime, click Add
• Copy the created secret key. We will use it in Azure Function.

Deployment of Azure Function

The function for retrieving SharePoint list data using Azure AD app is available in our GitHub repository. We just need to create Function App, deploy the function, and configure it to use the Azure AD app for retrieving data from a specified SharePoint list.

• Sign into Azure Portal
• Click Create a resource. Navigate to Compute category and select Function App
• Use the following settings for your Function App

Once the Function App is ready, you can bind it directly to a GitHub repository. This is the easiest way to deploy a function:

• Fork our repository to your GitHub account:

• Open the Function App and navigate to Platform features → Container settings (Code Deployment):

• In the Source control step, select GitHub and sign into your account, click Continue
• In the Build provider step, select App Service build service. Click Continue
• In the Configure step, select your copy of the data-source-functions repository
• Click Finish

Once the function is built and deployed, you will see it in the list of functions in your Function App. Now, we need to specify a SharePoint list we want to retrieve data from and Azure AD app properties in the application settings.

• Open the Function App and navigate to Configuration

• Add the following properties to the Application settings:

SharePoint:AzureApp:ClientId
The Application (client) ID of the Azure AD app

SharePoint:AzureApp:ClientSecret
The Client secret of the Azure AD app

SharePoint:AzureApp:Tenant
Your Microsoft 365 tenant, ex.: contoso.onmicrosoft.com

SharePoint:ListData:SiteUrl
The absolute URL of the source site, ex.: https://contoso.sharepoint.com/sites/mysite

SharePoint:ListData:ListName
The name of the source list

Finally, we need to enable Cross-Origin Resource Sharing (CORS) for our app to allow JavaScript requests from our web form:

• Open the Function App and navigate to Platform features → CORS
• Add “*” to Allow Origins and remove all other values

OK, now we need the function URL to use it in our web form. You can find it here:

Designing public web form

Now, we can use the Azure Function for retrieving SharePoint list data from a public web form without additional authentication. In this example, I will show you how to populate a drop-down field.

This is my web form designed with Plumsail Forms:

I want to populate the ‘Company’ drop-down with values from a SharePoint list.

First, I need to get the name of the Company field to use it in JavaScript code:

And then, I put the following code into JS-editor for populating the drop-down field from the function:

fd.rendered(function() {
    var widget = fd.field('Company').widget;
    widget.setDataSource({
            transport: {
                read: '--- Insert the function URL ---'
            }          
        });
    widget.setOptions({dataTextField: 'fields.Title', dataValueField: 'fields.Title'});
});

Now, after loading the form, the drop-down field is populated with actual values:

Summary

Here I demonstrated how to retrieve SharePoint list data from a public web form anonymously. The end-user will not be asked to sign into their Microsoft 365 account moreover can even do not have it. You can use the same approach for retrieving data from any other services Microsoft Graph API provides access to e.g. Azure AD, Excel, Intune, Outlook/Exchange, One Drive, Planner and others. You only need to implement an Azure Function and provide Azure AD app with corresponding permissions. Hope you enjoyed the article and do not hesitate to leave your questions in comments.