SharePoint Framework offers powerful set of classes that enable communication and data retrieval from various data sources: SharePoint, Microsoft Graph, third-party APIs. This session presents all use cases for connection to APIs from SharePoint Framework, with corresponding code samples and configuration guidance. We will also describe some caveats that can happen during configuration of the permission request, and how to work around them. If you want to learn how to improve your SharePoint Framework solutions to connect to REST APIs, this is the session you won't miss.

1. #SPSMUC
SharePoint and Office 365 Saturday Munich
30 November 2019 ⃒ Microsoft Munich
#SPSMUC
Leveraging APIs from
SharePoint Framework solutions
Microsoft, PFE
Dragan Panjkov
@panjkov

2. #SPSMUC
PLATINUM
SILVER
GOLD
SharePoint and Office 365
Saturday Munich

3. Dragan Panjkov
Premier Field Engineer, Microsoft
Website and blog: www.dragan-panjkov.com
Twitter: @panjkov
Github: www.github.com/panjkov

4. Consume REST APIs in SPFx
• We almost always work with data
• SPFx provides us with APIs for working with external data sources
• APIs are based on HttpClient
SPHttpClient
MSGraphClient
AADHttpClient

5. HTTPClient
• Provided on the current SharePoint Context
• this.context.httpClient
• Optimized for REST APIs
• Fully configurable HTTP headers & payload
• Can be used for anonymous or secured REST APIs

6. Calling Anonymous REST APIs
import { HttpClient, HttpClientResponse }
from '@microsoft/sp-http’;
return this.context.httpClient.get(
`http://[rest-endpoint]`,
HttpClient.configurations.v1
)
.then((response: HttpClientResponse) => {
return response.json();
})
.then(jsonResponse => {
return jsonResponse;
}) as Promise<any>;

7. APIs protected with Azure AD
• Declare API permission request in SPFx manifest
• Initialize AadHttpClient in code
• Perform calls using client
• WARNING: API Permission request has to be approved in Tenant
Administration

8. Declare Permission Requests
// package-solution.json
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.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"
}
}

9. Using the Azure AD HTTP Client
import { AadHttpClient, HttpClientResponse } from '@microsoft/sp-http';
this.context.aadHttpClientFactory
.getClient([name / URI of target resource])
.then((aadClient: AadHttpClient) => {
const endpoint: string = 'https://secured endpoint'
aadClient.get(endpoint, AadHttpClient.configurations.v1)
.then((rawResponse: HttpClientResponse) => {
return rawResponse.json();
})
.then((jsonResponse: any) => {
// work with result
});
});
});

10. Approve / Reject with SharePoint Online API
Management Page

11. Example: Calling a K2 API
"webApiPermissionRequests": [
{
"resource": "K2 API",
"scope": "user_impersonation"
}
]
protected onInit(): Promise {
return new Promise((resolve: () => void,
reject: (error:any) => void): void => {
this.context.aadHttpClientFactory
.getClient('https://api.k2.com/')
.then((client: AadHttpClient): void => {
this.aadClient = client;
resolve();
}, err => reject(err));
});
}
this.aadClient.get(this.properties.k2ServerURL
+ '/api/workflow/preview/tasks',
AadHttpClient.configurations.v1)

12. Microsoft Graph
• Single endpoint that proxies multiple Microsoft services
• Allows for easy traversal of objects and relationships
• Simplifies token acquisition and management
• Eliminates the need to traditional discovery (using “me” and
“myorganization”)

13. SharePoint Framework Includes a Microsoft
Graph Client
• MSGraphClient: SharePoint Framework’s Microsoft Graph Client
• Abstracts the token acquisition from the SharePoint Framework’s
support for Azure AD
• Wraps the Microsoft Graph JavaScript SDK and initializes it with one
line that returns a promise

14. Connecting to Microsoft Graph
• Declare API permission request in SPFx manifest
• Initialize MSGraphClient in code
• Perform calls using client
• WARNING: API Permission request has to be approved in Tenant
Administration

15. Using the MSGraphClient
this.context.msGraphClientFactory
.getClient()
.then((client: MSGraphClient): void => {
// use MSGraphClient here
client
.api('/me’)
.get((error: any, user: MicrosoftGraph.User, rawResponse?: any) => {
console.log('name: ', user.displayName);
console.log('email: ', user.mail);
console.log('phone: ', user.businessPhones[0]);
});
});
});

16. Resources
Connect to Anonymous APIs
https://docs.microsoft.com/sharepoint/dev/spfx/connect-to-anonymous-apis
Connect to Azure AD-secured APIs in SharePoint Framework Solutions
https://docs.microsoft.com/sharepoint/dev/spfx/use-aadhttpclient
Use the MSGraphClient to Connect to Microsoft Graph
https://docs.microsoft.com/sharepoint/dev/spfx/use-msgraph
SharePoint Framework web part and K2 Workflow REST API
https://www.dragan-panjkov.com/sharepoint-framework-web-part-and-k2-workflow-rest-api
Lab - Leverage the Microsoft Graph & 3rd Party APIs
https://github.com/SharePoint/sp-dev-training-spfx-graph-3rdpartyapis/blob/master/Lab.md

17. #SPSMUC
SharePoint and Office 365 Saturday Munich
30 November 2019 ⃒ Microsoft Munich
#SPSMUC
Don‘t forget to
rate the session!
THANK YOU!