Getting anonymous thumbnails of SharePoint Online files with Microsoft Graph

If you are developing an application based on the Microsoft 365 platform which also uses files stored in SharePoint Online, chances are that you might want to make the file thumbnails available on a device (or client) without going through SharePoint authentication. It could be a mobile app or Microsoft Teams app which needs to show the thumbnails. In these cases, the end user has already signed into the app so might not be a good idea to ask them to sign in again to access files stored in SharePoint.

One thing which comes to mind straight away is to use the Data URLs of the thumbnail images. But data URLs can get fairly big as they are just the base 64 representation of the images. Also, if you have large images and you need to display a lot of them at the same time, the data travelling over the wire to your device can get fairly big.

Fortunately, the Microsoft Graph provides a great way to get the thumbnail of a file. It is also provided as an anonymously accessible link (which expires in 1 hour) so we don't have to worry about the user having to sign in again to SharePoint. More details on Microsoft docs:
https://docs.microsoft.com/en-us/graph/api/driveitem-list-thumbnails?view=graph-rest-1.0&tabs=http

This approach works for getting the thumbnails of any type of file stored in SharePoint Online. But in this post, I am going to focus only on modern pages.

First, let's see how the code for this looks in the Microsoft Graph .NET SDK:

	using Microsoft.Graph;
	using Microsoft.Identity.Client;
	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Net.Http.Headers;
	using System.Threading.Tasks;
	namespace Graph.SPO.Thumbnails
	{
	class Program
	{
	public static async Task Main(string[] args)
	{
	GraphServiceClient graphClient = await GetGraphClient();
	//Get the site object. You can use other ways to get the site object as well:
	//https://docs.microsoft.com/en-us/graph/api/site-get?view=graph-rest-1.0&tabs=http
	Site site = await graphClient.Groups["<your-office365-group-id>"].Sites["root"].Request().GetAsync();
	//Get the modern page thumbnails
	var queryOptions = new List<QueryOption>
	{
	new QueryOption("expand", "thumbnails"),
	new QueryOption("select", "thumbnails/large") //large, medium, small
	};
	var driveItem = await graphClient.Sites[site.Id].Lists["Site Pages"].Drive.Root.ItemWithPath($"/MySPOModernPage.aspx").Request(queryOptions).GetAsync();
	var thumbnail = driveItem.Thumbnails.First();
	Console.WriteLine(thumbnail?.Large?.Url);
	}
	private static async Task<GraphServiceClient> GetGraphClient()
	{
	var scopes = new string[] { "https://graph.microsoft.com/.default" };
	var clientID = "<client-id>";
	var clientSecret = "<client-secret>";
	var tenantID = "<tenant-id>";
	IConfidentialClientApplication clientApp = ConfidentialClientApplicationBuilder
	.Create(clientID)
	.WithClientSecret(clientSecret)
	.WithTenantId(tenantID)
	.Build();
	AuthenticationResult authResult = await clientApp.AcquireTokenForClient(scopes).ExecuteAsync();
	string accessToken = authResult.AccessToken;
	var graphClient = new GraphServiceClient(
	new DelegateAuthenticationProvider(
	requestMessage =>
	{
	requestMessage.Headers.Authorization = new AuthenticationHeaderValue("bearer", accessToken);
	return Task.CompletedTask;
	}));
	return graphClient;
	}
	}
	}

view raw Graph.Net.SDK.SPO.Thumbnail.cs hosted with ❤ by GitHub

This code translates to the following Graph REST API call:

https://graph.microsoft.com/v1.0/sites/your-site-id/lists/Site%20Pages/drive/root:/MySPOModernPage.aspx:?expand=thumbnails&select=thumbnails/large

view raw GraphThumbnails.md hosted with ❤ by GitHub

and the response:

(click to zoom)

The thumbnail url returned here can be used on any device, app or Adaptive Card to display the image without the need for authenticating to SharePoint. But bear in mind that this image url is only valid for 1 hour as there is an Azure AD access token attached to it. After that you might have to request a new url by making the same Microsoft Graph call.

Hope this helps!

Microsoft Teams messaging extensions: User authentication, OAuth and Microsoft Graph

Microsoft Teams messaging extensions allow us to enhance teams messages with business data. We are able to fetch information (e.g. from Microsoft Graph or 3rd party APIs) based on various factors like the current user, current team or current channel and post it as part of a message using rich Adaptive cards.

This gives us a great way of creating Teams based integrations with other Line of Business (LOB) applications.

I won't go much deeper into the different possibilities with messaging extensions in this post. Instead, we will focus more on how they are built and how to authenticate the current user.

To know more about messaging extensions, have a look at the Microsoft docs:
https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/messaging-extensions/messaging-extensions-overview

Teams messaging extension architecture:

The way in which the messaging extensions work is by leveraging the Microsoft Bot Framework and utilising the following moving pieces:

1) A Bot Channel Registration which is essentially the identity of the Bot/Messaging extension. We need this to get the Bot Id and also to set "Microsoft Teams" as one of the channels served by the bot.

2) An endpoint which will receive (and respond to) HTTP POST messages from teams when the messaging extension commands are invoked.

3) A Teams App Manifest which contains the JSON specifying the messaging extension properties, the Bot  Id, and the messaging endpoint.

Those are the primary building blocks of a Teams messaging extension (or even a Teams Chat Bot for that matter, but that's out of scope for this post)

To see a walk-through of building a messaging extension from scratch, check out Cameron Dwyer's post: https://camerondwyer.com/2019/09/09/how-to-create-a-microsoft-teams-messaging-extension-pop-up-dialog-with-a-custom-ui/

Fetching data from Microsoft Graph as the current user (delegated authentication)

This is how the sign in flow will look. The user will have to sign in only once into the app. After that, the token flow (including the access tokens and refresh tokens) will be handled by the Bot Framework.

The user is prompted to sign in the first time they launch the compose messaging extension. After the sign in is completed, the messaging extension is able to show "security trimmed" data from the Graph. In this case, it's the groups the current user has joined:

Now let's see how we can leverage the Microsoft Graph in our messaging extensions. Before fetching data from the Graph, we will need an Azure AD OAuth token for the current user in Teams. To get the token flow working, first we need to create and Azure AD App Registration and give it necessary permissions:

Next, we need to create and configure the Bot Channel Registration:

Next, create and configure an OAuth Connection Setting in the Bot Channel Registration. The Client Id, Client Secret and Tenant Id should come from the AAD App Registration created in the previous step.

And here is the code to include in the Bot which handles the AAD sign in flow of the user. I am using the Bot Framework v4 for this Bot:

	private async Task<string> HandleMessagingExtensionOAuth(ITurnContext turnContext, MessagingExtensionQuery messagingExtensionQuery, string resourceUrl, CancellationToken cancellationToken)
	{
	BotFrameworkAdapter botAdapter = turnContext.Adapter as BotFrameworkAdapter;
	string accessToken = string.Empty;
	string myBotOAuthConnectionName = "CustomGraphConnection";
	//1. Check if the user has a token stored already in the bot framework service.
	var tokenStatusList = await botAdapter.GetTokenStatusAsync(turnContext, turnContext.Activity.From.Id, myBotOAuthConnectionName, cancellationToken);
	//Get the current relevant connection
	var tokenStatus = tokenStatusList.SingleOrDefault(ts => ts.ConnectionName == myBotOAuthConnectionName);
	//2. If token is found, fetch the token for the required resources
	if (tokenStatus.HasToken != null && tokenStatus.HasToken == true)
	{
	var tokenResponseDictionary = await botAdapter.GetAadTokensAsync(turnContext,
	myBotOAuthConnectionName,
	new string[] { resourceUrl },
	turnContext.Activity.From.Id,
	cancellationToken);
	if (tokenResponseDictionary != null)
	{
	accessToken = tokenResponseDictionary[resourceUrl].Token;
	}
	}
	//3. If token was not present in the bot framework service, check if we are in the middle of the sign in flow.
	//This is done by checking if the request from Teams to the bot service contains a magic code in the "query.state" property.
	//If we are in the middle of the auth flow and magic code is found, fetch the token using the magic code.
	if (accessToken == string.Empty && messagingExtensionQuery != null && messagingExtensionQuery.State != null)
	{
	TokenResponse tokenResponse = await botAdapter.GetUserTokenAsync(turnContext, myBotOAuthConnectionName, messagingExtensionQuery.State, cancellationToken);
	if (tokenResponse != null)
	{
	accessToken = tokenResponse.Token;
	}
	}
	//4. If acccess token is still empty, this means the user has not signed in to the bot. Send the user a sign-in action.
	if (string.IsNullOrEmpty(accessToken))
	{
	var oAuthSignInLink = await botAdapter.GetOauthSignInLinkAsync(turnContext, myBotOAuthConnectionName, cancellationToken);
	var SuggestedActions = new MessagingExtensionSuggestedAction()
	{
	Actions = new List<CardAction>()
	{
	new CardAction(ActionTypes.OpenUrl, title: "Sign-in into Contoso App", value: oAuthSignInLink)
	}
	};
	var invokeResponse = new InvokeResponse
	{
	Body = new MessagingExtensionResponse
	{
	ComposeExtension = new MessagingExtensionResult
	{
	Type = "auth",
	SuggestedActions = SuggestedActions
	}
	},
	Status = 200,
	};
	await turnContext.SendActivityAsync(new Activity {
	Value = invokeResponse,
	Type = ActivityTypesEx.InvokeResponse,
	});
	}
	return accessToken;
	}

view raw TeamsBotFrameworkV4OAuthToken.cs hosted with ❤ by GitHub

This code will fetch you the access token needed for calling the Graph. After that you can use the Graph SDK to get the required data:

	var graphClient = new GraphServiceClient(
	new DelegateAuthenticationProvider(
	requestMessage =>
	{
	// Append the access token to the request.
	requestMessage.Headers.Authorization = new AuthenticationHeaderValue("bearer", accessToken);
	return Task.CompletedTask;
	}));
	var userGroups = await graphClient.Me.GetMemberGroups().Request().PostAsync();
	//Return the groups in the messaging extension using adaptive cards.

view raw CallGraphWithBotFx4Token.cs hosted with ❤ by GitHub

Hope this was helpful. Given the complexity of Microsoft Teams development at this time, this post wasn't as comprehensive as I wanted it to be. There are challenges to getting everything to work together including Bot Framework v4, Teams Bot Builder (preview), Adaptive Cards and Messaging extensions. Hope the story becomes much simpler in the future.