Yammer – SharePoint , beyond the Yammer App for SharePoint – Getting Started

Hi,

You can read my previous blog post of this series on Yammer integration with SharePoint but it’s not mandatory since we’re only getting started! However, as I hilighted, Yammer is full of interesting APIs that enable you to go far beyond what the Yammer App for SharePoint does.
The first thing to do in order to get started is to get an Office 365 Tenant and associate it with a Yammer Enterprise environment. This operation is mandatory because we’re going to use Yammer Enterprise only features. The detailed steps are explained by Microsoft on this page but I’ll summarize them for you:

  • Associate your company domain with Office 365. If you work for a company that has already 365, you have nothing specific to do here. If you just want to test, you must have a domain available somewhere. In my case, I just took my own domain silver-it.com and asked my hoster to add some specific DNS records that were requested by Office 365. Note that when associating a domain with 365, you can either associate everything, including mail, either only give the possibility to login with your domain name. In my case, I didn’t include mails because my hoster did not permit me to change everything at that level. This step can be important as Yammer Account activation is done via e-mail. What you can do at that level, is just create extra mailboxes in your own system if permitted and use them as dummy accounts.
  • Provision global admins, they will be promoted as global admins in Yammer Enterprise automatically
  • Activate Yammer in 365, very easy steps explained on the same Microsoft page mentioned earlier
  • Login to Yammer with one of your global admins.

Once you’ve done the above steps, you can register a new Yammer App using this link https://www.yammer.com/client_applications
Watch out and make sure you can play into this Yammer environment because you can’t delete an app yourself…you need to contact the Yammer support or delete the associate account to get rid of an app. To register an App, it’s really easy. Follow the link and click on the Register new App button, afterwards fill in the requested information as shown below:
yammerapp
in the web site & redirect URI blocks, I’ve put the root site collection of my Office 365 tenant. When done, you’ll be redirected to a screen showing you the App Keys:

yammerappkeys
Before being able to use this App to interact with Yammer, you first need to allow cross-domain communication if you plan to use the JavaScript SDK, which is what I’m going to do :). In order to allow the domain, you need to get back to the client_applications page, click on your App and on Basic Info; from there, you will see the Javascript Origins where you can add the host header of your SPO application. Note that you can put several lines if you plan to use the Yammer App from multiple applications.
yammercors
Now, everything should be ready to start leveraging that App. In order to make things easy and to consume Yammer from SPO via our App, the easiest is probably to create a new HTML page that you can store at the root of your site. So, perform the following steps:

  • Create a page named yammer.html on your own device
  • Open your site collection with SharePoint Designer
  • Drag & drop your html page into the root of your side from Windows Explorer into SharePoint Designer. This should upload the page onto your site

You should now be able to navigate to that page using https://yoursitecollection/yammer.html

It’s now time to write a little piece of code in order to get our Access Token for further use using the Yammer Login button. The AccessToken is your gateway to do any kind of magic with Yammer. In your HTML page, just place this piece of code (I’m using jquery for sake of simplicity here but feel free to use any framework of your choice):

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" 	src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" data-app-id="your-app-id" 	src="https://assets.yammer.com/assets/platform_js_sdk.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		if (sessionStorage.getItem("token") === null)
    	{
        	yam.connect.loginButton('#yammer-login',
        	function (resp) {
         		if (resp.authResponse) {
             		sessionStorage.setItem("token",resp.access_token.token);
             		yam.platform.request({
                		 url: "users/current.json",
                 		 method: "GET",
                 		 success: function (user) { //print message response information to the console
                     	 sessionStorage.setItem("user",JSON.stringify(user));
                     	 setUserInfo(user);
                 	},
                 	error: function (user) {
                     	console.log("problem!");
                 	}
             	});
         	}
     	});
    }
    else
    {
    	setUserInfo(jQuery.parseJSON(sessionStorage.getItem("user")));
    }
	});

    function setUserInfo(user)
    {
         html = "

<table>

<tr>

<td><img border='0' src='" + user.mugshot_url + "'/></td>


<td>Welcome " +
                         user.full_name + "</td>

</tr>


<tr>

<td colspan='2'>" +
                         user.job_title + " you can visit your site " +
                         user.web_url + "</td>

</tr>

</table>


";
                     $("#userinfo").html(html);
    }

</script>
</head>
<body>
<span id="yammer-login"></span>
<div id="userinfo"></div>
</body>

Here are the steps performed by the code:

  • I first include jQuery, then we are including Yammer’s platform.js using our app-id from the App we registered earlier
  • I declare a JavaScript function that performs the login operation in case the user isn’t logged in yet. I retrieve the AccessToken from the login operation and store in in the sessionStorage for further use.
  • I make an extra request to get user related information and store it in the sessionStorage as well
  • I declare another function that displays the user information

The first time you run this code, the login button should show up, just click on it and you should be prompted to log on and be requested to authorize the app as shown below:
yammerappauth
So far, in Yammer, there is no granularity in App authorization, the App can either do everything by inheriting the permissions of the user either nothing.

After that, you should see some basic user information on the page and by going to the sessionStorage with the developer tools, you should see what the code stored in it:
yammersession
Note that once you get the Access Token, you can keep it for years as it’s not supposed to expire but the Yammer doc isn’t very clear regarding this. You can reuse it afterwards as a bearer token in any HTTP request. This guy will not be invalidated unless the associated account is itself removed or you App is de-authorized. Also, the permissions associated to the account are checked whenever you use the token. Two kind of tokens can be distinguished:

  • 1) Normal user token : this guy is just the one corresponding to the currently logged it user
  • 2) Global admin token : this guy is much more powerful since it can not only do almost everything in Yammer but it can also impersonate other users and broadcast announcements to all users etc…

In the Yammer documentation, you’ll also notice that there are two kind of OAuth flows involved which are Client-Side flow (one we’ve done here) and Server-side flow. Both involve the user to login. In the scenarios I have in mind with SharePoint, I’m rather interested by the impersonation capabilities of the APIs using a GlobalAdmin token. If you do that, you don’t need to run trough neither of these flows anymore as you can just use the AccessToken as Bearer for further interactions.

Once you have received a token, you can just reuse it in any HTTP request, meaning that you don’t need to authenticate anymore with the Login Button. However, using the Javascript SDK, I strongly advise against using a Global Admin token directly from code since the JS code can be easily “reversed engineered” no matter whether you minify it or not. Any user could just use the developer tools and soon or later figure out the token. But still, getting a global admin token is far from being useless. Indeed, nothing prevents you from using it from a server-side service such as a web service or any other web application, like an Event Receiver, a workflow etc….and impersonate any user. The impersonation process can be done without the user consent, meaning that the user does not need to authorize the App explicitely to act on his behalf. When getting a token for a given user, the system will automatically grant the App to act on behalf of the user. If, in the meantime, the user revokes the access to your App, you need to claim a new token. Remember that this is only made possible for Global Admins. That will be the topic of my next blog post #ImpersonateOtherUsers

Happy Coding!

Advertisements

About Stephane Eyskens

Office 365, Azure PaaS and SharePoint platform expert
This entry was posted in Office 365, SharePoint Online, Yammer and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s