Learn Skype Web SDK Day 2 : Logging Out
This is one post in a series of more than 30, devoted to helping you get up to speed quickly with the new Skype Web SDK. Each lesson comes with source code (in GitHub) and a working demo page so you can see what it does. Check out the full list of posts on the Skype Web SDK page.
Last time we talked about getting logged in, and looking at the current signed-in state.
Equally important is getting logged out. If you only ever log in using the Skype for Business API and don’t log out, instead just closing the browser, then the user you have signed in will continue to show as signed in for a period of time afterwards. This can be confusing to people who try and send them messages etc. Therefore, you should try and ensure that a log out takes place when the user has finished wherever possible.
To sign out, call signOut on the signInManager object. The method doesn’t take any parameters, and returns a promise so you can react to a successful or unsuccessful sign out:
client.signInManager.signOut()
.then(function () {
//log out worked!
alert('Logged out!');
}, function (error) {
//Something went wrong.
alert(error);
});
Previously, we talked about the state property of the signInManager. Whilst you can always use that to retrieve the current sign-in status of the user, you might want to make your application more responsive.
You can react to changes in state by coding against the state.changed event:
client.signInManager.state.changed(function (state) {
//do something, the state has changed.
});
The new value of state is available in the state parameter.
Alternatively, you can react conditionally, according to specific states. For instance, to do something only if the state has just changed to SignedIn:
client.signInManager.state.when('SignedIn', function () {
//do something, state is SignedIn
});
The example below takes the log-in example from before, adds a Log Out button, and adds a log-in state indicator:
<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>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" id="btnLogIn">Log in</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" id="btnLogOut">Log out</button>
</div>
</div>
<div>
<span id="loginStatus">...</span>
</div>
<script type="text/javascript">
var client;
$(function () {
'use strict';
Skype.initialize({
apiKey: 'SWX-BUILD-SDK',
}, function (api) {
client = new api.application();
// whenever client.state changes, display its value
client.signInManager.state.changed(function (state) {
$('#loginStatus').text("Login State: " + state);
});
}, function (err) {
alert('Error loading Skype Web SDK: ' + err);
});
$('#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);
});
});
$('#btnLogOut').click(function () {
// start signing out
client.signInManager.signOut()
.then(function () {
//log out worked!
alert('Logged out!');
}, function (error) {
//Something went wrong.
alert(error);
});
});
});
</script>
Demo Online
You can try this code out against your own Skype for Business environment by going to the demo page. From here you can also download the code from GitHub if you want to host it
locally, or take it and use it in your next project.
Good to Know
- Before you can run this code, make sure you've read my post on all the prerequisites you need to have in place.
- You don't have to copy the code from here - it's all on GitHub!
- If you liked this post, there are more! Check out the dedicated Skype for Web SDK Collection page, or signup to the newsletter
- Need a Skype for Web SDK solution, but not in a position to build yourself? Hire me!
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.
