OfficeDev / skype-web-sdk-simple-sample-for-SfB-online

Other
34 stars 13 forks source link

page_type: sample products:

Skype Web SDK sample for Skype for Business Online

This document is made for developers who want to start Skype Web SDK development! After you read it and try tutorials, you can sign-in, chat, audio/video communication with Skype Web SDK in the browser like the image below.

demo

Abstract

What is Skype Web SDK?

Skype Web SDK is one of the Key SDK of Skype Developer Platform. It is a set of JavaScript Web APIs and HTML controls that enable you to build web experiences that seamlessly integrate a wide variety of real-time collaboration models leveraging Skype for Business services and the larger Skype network.

Preparering for development

For developing application with Skype Web SDK, you need to prepare these resources below.

  1. Office 365 tenant. It inclues Skype for Business.
  2. Azure Active Directory
  3. Web Server
  4. Any editor for coding javascript and html.

The combination flow of these resources is below.

combination

1.Office 365 tenant

Skype for Business environment is included in Office 365(O365) tenant, so you need to prepare O365 tenant. Please refer this document to setup your O365 tenant. After you get O365 tenant please add some test users for testing.

For your information

Microsoft offers "Office 365 Dev Program" to get free O365 tenant. You can get a free O365 tenant from here and get a free Office 365 tenant, but it includes only one user subscription, so it is difficult for Skype testing.

2.Azure Active Directory

Skype Web SDK use OAuth for authentication and authorization, and it is handled by Azure Active Directory (Azure AD). If you are new for Azure, you can sign-up free trial account from this site.

3.Web Server

Because Skype Web SDK is for web application, you need web server to host the app. If you need new Web Server, it is nice choice to try Azure Web Apps.

4.Any editor for coding javascript and html

You can choose any editor or IDEs to develop with Skype Web SDK. If you want to get new one, let's try Visual Studio code! Please download and install it from the web site.

How to deploy and try sample in your environment

The Office 365 services use Azure Active Directory (Azure AD) to provide secure authentication to users' Office 365 data. To access the Skype for Business, you need to register your app with Azure AD.

  1. Associate your O365 account with Azure AD
  2. Register your app in Azure Active Directory to use Skype for Business.
  3. Update config.js
  4. Deploy to your web server
  5. Allow to access for Skype for Business by tenant Administrator.
  6. Try it

1. Associate your O365 account with Azure AD

Before register your app with Azure AD, you need to associate your O365 account with Azure AD. Please read this document and set up it.

2. Register your app in Azure Active Directory to use Skype for Business.

Let's register your app in Azure AD and set permission to access Skype for Business. Please read and follow "Registering your application in Azure AD" and "Configure your app for OAuth implicit grant flow" in this site. In the Azure AD, you should set REPLY URL.Please set "https://sample.com" if you have sample.com domain.

For your information

You can also refer this document.It includes some screen cliping, so you can easily understand how to register your app.

You set only one permission in the document above, but in the test purpose you can set all permission like this image. permission

3. Update config.js

When you register your app in Azure AD, you set or got the value of properties below.

Please copy the each value and paste them in config.js.

4. Deploy to your web server

Just put the sample codes in the root of your web server. If you use Azure Web App, you can select some method to deploy. Such as using Git and FTP.

5. Allow to access for Skype for Business by tenant Administrator.

Azure AD offer Consent Flow for authentication and authorization. These are the images of consent flow.

  1. Login with Azure AD login

  2. Consent will be shown for grant consent

Azure AD offer two type of conset.

Skype Web SDK uses Administrator Consent. You should access Administrator consent flow as O365 tenant Administrator and accept permissions. This sample code has [Admin Consent]button, so Please click [Admin Consne]button.

6. Try it

I recommend to prepare 2 PCs having audio/video device and 2 O365 user accounts for testing.Please follow steps below in each PC.

  1. Access your web App.
  2. (If it is first time) Click [Admin Consent]button to grant your app.
  3. Click [Sign-in O365]button to sign-in with your O365 account.
  4. Click [Initialize SkypeUI]button to Initialize Skype Web SDK.
  5. Click [Sign-in Skype]button to sign-in Skype.
  6. Click [Start Chat]button to show Chat/Audio/Video window using Conversation Control.
  7. Let's chat, call with your another PC. When you call to other user, the brower will show the dialog to trun on your mic/camera. Please check and turn on.

For your information:

In order to understand how to develop, please read the codes and comments in the sample. Enjoy your development with Skype Web SDK!

Next Step

Contributing

You will need to sign a Contributor License Agreement before submitting your pull request. To complete the Contributor License Agreement (CLA), you will need to submit a request via the form and then electronically sign the Contributor License Agreement when you receive the email containing the link to the document. This needs to only be done once for any Microsoft OSS project.

You can check general contributing way in CONTRIBUTIONG.md.

Copyright

Copyright (c) 2016 Microsoft Corporation. All rights reserved.

This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.