How to: Skype Web SDK Development without having all the server pre-requisites in place

As a result of the Learn Skype Web SDK series, I’ve received feedback a number of times from people who want to try out the new SDK, but can’t. The feedback normally goes something like:

“Hi. I’d really like to try out this new SDK, but I don’t have a lab environment where I can run Skype for Business, and my company won’t upgrade our production environment, and won’t add my localhost to their allowed domain list, so I don’t have an environment to use, and well… it’s just not FAIR!”

Well, you’re in luck. What if I told you that Microsoft has built a sandbox environment, designed for developers, which you can access from your localhost and use with Skype Web SDK. Interested? Good, read on…

Using the Sandbox

The Sandbox is the same one that was built out for UCWA. You get three user accounts in the same environments, so you can make conversations between those three users.

To get started go to ucwa.skype.com and click Code from the menu at the top. Look for the Credentials section. You may need to log in if you don’t see any credentials listed. You’re looking for something like this:

Keep hold of this information for use in a moment. Notice as well that the tokens expire and need to be regularly renewed.

Using with the Learn Skype Web SDK Samples

You can use these credentials with the Learn Skype Web SDK samples in the series, with a small amount of modification. If you look at any of the code samples from the series you’ll notice the same HTML code to collect usernames and passwords:

 <div class="form-group">
      <label for="username" class="col-sm-2 control-label">Username</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="username" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label for="password" class="col-sm-2 control-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="password" placeholder="Password">
      </div>
    </div>

Also, you’ll see the same JavaScript code to sign-in in every sample:

 $('#btnLogIn').click(function () {

        // start signing in
        client.signInManager.signIn({
          username: $('#username').val(),
          password: $('#password').val()
        }).then(function () {
            //log in worked!
            alert('Logged in!');
          }, function (error) {
            //Something went wrong.
            alert(error);
          });
      });

Firstly, let’s replace the HTML with something that collects the domain tokens instead of usernames and passwords:

 <div class="form-group">
    <label for="username" class="col-sm-2 control-label">Domain</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="domain" placeholder="metio.net">
    </div>
  </div>
  <div class="form-group">
    <label for="password" class="col-sm-2 control-label">Token</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="token" placeholder="Bearer cwt=ABCDE">
    </div>
  </div>

Then, we can modify the JavaScript. The Skype Web SDK SignIn method allows passing of domain tokens as well as normal usernames and passwords. It does this by using an options collection which you can use to provide the bearer token as as authorisation:

$('#btnLogIn').click(function () {
        // start signing in
       
      var domain = $("#domain").val();
      var access_token = $("#token").val();
	  var options = {
          auth: function (req, send) {
              req.headers['Authorization'] = access_token.trim();
              return send(req);
          },
          domain: domain
      };
      client.signInManager.signIn(options).then(function () {
            //log in worked!
            alert('Logged in!');
          }, function (error) {
            //Something went wrong.
            alert(error);
          });
      });

Save and refresh, and the sample should show this instead. (Here I’m using the code from Day 1):

The Domain when using the sandbox is metio.net.

The Token is the full string that you were give in the Credentials section, including  the section at the front which starts “Bearer cwt=”. So, a valid token would be:

Bearer cwt=AAEBHAEFAAAAA...YfFXYIYIdVX1isqD0ggNEPafGCkKskFVn6NvOvBYlbY

All being well, you should then be able to log in.

Use with localhost only

One thing I’ve found – if you look at normal server pre-requisites for using Skype Web SDK you’ll see that you have to explicitly list all domains that will connect to the server. The metio.net server has been set to accept localhost only – so you can’t run it from your custom domain. You can’t even use a custom port (e.g. localhost:8080) – it has to be port 80. It does look like you can use either http or https though, which is good.

You can see a version of the Day 1 code sample using these changes on GitHub.

Enjoy the sandbox!

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:

Learn Skype Web SDK Day 1 : Logging In Learn Skype Web SDK Day 2 : Logging Out Learn Skype Web SDK Day 3 : Getting Your Own Presence Learn Skype Web SDK Day 4 : Getting Your Own Information Learn Skype Web SDK Day 7 : Setting Your Own Presence