Learn Skype Web SDK Day 1 : Logging In
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.
Getting signed in using Skype for Web API’s predecessor, UCWA, used to be a complicated process involving trying different URLs, passing around tokens and generally trying to convince the server to let you in. One of the real benefits of the Skype for Web API is that it’s greatly simplified this process into a single JavaScript call.
The starting point for using the Skype for Web API is the Application object. This is actually the only object in the API which you construct yourself. Everything else hangs off this Application object. An Application object represents an endpoint which you can sign in and do things with. You can create multiple Application objects and have each one sign in as a different user, if you need to.
The signInManager object is responsible for navigating all the different types of authentication and getting you logged in. There are just two commands: signIn and signOut.
Because it’s so new we’re still understanding how everything works, where all the bits are, and what does what. At first glance, it looks like the actual JavaScript code that is the SDK is being presenting using almond, an AMD loader. This could be done for speed or ease of updating. Whatever, the reason – we can’t just add a script tag and get coding. We need to load in the script. This is done like this:
var client;
$(function () {
'use strict';
Skype.initialize({
apiKey: 'SWX-BUILD-SDK',
}, function (api) {
client = new api.application();
}, function (err) {
alert('Error loading Skype Web SDK: ' + err);
});
....
});
There are different types of credentials you can supply when logging in. This example is going to look at basic authentication: where a Skype for Business username and password are supplied. However, logging in via Windows Authentication and OAuth are also supported.
To sign in using basic authentication, called the signIn method passing two values: username and password:
var client = new Skype.Web.Model.Application;
client.signInManager.signIn({
username: $('#username').val(),
password: $('#password').val()
}).then(function () {
//log in worked!
alert('Logged in!');
}, function (error) {
//Something went wrong.
alert(error);
});
The method returns a promise, so you can react to either a succesful login or a failure.
It’s useful to be able to know the current logged-in state, and the signInmanager can help with that to. It exposes a property: state, which gives you the current logged-in state. Valid states are:
- SignedOut
- SigningIn
- SignedIn
- SigningOut
The example below shows a webpage with a username and password button, and a Sign In button, which performs a sign-in to Skype for Business.
<div class="form-horizontal">
<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>
<script type="text/javascript">
$(function () {
'use strict';
var client = new Skype.Web.Model.Application;
$('#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);
});
});
});
</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.
Hi, I tried your online demo program on ‘Signing In using Skype web SDK’, and am facing 403-forbidden issue while auto-discovery. The internal auto-discovery fails(it should be) but the external discovery should succeed as the web server has the Lync server running that applies to Skype for Business. Please advise.
Thanks!
Did you use Set-CSWebServerConfiguration on all your FEs, Edges and Directors? It’s covered in my Server Prerequisites post.
I have followed the server prerequisites and downloaded the Skype Web SDK Samples Preview. When I try to log in, it fails with the error ‘Can’t sign in, please check the user name and password’. Then it says ‘Error: AssertionFailed’. Using google chrome, I have found the line is from the SDK-build.js (from the skype cdn) on line 569. Can you help? It may be useful for you to create a troubleshooting link or FAQ link somewhere.
I have run on demo site, but I not work yet. Do I have to follow Server Prerequisites? such running at least Lync Server 2013 and run this %ProgramFiles%\Microsoft Lync Server 2013\Deployment\Bootstrapper.exe!
Thank you
Best & regards
Rith
hi Tom,
I have test the sample of login ,but I got a problem as same as Jagdip said. I try to login with a normal skype account, it does not work. Does the Skype Web SDK just work for Skype for Business? I’m not very clear about this. Can you help me?
If it just for Skype for Business, there is any way that I can put the skype into my windows app(only need contacts and chat functionality)?
Thank you.
Hi there – Yes, the Skype Web SDK is only for Skype for Business, not Skype Consumer (normal Skype). More details here: https://social.msdn.microsoft.com/Forums/en-US/2456ef60-b37f-44d7-b1ef-4cb46b89fc6a/regular-skype?forum=SkypeWebSDK
-tom
I have done the prerrequisites and demos are not working for me.
What i see in IE console is (however, i’m typing my sip address and password correctly):
Error: InvalidCreds
{
[functions]: ,
__proto__: { },
code: “InvalidCreds”,
description: “InvalidCreds”,
message: “InvalidCreds”,
name: “Error”,
response: { },
stack: “Error: InvalidCreds
at Anonymous function (https://swx.cdn.skype.com/build2015/v5/SDK-build.js:5831:29)
at handle (https://swx.cdn.skype.com/build2015/v5/SDK-build.js:2220:33)
at Anonymous function (https://swx.cdn.skype.com/build2015/v5/SDK-build.js:698:25)”
}
SCRIPT5007: No se puede obtener la propiedad ‘prototype’ de referencia nula o sin definir
jquery-1.7.2.min.js (32,6680)
What could be the error?
Great article. Do you have one sample that leverages integrated windows auth as against basic?
HI, I have try your demo website.
http://code.skypewebsdk.com/Login/Getting%20Logged%20In/index.htm
But, It isn’t work,
the error:
GET https://lyncdiscoverinternal.hamastar.onmicrosoft.com/xframe net::ERR_NAME_NOT_RESOLVED
GET https://lyncdiscover.hamastar.onmicrosoft.com/xframe net::ERR_INSECURE_RESPONSE
What is the error mean?
What can I deal with these error?
Hello, how to get the script working when your SIP address is not the same as the Active Directory UPN login name?
i got error NoFQDN ,what does it mean
I got error NoFQDN while signing in
Hi Guys,
I went through some issues, but finally succeeded in using Skype Web SDK. So I’d like to share my experience for those trying to do the same.
First, I wanted to use Skype Web SDK using a local lab, so everythin is running on my computer which has access to internet.
I’ve got : 1 VM for the AD/PKI, 1VM for a FE Standard Edition, 1VM for a IIS Server running the Skype Web SDK samples, 1VM for a IIS with ARR functionality.
That’s all I needed to make it work!
I won’t get through the installation process of a SfB FE, just follow that procedure : http://www.msic.ch/Portals/0/Images/Skype%20for%20Business%20Server%202015%20Step%20by%20Step%20for%20Anyone%20-%20Installing%20and%20Upgrading_REV_05.pdf
Then, create the VM SkypeWebSDK that will run IIS and Skype Web SDK samples, joined to the domain. This machine has one leg on the internet network and one on the LAN where other VMs are running (follow the same configuration as an edge for example, default gateway and dns server set up on the external NIC, not on the internal, add in the “hosts” file the lyncdiscoverinternal fqdn, the fqdn of the FE, and the external web services pointing to the ARR VM. Finally, copy create a new website in IIS with the proper bindings as explained here : http://blog.thoughtstuff.co.uk/2015/04/learn-skype-web-sdk-day-1-setting-up-your-development-environment/
Then on your SfB FE, trust the application by adding your skypewebsdk VM :
$x = New-CsWebOrigin -Url “{https://SkypeWebSDK.myPoC.local}”
Set-CsWebServiceConfiguration -CrossDomainAuthorizationList @{Add=$x}
As I don’t have a platform with edge servers, I just created a reverse proxy with ARR. This way, when lauching samples from the SkypeWebSDK VM, I’ll have access to external web services, as if I was on internet.
For the ARR VM, it has only one leg in the LAN. Follow that procedure (you will need to set up external web services url only, no need for OWA/autodiscover) : http://www.ucguys.com/2014/08/using-iis-arr-30-on-windows-server-2012r2-as-a-reverse-proxy-for-lync-server-2013.html
Regarding the certificate part, ADCS web server template has the “export private key” option greyed out on the web enrollment page. To create your certificate from the https://AD/certsrv web enrollment service, you have to, on your AD, open certtmpl.msc, duplicate the template “Web Server” and rename it as you wish, ensure that in the “subject name” section, you use “Supply in the request”. Then open the “Certificate Authority” tool, right clic on “Certificate template”, select “new” and add the template you’ve just created. Then you should be able to create a certificate in the .pfx format using ADCS web enrollment.
Finally, because the given samples do not ask for domain\username, you need to have the same UPN as your SIP address to login in. To do so, open AD domain and trusts, right clic on “Active Directory Domains and Trusts”, clic properties and add the SIP domain you’re using. Then go to AD users and groups, select your user, and in account section, change its UPN suffix to the domain you’ve just added.
On all your VM, ensure you open proper ports on the firewall.
Now you should be able on the SkypeWebSDK VM to launch the samples (I used firefox to get through IE blocking settings): http://skypewebsdk.mypoc.local/UC, and here you go!
PS : do not forget to enable your Skype for Business user and allow remote access.
If you have any information regarding the domain\username credentials that can be added in the form to log in without changing the UPN, please tell me 🙂
Everyone have fun!
Regards,
Stephen
it is look like a communication problem
when I just open the page
http://code.skypewebsdk.com/Login/Getting%20Logged%20In/index.htm
and just for test no fill in the login fields,
(remains blank)
click on login
and voila we have a mistake
https://pipe.int.trafficmanager.net/Client/2.0/
The requested resource does not support http method ‘GET’.
is it possible to host the Web SDK locally without using the CDN?
Hi everyone,
Actually I would like to ask. If I write the DOMAIN inside of whole user name (for example the correct user name is; [email protected]) everything is OK. but if I write wrong domain (wrong domain means not exist/reachable) for example [email protected], the application do not send me an exception. here is my sample code;
JavaScript;
setting included with userName, domain and password
function doLogin(settings) {
return new Promise((resolve, reject) => {
window.skypeWebSDKApi.signInManager.signIn(settings).then((response) => {
resolve(response);
}, (error) => {
reject(error);
}).catch(reject);
});
}