Yammer Embed Single Sign On

Yammer Embed Single Sign On header image

Working with Yammer is quite easy. You can either create a Yammer App, or use the Yammer Embed. In either case you are most likely to start off using the Yammer Developer Center. It contains most resources you require to build your first add-in or app.

Yammer Embed Feed

In a recent scenario we used the Yammer Embed to work with the open-graph feed. Something that seemed fairly easy after reading the documentation. Using the sample Yammer Developer Embed Feed.

<script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_embed.js"></script>
<div id="embedded-feed" style="height:400px;width:500px;"></div>
<script>

yam.connect.embedFeed({
  container: '#embedded-feed'
          , network: 'contoso.com'
        , feedType: 'open-graph'
        , feedId: ''
        , objectProperties: {
          url: 'http://www.opengraphpage.com/'
          , type: 'page'
        }
    });
</script>

Now in our scenario we provided the add-in as a provider hosted add-in, so there was no way to know the network property. As it turns out you can leave the network property and everything seems to work. So the next step was to enable the feed for Single Sign On. The snippet provided for provided is:

yam.connect.embedFeed({
  container: '#embedded-feed'
    , feedType: ''
    , feedId: ''
    , config: {
         use_sso: true // this line enables SSO
         , header: true
         , footer: true
         , showOpenGraphPreview: false
         , defaultGroupId: 3257958      // specify default group id to post to
    }
});

Combining both samples with the notion that we didn’t want the network permalink attached we ended up with the following snippet:

<script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_embed.js"></script>
<div id="embedded-feed" style="height:400px;width:500px;"></div>
<script>

yam.connect.embedFeed({
  container: '#embedded-feed'
        , feedType: 'open-graph'
        , feedId: ''
  , config:  {
    use_sso:true
  }
        , objectProperties: {
          url: 'http://www.opengraphpage.com/'
          , type: 'page'
        }
    });
</script>

The confusing thing is that this will work for Yammer accounts that are created in Office 365 (so no ADFS / SSO) accounts. Users get prompted to log in and provide their credentials. If they have done that they are redirected to the correct yammer network and everything runs smooth. However if you have SSO enabled and your accounts are synced using ADFS you will end up with an infinite loop. You can click the log-in button but when you log-in you will end up getting the log-in window again.

As it turns out the network property is required when trying to enable SSO. So while documentation does not point out that it is, you will see that once you provided the network property everything runs smooth and SSO actually works. For provider hosted add-ins working with Yammer embed that means that you as a developer are responsible. You will have to have logic in place that allows your users to provide their Yammer network permalink.

In our case we came up with an interface allowing the user to store their Yammer network permalink to local storage. Local storage is preferred over cookies as it cannot be read by the server. Local storage thus means that your add-in cannot provide your server with the network permalink that would most likely classify as be identifiable data.

Setting and getting local storage data with JavaScript is rather easy as shown in the following sample

var localStorageKey = "MyKey",
    localStorageValue = localStorage.getItem(localstorageKey);

if (localStorageValue === undefined || localStorageValue === null || localStorageValue.length <= 0) {
    localStorageValue = "samplevalue";

    localStorage.setItem(localstorageKey, localStorageValue);
}

The checks for undefined and null might seem redundant but they depend on the kind of data you save. So to make sure you are not working with a null or an undefined value (or an empty string) you should check for that.

Long story short, when working with Yammer Embed and SSO you are required to set the network property or your users will not be able to log in. It took me long enough to check all the requests with Fiddler before I figured out the network was required.

Loading comments…