Learn Skype Web SDK Day 2 : Logging Out

[contemplate-1]

View Demo

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.
[contemplate-2]