Background
We were developing a SharePoint application for one of our client and have some web-parts that had to retrieve data from Yammer. As we were developing on SharePoint Online (SPO) using a popular SharePoint Framework (SPFx), so for the most part of our engagement we were developing using a client-side library named React to deliver what is required from us.
In order for us to integrate client’s Yammer data into our web-parts, we were using JavaScript SDK provided by Yammer.
Scenario
We were having around 7-8 different calls to Yammer API in different web-parts to extract data from Yammer on behalf of a logged-in user. Against each API call, a user has to be authenticated before a call to Yammer API has been made and this has to be done without the user being redirected to Yammer for login or presented with a popup or a button to log in first.
If you follow Yammer’s JavaScript SDK instructions, we will not be meeting our client’s requirement of not asking the user to go Yammer first (as this will change their user flow) or a pop-up with login/sign-in dialog.
Approach
After looking on the internet to fulfill above requirements, I could not find anything that serves us. I have found the closest match in PnP sample but it only works if a client has already consented to your Yammer app before. In our case, this isn’t possible as many users will be accessing SharePoint home page for the first them and have never accessed Yammer before.
What we have done is, let our API login calls break into two groups. Randomly one of the calls was chosen to let the user login to Yammer and get access token in the background and cache it with Yammer API and make other API login calls to wait for the first login and then use Yammer API to log in.
Step-1
This function will use standard Yammer API to check login status if successful then it will proceed with issuing API data retrieval calls, but if could not log in the first time; it will wait and check again after every 2 sec until it times out after 30 sec.
[code language=”javascript” highlight=”5,10,13,19″]
public static loginToYammer(callback: Function, requestLogin = true) {
SPComponentLoader.loadScript(‘https://assets.yammer.com/assets/platform_js_sdk.js’, { globalExportsName: "yam"}).then(() => {
const yam = window["yam"];
yam.getLoginStatus((FirstloginStatusResponse) => {
if (FirstloginStatusResponse.authResponse) {
callback(yam);
}
else {
let timerId = setInterval(()=>{
yam.getLoginStatus((SecondloginStatusResponse) => {
if (SecondloginStatusResponse.authResponse) {
clearInterval(timerId);
callback(yam);
}
});
}, 2000);
setTimeout(() => {
yam.getLoginStatus((TimeOutloginStatusResponse) => {
if (TimeOutloginStatusResponse.authResponse) {
clearInterval(timerId);
}
else {
console.error("iFrame – user could not log in to Yammer even after waiting");
}
});
}, 30000);
}
});
});
}
[/code]
Step-2
This method will again use the standard Yammer API to check login status; then tries to log in user in the background using an iframe approach as called out in PnP sample; if that approach didn’t work either then it will redirect user to Smart URL in the same window to get user consent for Yammer app with a redirect URI set to home page of your SharePoint where web-parts with Yammer API are hosted.
[code language=”javascript” highlight=”5,10,15″]
public static logonToYammer(callback: Function, requestLogin = true) {
SPComponentLoader.loadScript(‘https://assets.yammer.com/assets/platform_js_sdk.js’, { globalExportsName: "yam"}).then(() => {
const yam = window["yam"];
yam.getLoginStatus((loginStatusResponse) => {
if (loginStatusResponse.authResponse) {
callback(yam);
}
else if (requestLogin) {
this._iframeAuthentication()
.then((res) => {
callback(yam);
})
.catch((e) => {
window.location.href="https://www.yammer.com/[your-yammer-network-name]/oauth2/authorize?client_id=[your-yammer-app-client-id]&response_type=token&redirect_uri=[your-sharepoint-home-page-url]";
console.error("iFrame – user could not log in to Yammer due to error. " + e);
});
} else {
console.error("iFrame – it was not called and user could not log in to Yammer");
}
});
});
}
[/code]
The function _iframeAuthentication is copied from PnP sample with some modifications to fit our needs as per the client requirements were developing against.
[code language=”javascript” highlight=”13,19,36″]
private static _iframeAuthentication(): Promise<any> {
let yam = window["yam"];
let clientId: string = "[your-yammer-app-client-id]";
let redirectUri: string = "[your-sharepoint-home-page-url]";
let domainName: string = "[your-yammer-network-name]";
return new Promise((resolve, reject) => {
let iframeId: string = "authIframe";
let element: HTMLIFrameElement = document.createElement("iframe");
element.setAttribute("id", iframeId);
element.setAttribute("style", "display:none");
document.body.appendChild(element);
element.addEventListener("load", _ => {
try {
let elem: HTMLIFrameElement = document.getElementById(iframeId) as HTMLIFrameElement;
let token: string = elem.contentWindow.location.hash.split("=")[1];
yam.platform.setAuthToken(token);
yam.getLoginStatus((res: any) => {
if (res.authResponse) {
resolve(res);
} else {
reject(res);
}
});
} catch (ex) {
reject(ex);
}
});
let queryString: string = `client_id=${clientId}&response_type=token&redirect_uri=${redirectUri}`;
let url: string = `https://www.yammer.com/${domainName}/oauth2/authorize?${queryString}`;
element.src = url;
});
}
[/code]
Conclusion
This resulted in authenticating Office 365 tenant user within the same window of SharePoint home page with the help of an iframe [case: the user had consented Yammer app before] or getting a Yammer app consent from the Office 365 tenant user without being redirected to Yammer to do OAuth based authentication [case: the user is accessing Yammer integrated web-parts for the 1st time].
We do hope future releases of Yammer API will cater seamless integration among O365 products without having to go through a hassle to get access tokens in a way described in this post.