Consuming Yammer RESTful API with AngularJS for Dummies


This blog is a continuation of the Yammer RESTful API for dummies series. We are going to write a simple AngularJS client that consumes the Yammer users.json RESTful API endpoint. 

The AngularJS client will be accessed by opening the users.html file in your browser, and will consume the Yammer api service accepting requests at:

 https://api.yammer.com/api/v1/users.json  

Note that the Yammer REST API documentation uses https://www.yammer.com as the API endpoint host; you should always remember to change it to https://api.yammer.com.

The users.json API endpoint will respond with a JSON representation of all the users in the Yammer network.

Create an AngularJS Controller

First, let's create a very simple AngularJS controller that will consume the REST service. This can be done with and without user authentication prompt.  

Yammer support often get advisory questions from customers wanting to pull generic non-user specific yammer feeds into their (intranet) websites without authentication. Now, yammer does not support anonymity or public data so a user must be authenticated in one way or the other to be able to get and/or post yammer contents. To achieve this goal, you'd need to create a service account and obtain an access token using the instructions in this documentation.

Considering this is a newbie guide and if the documented process of obtaining yammer token is too complicated for you, you may try the following steps: 

  • Login to Yammer using the service account
  • Inspect the elements on the page
  • Navigate to the network tab
  • Reload the page if necessary
  • Locate any line containing .json originating from www.yammer.com. See screenshot below
  • Click the Request Header section
  • Look out for the line starting with "Authorization: Bearer "
  • Copy the token into a secure place

The above process is an alternative way of obtaining a user access token and it should look like this in Firefox:


The caveat is, tokens that are generated (or copied from browser elements) this way may be short lived or rendered invalid when the user logs out of the browser session. So I'd recommend you generate a token from a registered app for production purpose as they are long lived.  

Next, create a controller.js file then copy and paste this code into it: 

 function YammerGetUserCtrl($scope, $http ) {  
 $http.get('https://api.yammer.com/api/v1/users.json', {headers: {'Authorization': 'Bearer TOKEN_VALUE'}}).  
      success(function(data) {  
       $scope.users = data;  
      console.log($scope.users)  
     });  
 }  

Once that's done, replace TOKEN_VALUE with the access token you obtained.  

This controller module is represented as a simple JavaScript function that is given AngularJS’s $scope and $http components. It uses the $http component to consume the REST service at "/api/v1/users.json". The $http component sends a GET request to the API endpoint with a pre-defined Authorization header; this is one way of consuming Yammer feeds without prompting for authentication. 

If the GET request is successful, it will assign the JSON returned back from the service to $scope.users, effectively setting a model object named "users". By setting that model object, AngularJS can bind it to the application page’s DOM, rendering it for the end user to see. Bear in mind that this could be a lot better but slightly more complex, and I am seriously trying to keep the above implementation as simple as it possibly can because this tutorial is meant for you - newbie.  

Create the HTML Page

Now that you have an AngularJS controller, let's create the HTML page that will load the controller into the user’s web browser. Let's give it users.html as the file name. 

 <!DOCTYPE HTML>  
 <html ng-app>  
   <head>  
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  
    <script src="controller.js"></script>  
   </head>  
   <body>  
    <hr>  
    <p></p>  
    <h3> Yammer Users</h3>  
    <div ng-controller="YammerGetUserCtrl">  
      <div align="left"> Filter users : <input type="text" ng-model="yamUser"> &nbsp;&nbsp; <br><br> </div>  
      <p ng-show='yamUser.length>0'> ({{yamUser.length}}) </p>  
       <table>  
         <thead valign="top">  
          <tr>  
            <th>userID</th>  
            <th>Full Name</th>  
            <th>NetworkID</th>  
            <th>Activation Date</th>  
            <th>Face</th>  
          </tr>  
         </thead>  
         <tbody>  
          <tr ng-repeat ="user in users | filter:yamUser" ng-class-even="'alt'">  
            <td> {{ user.id}}</td>  
            <td> {{ user.full_name }}</td>  
            <td> {{ user.network_id }}</td>  
            <td> {{ user.activated_at}}</td>  
            <td> <img src= "{{ user.mugshot_url}}"/></td>  
          </tr>  
          <tr ng-if"users.length==0" colspan="4"> No matching results for {{yamUser}} {{user.length}} </tr>  
         </tbody>  
       </table>  
    </div>  
   </body>  
 </html>  

Note the following two script tags within the head section.

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>   
 <script src="controller.js"></script>   

The first script tag loads the minified AngularJS library (angular.min.js) from a content delivery network (CDN) so that you don’t have to download AngularJS and place it in your project. It also loads the controller code (controller.js) from the application’s path.

The AngularJS library enables several custom attributes for use with standard HTML tags. In users.html, four such attributes are in play:

  • The <html> tag has the ng-app attribute to indicate that this page is an AngularJS application.
  • The <div> tag has the ng-controller attribute set to reference YammerGetUserCtrl, the controller module. 
  • The <tr> tag has the ng-repeat directive and it is used to iterate over each element in the users' collection.
  • The same <tr> tag also contains the filter directive and it used to search/filter by the properties of the users.

Also note the five <td> tags which use placeholders (identified by double-curly-braces).

 <td> {{ user.id}}</td>  
 <td> {{ user.full_name }}</td>  
 <td> {{ user.network_id }}</td>  
 <td> {{ user.activated_at}}</td>  
 <td> <img src= "{{ user.mugshot_url}}"/></td>  

The placeholders reference the properties of the JSON objects which will be set upon successfully consuming the REST service. You can easily identify the property names by copying the returned JSON into a JSON viewer - http://jsonviewer.stack.hu/

Running your code

Update the Javascript origin with the host name of your application if you haven't done so to avoid CORS error, something like:

 XMLHttpRequest cannot load https://api.yammer.com/api/v1/users.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin....  

Lunch your app and navigate to the users.html page. This is how mine looks like - I added some css styles.


Summary

Congratulations! You’ve just developed an AngularJS client that consumes a Yammer RESTful web service.

One important security advice is to never use the access token the way it was described above in a public website. Anyone could impersonate the service-account user if the access token is compromised. You may explore other ideas of storing the access token in a database, or at least try to scramble it using any javascript obfuscation tool. A typical example is javascriptobfuscator.com

Lastly, you'd need to take each user through the authentication flow if you require user specific feed and if the yammer embed feed feature does not meet your requirement. See a sample implementation here

Feel free to download and re-use the source of the implementation that is described in this blog from GitHub


[bing_translator]

Comments (18)

  1. Anonymous says:

    So you are about to start developing with the Yammer REST API? You probably have a lot of questions and

  2. Anonymous says:

    So you want to add multiple users to a yammer group via the API? You are not alone!

    This question

  3. Deepali Chandra says:

    Can you please provide a code where one can view posts from ‘All Company’ Feed using the above mode of authentication i.e. with Bearer Token

  4. Deepali, You may access the "All Company" feed using
    https://api.yammer.com/api/v1/messages/general.json

    So from the sample code I provided, change "users.json" to "messages/general.json". Also, change the ng placeholders in the curly brackets to match the JSON response objects.

    That said, it looks like the general.json endpoint is undocumented as such the yammer team reserve the right to change the workings of that endpoint without notice. Although it’s being around and untouched for ages 🙂

  5. Deepali Chandra says:

    Hi Israel, Thanks for the response. I was able to view the messages. But with Javascript the messages are returned in plain text and it will be a burden to give them proper look and feel as provided by Yammer Embed. Is there a way in which we can use Yammer
    Embed to do the same above task.

  6. No, Yammer embed is not customizable. You’d need to build your custom UI if you must use the APIs.

  7. Deepali Chandra says:

    I don’t need to customize the feed. I just want to display the feed to all the users who are not even part of Yammer using Yammer Embed.

  8. Roger says:

    Hi,

    Good demo, however, using the Bearer token from the yammer site in my app does not work for me. It only works when I follow the proper documentation for how to obtain the Bearer token.

  9. Thanks for the feedback, Roger. Technically, you cannot perform any read/write operation on the yammer site if that token is invalid. So you want to double check that you didn’t include any trailing white spaces when you copied the token into your code.
    Yammer uses it just like your app would. That said, it’s always good to avoid short cuts 😉

  10. Krunal Patel says:

    Hi Israel, I cannot find source code. Can you please update url for same?

  11. Sorry for the delay, MichaelOHanlon. I’ve being preoccupied of late. I just committed the source code into a github repo and have updated the blog.
    https://github.com/iogbole/yam_ng. Let me know if you have any questions.

  12. Jagnarain Singh says:

    Hi Israel, Can we get the OAuth token pragmatically without open yammer login popup window?

  13. Jagnarian, It's not possible to obtain tokens programmatically without browser popup (yet). I know there's a blog out there that describes how to hack yammer api to achieve this purpose, but it doesn't work and it's unsupported

  14. Nimish says:

    The short cut to acquiring a test token is great for dev purpose. Thanks

  15. Paul Graham says:

    Great post. How do I update the Javascript origin with the host name of your application. Thank you.

  16. Indu Gupta says:

    Hi,
    Your post is Very helpful..But I am facing CORS issue. I added headers in angular but still nothing changed.
    Here is my error:
    MLHttpRequest cannot load https://api.yammer.com/api/v1/messages/my_feed.json. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.
    Please help me with this

    1. @Indu Gupta – Did you update the Javascript origin in yammer with your application’s host name?

      1. Indu says:

        Thank for your reply..Yeah, I added. then its working:)

Skip to main content