Authentication for custom REST API invoked from SharePoint online pages

Question

I have a modern UI web part in SharePoint Online. This component needs to invoke a custom REST API that will be hosted in an Azure web app (not SharePoint REST API). I may also call this API directly from JavaScript in SharePoint online pages. This will be deployed for different customers having separate SP Online tenancies.

I need to ensure that the API is called from SharePoint Online sites only and want to verify the Site URL and logged in user. That is, it should not be possible for someone to call this API directly. I do not need any specific authorization, just authentication of the SharePoint Online user and a way to verify that Site URL parameter sent in REST API parameters matches with the site of the page from where API is invoked.

Please point me in the direction to get this implemented.

Answer 1

• In order to protect your Azure hosted web API you can register an app for single tenant and protect your web api through azure ad.
• Alternative to this is you can use Authentication tab from azure web app to protect it. refer the below screen.

• then Click on Add Identity provider and select Microsoft as you want only login user can access your web API.

• After click on it select Microsoft as Identity provider.

• You will get below screen

• Above are the step to protect your web api.

• Use below code to call it in your modern web part or SPFx web part.

import { AadHttpClient, HttpClientResponse } from '@microsoft/sp-http';

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
  public render(): void {
    // ...

    this.context.aadHttpClientFactory
      .getClient('https://contoso.azurewebsites.net')
      .then((client: AadHttpClient): void => {
        client
          .get('https://contoso.azurewebsites.net/api/orders', AadHttpClient.configurations.v1)
          .then((response: HttpClientResponse): Promise<Order[]> => {
            return response.json();
          })
          .then((orders: Order[]): void => {
            // process data
          });
      });
  }

  // ...
}

Connect to Azure AD applications using the AadHttpClient