SharePoint Fest 2019 - Build an intelligent application by connecting it to the Microsoft Graph

Build an intelligent application by
connecting it to the Microsoft Graph
Sébastien Levert

Hi! I’m Seb!
@sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at

Microsoft Graph is all about you
If you or your customers are part of the millions of users that are using Microsoft
cloud services, then Microsoft Graph is the fabric of all your data
It all starts with /me

Gateway to your data in the Microsoft
cloud
Your app
Gateway
Your or your
customer’s
data
Office 365 Windows 10 Enterprise Mobility + Security
1Microsoft Graph

Microsoft Graph
ALL
Microsoft 365
Office 365
Windows 10
EMS
ALL ONE
https://graph.microsoft.com

Microsoft 365 Platform
web, device,
and service apps
Extend Microsoft 365 experiences
1
iOS/Android/Windows/Web
Build your experience
Microsoft Graph

Exploring the Graph
• Using the Graph Explorer
• Using plain HTTP Calls
• Using .NET
• Using PnP PowerShell
• Using JavaScript (Browser or Node)
• Using the SDKs

SharePoint Fest 2019 - Build an intelligent application by connecting it to the Microsoft Graph

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Connecting to your tenant
Connect-PnPOnline -Graph -LaunchBrowser
# Getting the appropriate scoped
Connect-PnPOnline –Scopes @("Mail.Send", "User.Read.All")
# Build the Headers with the Access Token value
$headers = @{
"Authorization" = [String]::Format("Bearer {0}", (Get-PnPAccessToken));
"Content-Type" = "application/json"
}
# Calling the Microsoft Graph
Invoke-RestMethod -Header $headers -Uri "https://graph.microsoft.com/v1.0/me"
Get-Contacts.ps1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
GET https://graph.microsoft.com/v1.0/me/contacts
Accept: application/json
Content-Type: application/json
{
"value": [{
"id":"AAMkAGZkNzVjNzkyLWE0OT…",
"createdDateTime": "2018-05-22T18:19:02Z",
"lastModifiedDateTime": "2018-05-22T18:19:02Z",
//…
}]
}
Listing All Contacts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
GET https://graph.microsoft.com/v1.0/me/contacts/AAMkAGZkNzVjNzkyLWE0OT…
{
"id":"AAMkAGZkNzVjNzkyLWE0OT…",
"createdDateTime": "2018-05-22T18:19:02Z",
"lastModifiedDateTime": "2018-05-22T18:19:02Z",
//…
}
Getting a specific Contacts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
POST https://graph.microsoft.com/v1.0/me/contacts
{
"givenName": "Sébastien",
"surname": "Levert",
"emailAddresses": [{
"address": "seb@valointranet.com",
"name": "Sébastien Levert"
}],
"businessPhones": [
"+1 555 555 5341"
]
}
Creating a Contact

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
PATCH https://graph.microsoft.com/v1.0/me/contacts/AAMkAGZkNzVjNzkyLWE0OT…
{
"givenName":"Seb"
}
Updating a specific Contact

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
DELETE https://graph.microsoft.com/v1.0/me/contacts/AAMkAGZkNzVjNzkyLWE0OT…
{
}
Getting a specific Contacts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Building an Email JSON representation
$EmailBody = @{
"Message" = @{
"Subject" = "This is a test email from PowerShell!" ;
"Body" = @{
"ContentType" = "HTML" ;
"Content" = "This email was sent from PowerShell with the Microsoft Graph.";
} ;
"ToRecipients" = @(
@{
"EmailAddress" = @{
"Address" = "admin@sebastienlevert.onmicrosoft.com"
}
}
)
}
}
Invoke-RestMethod -Header $headers –Uri "https://graph.microsoft.com/v1.0/me/sendMail" -
Method Post -Body ($EmailBody | ConvertTo-Json -Depth 4)
Send-Email.ps1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Requiring the Microsoft Graph SDK
const MicrosoftGraph = require("../../lib/src/index.js").Client;
// Getting the Access Token from a secret file
const secrets = require("./secrets");
// Initializing the Microsoft Graph SDK
const client = MicrosoftGraph.init({
defaultVersion: 'v1.0’,
debugLogging: true,
authProvider: (done) => {
done(null, secrets.accessToken);
}
});
send-email.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Building the Email Message
const mail = {
subject: "This is a test email from NodeJS!",
toRecipients: [{
emailAddress: {
address: "admin@slevert.onmicrosoft.com"
}
}],
body: {
content: "This email was sent from NodeJS using the Microsoft Graph.",
contentType: "html"
}
}
// Email from the Microsoft Graph
client.api("/users/me/sendMail").post({message: mail}, (err, res) => {
if (err) console.log(err);
else console.log("Sent an email");
});
send-email.js

Be notified by the Graph
• Webhooks

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
POST https://graph.microsoft.com/beta/subscriptions
{
"changeType": "Created",
"notificationUrl": "https://<url>/api/webhookCallback",
"resource": "me/messages"
}
Creating a webhook on the Graph

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
POST https://<url>/api/webhookCallback
{
"value":[
{
"subscriptionId":"7f105c7d-2dc5-4530-97cd-4e7af6534c07",
"subscriptionExpirationDateTime":"2015-11-20T18:23:45.9356913Z",
"changeType":"Created",
"resource":"Users/<user-id>/messages/<message-id>",
"resourceData":{
"@odata.type":"#Microsoft.Graph.Message",
"@odata.id":"Users/<user-id>/messages/<message-id>",
"@odata.etag":"W/"CQAAABYAAACoeN6SYXGLRrvRm+CYrrfQAACvvGdb"",
"Id“:"<message-id>"
}
}
]
}
Being notified from a webhook

Extending the Graph
• Open type extensions
• Schema extensions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
POST https://graph.microsoft.com/beta/me/contacts/ID/extensions
{
"@odata.type": "Microsoft.Graph.OpenTypeExtension",
"extensionName": "Contacts.Extensions.LinkedIn",
"linkedInUrl": "https://www.linkedin.com/in/seb/"
}
Open type extensions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
GET
https://graph.microsoft.com/beta/me/contacts/ID?expand=Extensions($filter=
Id eq 'Contacts.Extensions.LinkedIn')
{
…
"extensions": [
{
"@odata.type": "#microsoft.graph.openTypeExtension",
"extensionName": "Contacts.Extensions.LinkedIn",
"linkedInUrl": https://www.linkedin.com/in/seb/
}
]
}
Getting the value of an Open Type

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
POST https://graph.Microsoft.com/v1.0/schemaExtensions
{
"id": "linkedin_information",
"description": "All information about LinkedIn account",
"targetType": ["Contacts"],
"available": "Online",
"properties" : [
"name": "linkedInUrl",
"type": "String"
]
}
Defining a schema extension

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
POST https://graph.microsoft.com/v1.0/me/contacts/ID
{
"linkedin_information": {
"linkedInUrl": "https://www.linkedin.com/in/seb/"
}
}
Adding a schema extension data

Graph & SharePoint
• SPFx supports the MSGraphClient to
simplify the authentication
• SPFx supports the AadHttpClient for
custom LOB applications
• Caution : Permissions are global to your
tenant for regularWebParts.
• Isolated WebParts have single
permissions (Preview in 1.7)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "Sites.ReadWrite.All"
},
{
"resource": "secured-apis-apis-everywhere-v1",
"scope": "user_impersonation"
}]
}
package-solution.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
constructor(webPartContext: WebPartContext) {
this._webPartContext = webPartContext;
}
public getItems(context: WebPartContext): Promise<any[]> {
return new Promise<ISessionItem[]>((resolve, reject) => {
this._webPartContext.msGraphClientFactory.getClient()
.then((client: MSGraphClient): void => {
client.api(graphUrl).get((error, response: any) => {
if (error) { console.error(error); return; }
resolve(response.value);
});
});
});
}
graph-service.ts

Resources
• https://dev.office.com
• https://aka.ms/ge
• https://graph.microsoft.com
• https://github.com/microsoftgraph/msgraph-community-samples
• https://github.com/sebastienlevert/apis-apis-everywhere

Share your experience
• Use hashtags to share your experience
• #Office365Dev
• #MicrosoftGraph
• Log issues & questions to the GitHub Repositories

Thank you!
@sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at

SharePoint Fest 2019 - Build an intelligent application by connecting it to the Microsoft Graph

Recommended

More Related Content

Similar to SharePoint Fest 2019 - Build an intelligent application by connecting it to the Microsoft Graph (20)

More from Sébastien Levert (20)

Recently uploaded (20)

SharePoint Fest 2019 - Build an intelligent application by connecting it to the Microsoft Graph