How to run the new Skype Web SDK Online Samples

Recently at Build 2016, the Skype for Business Product Team announced that Skype Web SDK Online is now available for General Availability (GA).

This probably means a ton of new developers coming to Skype for Business development for the first time, or existing Skype for Business developers looking to get going quickly with a Skype Web SDK Online example quickly so they can see what’s possible.

Welcome 🙂

Luckily for you guys, Skype Web SDK Online ships with sample code so you can see what’s possible.

This post answers the following key questions about using that sample code:

How do I run the samples?

Where do I get the access keys from?

Why doesn’t my sample code run / What have I forgotten / What didn’t I know?

Rather than a format this blog post as a news article, I’m just going to go through the thought-process I went through, with screenshots – so you can play along at home if you like. I’m hoping that by seeing what I did, what errors I got and how I fixed them, I can help you avoid some of the pitfalls.

Get the Sample Code

You can download the sample code from GitHub at https://github.com/OfficeDev/skype-web-sdk-samples/tree/master/SkypeWebSDKOnlineSample.

I have IIS on my computer, so I’m going to create a new Site and dump the contents of the sample there, and then visit it via http://localhost. This is because I’m a developer, and this is a developer solution. Your needs may vary.

As soon as I load the site it loads the index.html page. It then transfers me immediately to a Microsoft sign-in page. This makes sense, this is after all a sample showing how the Skype Web SDK works with Skype for Business Online. It makes sense that I need to sign in as a Skype for Business Online user.

So, I do that, and:

Boo Hoo!  What’s happened here? Well, in a lot of the Microsoft Online error messages, the actual technical message is hidden in size 8 at the bottom. That actually says:

AADSTS70001: Application with identifier ‘d1763d46-5e84-413f-97f0-faa9c49a8e41’ was not found in the directory thoughtstuff.onmicrosoft.com

That actually makes sense. We’ve arrived with our new sample application and we’ve logged in with our Skype for Business Online credentials, but nowhere have we actually said that it’s OK for this application to use our Skype for Business instance. This whitelisting of applications allows Skype for Business admins to control access to who uses what applications and prevents abuse.

In fact, it’s worse than that! We’ve walked off with someone else’s application ID, as it’s included in the sample code. What we really need to do is create our own application, get our own access ID and use that instead. Let’s do that now.

Link Azure and Office 365 (if you haven’t already)

This is a pre-requisite step. If you haven’t yet introduced your Office 365 tenant to an Azure account you need to do that. Applications are managed through Azure, not Office365 so you need to link them together. Full details of how to do this can be found here on MSDN (ignore the references to OneNote, the concept is the same).

Create a new Skype for Business application

If you’ve not yet created a Skype for Business application, now is the time! You can follow steps 2 and 3 (but ignore section 4 for now) from my guide post “Skype Web SDK Online – Setting Everything up – Step by Step Guide” and then come back here.

Once you’ve created the application and have the new Application ID in hand, open up the index.html file in the sample with a text editor such as Notepad. There are two instances of the application ID (called the client_id in the code) which is d1763d46-5e84-413f-97f0-faa9c49a8e41 in the sample file. Replace both of them with your new ID, and save the file.

Take 2

Let’s try again. It looks like we get the same error, but looking again at the technical information section, we actually see a different error:

AADSTS50011: The reply address ‘http://localhost/’ does not match the reply addresses configured for the application: YOUR-NEW-ID-IS-HERE!

Well, it’s closer. Our application ID is recognised but the “reply address” isn’t correct.  (if you’re running everything from http://localhost and not from a sub folder or different domain, you probably won’t hit this problem (because your reply URL will already be listed in Azure) and you can skip onto the next section.)

Let’s look again at the code in the index.html file. There are two parts to it. The first part has a comment which suggests that if there isn’t a token in the URL then it should redirect to get one. This is the code that sends us off to log in. You can see that a redirect_uri is passed and location.href (which in this case is http://localhost) is used. This is the same URL that’s mentioned in the error. OK, that makes sense. It makes sense that Skype for Business is whitelisting the domains where different applications can be used. Only the correct combination of application ID and domain will be allowed. So, we need to configure our application to accept the domain we’re running on, currently http://localhost.

Set Your Reply URLs

If you go back to Azure and find your application again, in the Configuration section you will see that you can specify one or more Reply URLs. This is where you need to add http://localhost as your Reply URL. If you already have a URL at the localhost domain then you may need to delete it first before you can save the one you actually want to use.

Take 3

Loading up our sample page again this time does something different! We get to what looks like a familiar sample page, but something is wrong. We have a never-ending spinner of doom:

Looks like we still have a problem.

Hacking Time!

There’s not really an easy way to lead you to what to do next! I only know it because I’ve written one of these samples from scratch, so I knew where to look. This isn’t really the easiest move for a Hello World sample, but here you go.

Using Notepad, open the file /UI/samples/scripts/sign-in.js. Look for the function signIn (search for function signIn() { ), it’s probably on or around line 83.

At the start of that function are some parameters, including the client_id, with a reference to the ‘old’ ID from the sample! We need to replace this with our own, new Application ID. For extra nerd-power, you can also specify your own User Agent string by modifying the ‘version’ parameter. Save and close this file, and reload the file.

Take 4

Hurrah! Great Success! We have signed in!

You can try various things from the samples page. Be warned though that not all of them work! It looks like this sample has been taken from the standard Skype Web SDK sample site, which includes functions which are not currently supported by Skype Web SDK Online. You can see the full list of what’s supported and what’s not at my blog post “Skype Web SDK is now GA, out of Preview“.

If you liked that…

Anyway, I hope this has been useful. I’m Tom Morgan, Microsoft Skype for Business MVP and your guide to Skype for Business development. If you’re new to Skype for Business development and want to know more then you might be interested in the rest of my website. There’s also a low-volume newsletter you might want to subscribe to. Or, you might just like to follow me on Twitter.

Written by Tom Morgan

Tom is a Microsoft Teams Platform developer and Microsoft MVP who has been blogging for over a decade. Find out more.

---

Buy the book: Building and Developing Apps & Bots for Microsoft Teams. Now available to purchase online with free updates.

Related posts:

Skype Web SDK Online – Setting Everything up – Step by Step Guide Learn Skype Web API Day -2 : Server Prerequisites Skype for iPhone update 5.10 – Skype Call URIs are back! How to: Skype Web SDK Development without having all the server pre-requisites in place Learn Skype Web SDK Day -1 : Setting Up Your Development Environment