View all articles by this author
12 November 2020
The purpose of this article is to give a bit more visibility and to comment one issue that we have been facing off during the last months with a React component based on the Yammer API.
The Yammer API documentation contains some examples about how to work with it, first registering an APP within Yammer and using the SDK for authentication with Yammer's OAuth 2. We were using that approach in a React component, used within SharePoint, and it was working perfectly until some weeks ago.
It seems that Microsoft is evolving Yammer to integrate it more within the Microsoft 365 ecosystem ( Teams, Outlook, SharePoint, ... ) and all these applications requires AAD tokens to work properly.
Sometime this Summer, we started to have issues during the authentication of our app through the Yammer Oauth2 flow, so we had to find and follow a different approach. See here additional information about the issue and the cause.
The alternative found, and also proposed by Microsoft, is to use a client library to acquire an AAD token from the Microsoft Identity Platform (MSAL) and use it with the Yammer API. For the acquisition of this token we need an application registered in Azure AD that contains delegated permissions for the Yammer API (at the time of writing this article user_impersonation is still in preview).
Note: Using this approach, the Yammer app that we were registering in Yammer is not required anymore.
In our case, instead of creating a new application in AD, as we are working with SharePoint and we already have some SPFx webparts using Graph, we are using the app SharePoint Online Client Extensibility Web Application Principal that is already present in Azure.
To check if the application is present go to the Azure subscription > App registrations and search in All applications by SharePoint.
If it wasn't already created, you could run a PowerShell command present in the module SharePointOnlinePowershell to enable it.
Enable-SPOTenantServicePrincipal [-WhatIf] [-Confirm] [<CommonParameters>]
Once that we have the application in Azure AD, we should give permissions to Yammer. To do this, click on the application, go to the API permissions page and click on "Add a permission" to add user_impersonation Delegated permissions on Yammer. Make sure that you grant permissions.
Once we have the App in Azure ready, we need to make the changes in our solution to get a token using the App and set it in the Yammer API to make it work.
First, for this example, I'm using a wrapper for MSAL 2.0 in the PnP/PnPjs project.
You could install it this way:
npm install @pnp/msaljsclient --save
Once installed, we have to configure the client. We can use the SharePoint page context to get the SharePoint Online Client Extensibility Web Application Principal id ( spfx3rdPartyServicePrincipalId ).
...
var msalClient = new MsalClient({
auth: {
authority: `https://login.microsoftonline.com/${pageContext.tenantDisplayName}.onmicrosoft.com`,
clientId: pageContext.spfx3rdPartyServicePrincipalId,
redirectUri: `https://${pageContext.tenantDisplayName}.sharepoint.com/_forms/spfxsinglesignon.aspx`,
},
});
...
Once we have configured the MSAL client, we can get a token.
...
var token = await msalClient.getToken(["https://api.yammer.com/user_impersonation"]);
...
After that, we only have to indicate to our Yammer object that we want to use that token to make the requests.
yam.platform.setAuthToken(token);
From that moment, all requests to the API will contain the token obtained using the MSAL client.
I hope that this helps to you to make your app work again!
