Code zealot in a connected world
It is the year 2017 - watch out, because O365 customizations are full speed ahead.
This is a MS Australia Ignite 'lightning talk' for Meetup Madness (sorry, I took twice the amount of time than I should) to convince a room full of people that loved O365 to become developers.
MS AU Ignite Meetup Madness - O365 Customizations in 2017
Much laughter was had. But I stand by what I said - you are now all developers, now go build something amazing!
This blog post covers additional explanation on how to subscribe to SharePoint WebHooks and have it running with only JavaScript in Azure Functions. The entire code is in one single JavaScript file.
The SharePoint team delivered on the promise to ship SharePoint WebHooks, and made an reference example in C#. Be sure to watch the PnP webcast as well.
Azure Functions, in the simplest sense, is a Azure WebJob that lets you run a JavaScript function in a file (it can do C# too), and it will run it for you when you trigger it. Because it is a Serverless platform - you don't pay for the WebJob unless your function is running. This makes it really economical (you also get like a million free runs per month...)
Azure Function comes with a super user-friendly UI and you can paste or upload your JavaScript directly in the browser. You don't need any tools installed.
Running in the browser
Of course, this is server-JavaScript. So think NodeJS. We can talk to lots of REST APIs (Graph, SPO) but there will be no browser DOM.
You can trigger it on a timer. Hey that sounds like a SharePoint Timer Job.
You can trigger it on a web request. This is super useful if you have a client-side UX and you need a button to do some high level elevated permission action. You call the Azure Function to do it for you, using an App-Only permission elevation.
A SharePoint WebHook is a REST endpoint that you can attach a remote End Point to. Right now, there is only a List endpoint. So any updates to the list items will trigger an event, and SharePoint will call your function.
Hey. Wait that sounds like a SharePoint Remote Event Receiver. You are right!
So the idea of our function is this - when triggered:
It will Auth and then talk to SharePoint REST and do one of the following.
options = { method: 'GET', uri: "https://johnliu365.sharepoint.com/_api/web/lists/getbytitle('subscribe-this')/subscriptions", headers: headers }; request(options, function (error, res, body) { context.log(error); context.log(body); context.res = { body: body || '' }; context.done(); });
GET subscriptions. Array result is [] empty by default. It has subscriptions after you attach hooks successfully.
options = { method: 'POST', uri: "https://johnliu365.sharepoint.com/_api/web/lists/getbytitle('subscribe-this')/subscriptions", body: JSON.stringify({ "resource": "https://johnliu365.sharepoint.com/_api/web/lists/getbytitle('subscribe-this')", "notificationUrl": "https://johnno-funks.azurewebsites.net/api/poke-spo2?code=q8sq9wxm62asd-YOURTRIGGERCODE", "expirationDateTime": "2017-01-01T16:17:57+00:00", "clientState": "jonnofunks" }), headers: headers }; request(options, function (error, res, body) { context.log(error); context.log(body); context.res = { body: body || '' }; context.done(); });
Sending POST subscription without handling validation token. The request fails.
// if validationtoken is specified in query // immediately return token as text/plain context.log(req.query); context.log(req.query.validationtoken); context.res = { "content-type": "text/plain", body: req.query.validationtoken }; context.done();
The function is called twice. Second time by SharePoint to validate the subscription.
The Poked list item was created by "SharePoint App" not "John Liu" the user.
This demo builds on top of the code from Azure Functions, JS and App-Only Updates to SharePoint Online that covers authentication with certificate, and running AppOnly permissions.
Additionally, I've moved ClientID and Certifate ThumbPrint to Azure Function App Settings. This means they are no longer part of the code.
var clientId = process.env['MyClientId']; var thumbprint = process.env['MyThumbPrint'];
Function App Settings > Configure App Settings
#AzureFunctions tip of the day: Store secrets/settings in App Settings, not your code! <⚡> pic.twitter.com/GrpwX1mLpe
— Christopher Anderson (@crandycodes) September 9, 2016
I'm making an effort to put all my demo source code on GitHub going forward. This is part of the "Upgrade Your JS" demos.
https://github.com/johnnliu/demo-upgrade-your-js/tree/master/azure-function-web-hook
Let me know what you think about SharePoint WebHooks, Azure Functions and JavaScript that will rule everything ;-)
If you spot a bug or want to update the code - send me a Pull Request.
Have you ever, really wanted to have your JavaScript perform a RunWithElevatedPrivileges against SharePoint Online? Do something that the current user just don't have permission to do?
Today we tackle this core problem that every SharePoint JavaScript developer has thought about at least once. And we will do it with AzureFunctions.
You can go through dev.office.com to get started - but you'll need various bits of the portal. So do this from old portal https://manage.windowsazure.com
You need to write copy out your Client ID and Client Secret
Lets give this some App-Only Permissions
Also need to allow implicit flow, that means download the manifest, change the json (below) and upload it back.
This picture looks like an ad in my blog...
Create a new function - I choose the HttpTrigger with Node template.
NodeJS modules (= C# reference libraries) are loaded via npm install (= nuget). To access this, you need to go to
Function app settings > Go to App Settings > Tools(tipped by @crandycodes)
npm install adal-node
npm install request
The errors are because I don't have a package.json file in the folder. Add adal-node and also request. Check they are here.
Go back to the function and add this code
var request = require("request");
var adal = require("adal-node");
module.exports = function(context, req) {
context.log('Node.js HTTP trigger function processed a request. RequestUri=%s', req.originalUrl);
var authorityHostUrl = 'https://login.microsoftonline.com';
var tenant = 'johnliu365.onmicrosoft.com';
var authorityUrl = authorityHostUrl + '/' + tenant;
var clientId = '37ded58a-YOUR-CLIENT-ID';
var clientSecret = 'fE4kulPjYOUR-CLIENT-SECRET=';
var resource = 'https://graph.microsoft.com';
var authContext = new adal.AuthenticationContext(authorityUrl);
authContext.acquireTokenWithClientCredentials(resource, clientId, clientSecret, function(err, tokenResponse) {
if (err) {
context.log('well that didn\'t work: ' + err.stack);
context.done();
return;
}
context.log(tokenResponse);
var accesstoken = tokenResponse.accessToken;
var options = {
method: 'GET',
uri: "https://graph.microsoft.com/beta/groups",
headers: {
'Accept': 'application/json;odata.metadata=full',
'Authorization': 'Bearer ' + accesstoken
}
};
context.log(options);
request(options, function(error, res, body){
context.log(error);
context.log(body);
context.res = { body: body || '' };
context.done();
});
});
};
Run it
Got our auth token, and got our list of groups. Perfect.
var request = require("request");
var adal = require("adal-node")
module.exports = function(context, req) {
context.log('Node.js HTTP trigger function processed a request. RequestUri=%s', req.originalUrl);
var authorityHostUrl = 'https://login.microsoftonline.com';
var tenant = 'johnliu365.onmicrosoft.com';
var authorityUrl = authorityHostUrl + '/' + tenant;
var clientId = '37ded58a-YOUR-CLIENT-ID';
var clientSecret = 'fE4kulYOUR-CLIENT-SECRET=';
//var resource = 'https://graph.microsoft.com';
var resource = 'https://johnliu365.sharepoint.com';
var authContext = new adal.AuthenticationContext(authorityUrl);
authContext.acquireTokenWithClientCredentials(resource, clientId, clientSecret, function(err, tokenResponse) {
if (err) {
context.log('well that didn\'t work: ' + err.stack);
context.done();
return;
}
context.log(tokenResponse);
var accesstoken = tokenResponse.accessToken;
/*
var options = {
method: 'GET',
uri: "https://graph.microsoft.com/beta/groups",
headers: {
'Accept': 'application/json;odata.metadata=full',
'Authorization': 'Bearer ' + accesstoken
}
};
*/
var options = {
method: "POST",
uri: "https://johnliu365.sharepoint.com/_api/web/lists/getbytitle('Poked')/items",
body: JSON.stringify({ '__metadata': { 'type': 'SP.Data.PokedListItem' }, 'Title': 'Test ' + (req.body.name || "hello!") }),
headers: {
'Authorization': 'Bearer ' + accesstoken,
'Accept': 'application/json; odata=verbose',
'Content-Type': 'application/json; odata=verbose'
}
};
context.log(options);
request(options, function(error, res, body){
context.log(error);
context.log(body);
context.res = { body: body || '' };
context.done();
});
});
};
Changed resource to sharepoint.com, also changed the POST options - I want to insert a list item.
This is so sad! "Unsupported app only token." :-( :-(
To move on, we need to backtrack a bit. @richdizz has a great blog post that documents this - to perform App Only operations on SharePoint Online, the client ID / Client Secret doesn't cut it. You need to get auth token via certificate.
Rich also pointed me to Travis Tidwell (Form.IO) 's excellent
https://github.com/formio/keycred
npm install -g keycred
keycred
(go through the options)
You need three things:
You need to add this part to your AD App Manifest json file - under keyCredentials. Your JSON should have a really long value for "value"
-----BEGIN RSA PRIVATE KEY-----
MIIEowIBAAKCAQEAveX4jNn/eBPM1kdRNMPAlh6rT/JFoah9QkUbeYPkYGqWvn7X
~~snipped~~
0ibMc7T5K7AGVT0q0ppBLheFQkeSnPbHJrX40xILEkzd/0RLvC8X
-----END RSA PRIVATE KEY-----
Copy the entire thing, including -----BEGIN and END ----- and save this into a file. I called mine funky.pem
Upload the funky.pem file into the folder. I use the VS Online tool.
85b82741408c6c3af462b3a378e3e8963efaad70
var request = require("request");
var adal = require("adal-node");
var fs = require("fs");
module.exports = function(context, req) {
context.log('Node.js HTTP trigger function processed a request. RequestUri=%s', req.originalUrl);
var authorityHostUrl = 'https://login.microsoftonline.com';
var tenant = 'johnliu365.onmicrosoft.com';
var authorityUrl = authorityHostUrl + '/' + tenant;
var clientId = '37ded58a-YOUR-CLIENT-ID';
var clientSecret = 'DONT NEED USE CERT';
//var resource = 'https://graph.microsoft.com';
var resource = 'https://johnliu365.sharepoint.com';
var thumbprint = '85b82741408c6c3af462b3a378e3e8963efaad70';
var certificate = fs.readFileSync(__dirname + '/funky.pem', { encoding : 'utf8'});
var authContext = new adal.AuthenticationContext(authorityUrl);
authContext.acquireTokenWithClientCertificate(resource, clientId, certificate, thumbprint, function(err, tokenResponse) {
//authContext.acquireTokenWithClientCredentials(resource, clientId, clientSecret, function(err, tokenResponse) {
if (err) {
context.log('well that didn\'t work: ' + err.stack);
context.done();
return;
}
context.log(tokenResponse);
var accesstoken = tokenResponse.accessToken;
/*
var options = {
method: 'GET',
uri: "https://graph.microsoft.com/beta/groups",
headers: {
'Accept': 'application/json;odata.metadata=full',
'Authorization': 'Bearer ' + accesstoken
}
};
*/
var options = {
method: "POST",
uri: "https://johnliu365.sharepoint.com/_api/web/lists/getbytitle('Poked')/items",
body: JSON.stringify({ '__metadata': { 'type': 'SP.Data.PokedListItem' }, 'Title': 'Test ' + (req.body.name || "hello!") }),
headers: {
'Authorization': 'Bearer ' + accesstoken,
'Accept': 'application/json; odata=verbose',
'Content-Type': 'application/json; odata=verbose'
}
};
context.log(options);
request(options, function(error, res, body){
context.log(error);
context.log(body);
context.res = { body: body || '' };
context.done();
});
});
};
Use fs.readFileSync to read funky.pem file and acquireTokenWithClientCertificate instead of ClientSecret
Note - updated by "funky"
There are several Azure Functions triggers that immediately jumps out at me as being really useful.
Your JavaScript can call the azure function and trigger the action. You will need to turn on CORS. And filter to only your domain.
But this will give your client side javascript ability to call an elevated function.
You can trigger your function based on a timer. In this scenario, your javascript will run against SharePoint like a timer job.
Currently only Exchange in Office 365 supports WebHooks. But SharePoint will support it in the future. When this becomes available, a webhook can trigger an Azure Function and essentially, you have a List Item event receiver.
Except all in JavaScript.
So much fun haha I'm so excited!
I was preparing this list for our April Sydney SharePoint Usergroup event.
This is the annual Australian SharePoint Conference / ShareThePoint Conference by Debbie Ireland. The biggest Australian SharePoint show for the year. A lot of opportunity for networking, user cases and physically meeting and talking with the community experts. Lots of Australian and overseas visiting SharePoint experts across the spectrum (IT Pro, Business, Power User, Dev) at this event. http://dwcau.com.au/
This is a Microsoft event for a developer audience. Focused on Azure.
https://microsoftcloudroadshow.com/sydney
This is an streaming online event with Jeff Teper, the father of SharePoint (and now OneDrive). It would be live on May the 5th for Australians and probably very early in the morning. Check timezones.
https://resources.office.com/en-us-landing-the-future-of-sharepoint.html
The SharePoint / Office 365 Saturday events for 2016 kicks off again from Perth.
http://www.o365saturdayaustralia.com/perth
The SP24 / Collab 365 guys are back again for 2016 with a huge lineup of streaming and recorded sessions.
http://collab365.events/collab365-summit-2016/
There was a recent blog post was really good with information on 2016 roadmap.
(Ignore the marketing intro about industry recognition… the roadmap items like Win 8.1, pause sync, and also Doc Lib sync in 3rd quarter 2016 is good info)
Almost universally, the reception is cautious. We like seeing updates. We don't like missing ribbons and hiding team collaboration features. Robert Crane has one of the earliest pieces on this http://blog.ciaops.com/2016/04/this-seems-like-siloing-to-me.html that I really echo with.
I've had several questions in comments about how to add CSS files using the Simplest-Safest-Most-Future-Proof-Way to customize your SharePoint and SharePoint Online using UserCustomActionConfigPage
This is something I wanted to talk about from day 1 of this series - as I did cover you can add more than 1 CSS files, and specify their ranking via the Sequence number.
Because UserCustomAction doesn't create a link for CSS references, the way to do this is via the ScriptBlock and create a LINK element and attach it on page creation.
Grab the latest configure-page.aspx from Github.
Reference a CSS file instead of a JS file. The ID is optional, but will be respected if specified.
The Sequence is honoured - 1001 will follow 1000.
Happy branding!
I look at how a small team can build amazing things with the latest tools we have in Office 365 & SharePoint. I'm a coder, developer, Office SharePoint MVP. I dream, then I rant.
Founder @ Flow Studio App
A poweruser tool to help every maker write better Microsoft Flows and manage them.
MVP Alumni Office Apps and Services: SharePoint
MVP Alumni Business Applications: Flow
This work by John Liu is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Permissions beyond the scope of this license may be available at /about-me/.
