OAuth authentication for SPFx solutions

Question

I am challenged by a SPFx based solution (WebPart as well as Commandbar-Extension). I have a set of APIs which are secured by OAuth. There is a dedicated authentication server, so I can't just use AAD to grab a token, but instead I have to access this authentication server.

So my challenge is: how can I provide a solution for an unknown amount of customers running not known SharePoint-tenants, while using OAuth? Since SPFx is a single-page-application-style solution I will have to provide a return-uri to the authentication server. And this return-uri has to be known by the authentication-server to be validated. But since I don't know who's going to use the application - I would need to allow all return-uris to *.sharepoint.com?

So my question is: there must be someone out there, who had the same problem. How would be a way to solve this challenge?

Answer 1

You can call third party API protected through Azure Ad using following given approach.

1. Declare permission requests in SharePoint Framework projects

• To request a permission when a SharePoint Framework package is deployed to the App Catalog, add it to the webApiPermissionRequests array in the package-solution.json

// package-solution.json
{
  "solution": {
    "name": "sp-fx-aad-http-client-side-solution",
    "id": "dfb230b7-4f61-431f-9b65-a34e83922663",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "isDomainIsolated": false,
    "webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "User.ReadBasic.All"
      }
    ]
  },
  "paths": {
    "zippedPackage": "solution/sp-fx-aad-http.sppkg"
  }
}

2. Grant the permission to app from SharePoint admin portal.

3. Use the SharePoint Framework Azure AD HTTP client

• The SharePoint Framework API simplifies the access token acquisition from SharePoint Online and Azure AD. The API uses the token to configure a special instance of the HttpClient, known as the AadHttpClient, you'll use to submit the request.

4. Use below sample of code to call the third party api.

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

// Promises
this.context.aadHttpClientFactory
  .getClient('https://your-endpoint-uri')
  .then((aadClient: AadHttpClient) => {
    /* submit request to endpoint */
  });

// Async/await
const aadClient: AadHttpClient = await this.context.aadHttpClientFactory
  .getClient('https://your-endpoint-uri');

// Promises
const endpoint: string = 'https://your-endpoint-uri/api';
aadClient.get(endpoint, AadHttpClient.configurations.v1)
  .then((rawResponse: HttpClientResponse) => {
    return rawResponse.json();
  })
  .then((jsonResponse: any) => {
    // work with result
  });

// Async/await
const endpoint: string = 'https://your-endpoint-uri/api';
const rawResponse: HttpClientResponse = await aadClient.get(endpoint, AadHttpClient.configurations.v1);

const responseJson = await rawResponse.json();
return responseJson as any;

Reference

• Call Azure AD secured REST APIs
• Call Azure AD secured third-party REST APIs