Introduction to Microsoft Teams messaging extensions

In this podcast below I walk through how to create your own messaging extension for Microsoft Teams.  In this Example I create a new Gif extension that you can more easily control the ratings on.





Sample Manifest


Sample Node.js Application

Doug Routledge Teams, Skype for Business, SQL, Exchange, UC, Full Stack Developer Doug is the co-found of Bridge Communications, and also leads the development team. Bridge Communications

New Product: Bridge Cloud Suite for Cisco Unified Communications

February 28, 2018
Fargo, ND.

New Products for Cisco Users. The Bridge Cloud Suite represents the next generation of apps written for Cisco Unified Communications users. We are excited to let you know about an exciting new SaaS suite we are launching today. Bridge Communications is continually evolving to support today's technology in an effort to make the modern workplace more productive. Your company is being invited to join us, as a customer of the new Bridge Cloud Suite. Join us today and discover why solution providers around the world look to us as their preferred channel partner for Cisco Unified Communications. Staying on top of changes in business and technology has become increasingly important, challenging and expensive. Businesses can’t afford to maintain the status quo. With our deep understanding of the Cisco Unified Communications landscape, Bridge Communications is releasing a browser-based Cloud Suite designed to support your business into the future with no up-front investment. We have designed a unique solution based on our long history of delivering the Bridge Operator Console that will make technology your competitive advantage. You can boost productivity with cloud-based UC tools, and work with full versions of the Bridge Operator Console and other important tools anytime, anywhere, and on virtually any device. Further benefits include low up-front costs, and the flexibility to add users and services as needed. Whether you want to transition to a cloud environment or extend the value of your existing UC investment, we can help you meet your unique business goals. Bridge Cloud Suite Components The Bridge Cloud Suite has applications for all levels of users in your communications topology. Attendant Console Supervisor Reports and Dashboard Cisco Finesse Supervisor Tools More in Development Wide Range of Devices Supported The Bridge Cloud Suite supports a wide range of devices. All Products Run in Any Modern Web Browser Windows Desktops, Laptops, and Tablets Apple Desktops, MacBooks, IPads, and IPhones Chromebooks, Android Tablets, Android Smartphones Bridge Operator Console Bridge Operator Console is our flagship attendant console for Cisco Unified Communications. Bridge Operator Console is perfect for the modern workplace. It offers full call control, predictive transfer, related people, calendar visibility, phone messaging and paging, and much more. The latest generation, which is part of the Cloud Suite, does not require any installation. It runs in any modern browser, giving the users, and system administrators maximum ease and flexibility. Bridge Supervisor Reports and Dashboard Bridge Supervisor Reports and Dashboard is the perfect complement to Bridge Operator Console. It is designed for reception supervisors and provides a live dashboard of availability, as well as live and historical reports. Supervisors can see group reports, and drill down to see data at the user level. Bridge Cisco Finesse Admin Bridge Cisco Finesse Admin is designed for contact center supervisors. It combines live reporting, call monitoring, recording, and call control into a simple, mobile friendly interface that can be run in any modern browser. Supervisors have the power to change the status of their team members, and even barge into calls where required. What Does This Mean for Me? Answers to Common Questions are Listed Below Is this replacing my traditional desktop client? Not at all, this is just a new option for customers. We will continue to support and update our traditional desktop clients. Is my company data stored in the cloud? All data remains stored in your existing on-premises BOC Tapi Connector Server. Only the app is loaded from the cloud. Is there any performance difference? Yes. We have found the cloud suite apps are both faster, more responsive, and consume far less bandwidth than the traditional desktop clients. Are there new features in this version? In addition to 2 new applications, there are new features in Bridge Operator Console as well. The interface has been retooled to work on any device, integrated with Cisco Finesse, and made easier and more intuitive for new users. Where are the apps hosted? For high availability and global distribution, the apps are stored in Microsoft Azure. When would be the best time to move to the new apps? We recommend beginning the process of trying the new apps 60 days before your traditional client renewal was due. This will insure time for testing and smooth transition, if you decide that the cloud apps are a better solution for your organization. Can I still work with my reseller with the cloud apps? Yes. We are giving our resellers more options with a new program. There are now multiple ways to partner with your reseller in regard to the Bridge Cloud Suite. Schedule an Interactive Demo Here Get Started Today! Customers are invited to try the Cloud Suite products today. If you have version 3 of the Bridge OC Tapi Connector, simply email sales@bridgeoc.com to get access to license portal, where you can manage your users, enable trial users, and purchase licenses. We recommend testing the application prior to traditional license renewal, which would be an optimal time to switch to the cloud platform. Cloud users are not required to pay annually for BOC Tapi Connectors. No client software to install. Apps run in modern web browser. Supported on thousands of devices Talks to existing Bridge OC Tapi Connector Data remains secure and stored on customer's existing network Apps are built on and hosted in the Microsoft Azure platform Affordable monthly licenses 30 day trial, no long term commitment Schedule an Interactive Demo Here

Your First No Code Bot for Microsoft Teams - Part 3 #MicrosoftTeams #MsTeams

Microsoft Teams is a chat-based collaboration tool that is part of the Office 365 suite of services. Teams enables local and co-workers to work together and collaborate through a common work-space, using features such as team chat, one-on-one chat and document collaboration.





Last week I showed you how to build the Azure components to hold your bot, and how to get it up and running.  This week we'll explore how to configure channels and add your bot to Teams.

Step 1.  Login

Navigate to https://dev.botframework.com/bots

Select your bot.

After you select your bot, you will see the Connect to Channels screen.

You can test your bot on the right with the test button.  Configuring your bot for Teams really couldn't be easier, you click the Teams logo in the "Add a Channel" Section, and it moves it up in the list of configured.

From there simply click the link that says "Get bot embed codes"

Paste the url in the Teams section into your browser and your bot is added to Teams, and you will see it in the chat section.  Enjoy.

Doug Routledge Teams, Skype for Business, SQL, Exchange, UC, Full Stack Developer Doug is the co-found of Bridge Communications, and also leads the development team. Bridge Communications

Your First No Code Bot for Microsoft Teams - Part 2 #MicrosoftTeams #MsTeams

Microsoft Teams is a chat-based collaboration tool that is part of the Office 365 suite of services. Teams enables local and co-workers to work together and collaborate through a common work-space, using features such as team chat, one-on-one chat and document collaboration.





Last week I showed you how to build our a simple question and answer template for Microsoft Bot.  Today we'll look at how to create the bot in Azure and use our Q and A template.

You will need an Azure subscription to get started, if you have one, get one first.

Step 1.

In Azure, click New from the blade menu.

Select Data + Analytics or search for Bot Service.

Once you find it click Create.

Give it a name, and select your resource group, hosting plan, and location.

After you click create, wait until it shows deployment succeeded, then go to the resource.

Step 2.

Select your programming language.

The options there are c# and NodeJs

Step 3.

Select your template and create your bot.

It will default to basic, but you want to click Question and Answer instead.

Select the Q and A maker template you saved.

Step 4.

Create the App ID and Password.

Here you will generate an app password to continue.  Copy and save this value.  Then click finish.

Back in the azure portal you will you have the rest of the fields auto populated, just paste in password.

Now your bot is created and tied to your Q and A template.  Next week I'll show you how to use your bot in a webpage, Skype, Teams, etc.

Doug Routledge Teams, Skype for Business, SQL, Exchange, UC, Full Stack Developer Doug is the co-found of Bridge Communications, and also leads the development team. Bridge Communications

Your First No Code Bot for Microsoft Teams - Part 1 #MicrosoftTeams #MsTeams

Microsoft Teams is a chat-based collaboration tool that is part of the Office 365 suite of services. Teams enables local and co-workers to work together and collaborate through a common work-space, using features such as team chat, one-on-one chat and document collaboration.

One way for people to interact with Microsoft Teams is through Bots.  Most non programmers think creating a Bot for Teams/Skype/Facebook etc is beyond their capability.  To be honest creating a Bot with the Bot Framework is not hello world, it's not something a user with no programming experience is going to do easily.  Enter Microsoft's Q and A maker.

The idea behind the Q and A maker is to take an existing knowledge-base website, and turn it into a responsive Bot you can interact with in your favorite applications.  There are 2 ways to get started with it, you can have it try to import a website and build the questions or answers.  This doesn't work all that well in my experience.  The 2nd way is to create question and answer pairs in the portal, retrain, and publish changes, which will flow instantly into your Bot.

Step 1.  Go to the website and sign in.

https://qnamaker.ai

Step 2.  Create a service.

Step 3.  Enter some questions and answers

When you are done click "Save and Retrain", then click "Publish".  Next week I'll show you how to create the actual Bot in Azure and select the QandAMaker template, which will do all the coding for you, and have your bot up and running in less than a minute.

Doug Routledge Teams, Skype for Business, SQL, Exchange, UC, Full Stack Developer Doug is the co-found of Bridge Communications, and also leads the development team. Bridge Communications

Getting Started with Microsoft Teams Tabs - Part 6 #MicrosoftTeams

Microsoft Teams is a chat-based collaboration tool that is part of the Office 365 suite of services. Teams enables local and co-workers to work together and collaborate through a common work-space, using features such as team chat, one-on-one chat and document collaboration.





Other Caveats

Redirecting to Another Domain

You may find yourself in a situation where a configuration page, needs to redirect your user to page that lies on a different domain.  In order to keep the data Teams is feeding your page in the iframe you should avoid normal page redirection, and instead us this method.

First make sure your domain is listed in the validDomains sections of the manifest.  Without this you will wind up with issues.

Now to being the redirection you will want to call this function from the Microsoft Teams javascript library.

microsoftTeams.navigateCrossDomain(yourNewUrl)

This will keep Teams happy and allow your other landing page to successfully initialize the teams js object.

Static Tabs

Sometimes you don't need a configuration page, if this is the case, a static tab is for you.  You can lay out a static tab with a manifest like this;

"staticTabs": [ { "entityId": "TestAppAbout", "name": "About", "contentUrl": "https://teams-specific-webview.website.com/about", "websiteUrl": "http://fullwebsite.website.com/about", "scopes": [ "personal" ] }, { "entityId": "TestAppMyTasks", "name": "My Tasks", "contentUrl": "https://teams-specific-webview.website.com/mytasks", "websiteUrl": "http://fullwebsite.website.com/mytasks", "scopes": [ "personal" ] } ]

The staticTabs object allows you to specify one or more tabs, up to 16, with the following required elements:
entityId A user-defined ID that uniquely identifies the tab; analogous to the entityId used in deep links to a configurable tab
name The name shown on the tab
contentUrl The content URL to show in the tab
websiteUrl The URL to the full chrome content to display in the default browser
scopes At this point, static tabs are used only in the personal context

Add static tab URLs to validDomains

All URLs you add in static tabs must be referenced in the validDomains section of the manifest. Failure to do so could result in a blank tab. Please note that although you can use wildcards for subdomains, be sure to appropriately scope for only the content you control and expect in the tab experience. For example, yourapp.onmicrosoft.com is good, but *.onmicrosoft.com is not.

Next week I'll walk you through how to sideload your app to get it up and running quickly.

Doug Routledge Teams, Skype for Business, SQL, Exchange, UC, Full Stack Developer Doug is the co-found of Bridge Communications, and also leads the development team. Bridge Communications

Getting Started with Microsoft Teams Tabs - Part 5 #MicrosoftTeams

Microsoft Teams is a chat-based collaboration tool that is part of the Office 365 suite of services. Teams enables local and co-workers to work together and collaborate through a common work-space, using features such as team chat, one-on-one chat and document collaboration.




Graph in Tabs

Microsoft Graph is one of the best APIs out there. It gives developers access to almost every o365 service and the data that lives in them. You would think that Graph and Teams would be tightly tied together, and at some point they may be. As of today, there are a few gotchas you need to look out for when combining these two.

Here is what Microsoft says about using them;

To use the Microsoft Graph APIs, you must get an access token. When your app is running in Microsoft Teams, the only difference is that you must drive the authentication flow, as described in Authenticate a user in your Microsoft Teams tab.

Be careful if you use the Microsoft Graph APIs for team resources, rather than those for the current user, because the two have different consent models. Typically, users can directly consent to your Microsoft Teams app within a specific team. However, currently an admin must also consent to your app (as registered in Azure Active Directory) using these group APIs, at which point the app then has API access to all the groups or teams for each user. (See Group permissions for more information.) You should therefore ensure that your Microsoft Teams app handles not having the permissions it needs, and that it respects the user's intention about the teams in which it should operate.

The biggest thing I have noticed from a gotcha standpoint, is using a SPA website you would normally get your token by a login redirect, then reading the location hash on return. It seems to me that when a page is displayed in a teams iframe, the same location hash is used to pass the information to teams js library, so login in to graph in the normal SPA way seems to break that, so it becomes an either or in SPA.

If you are looking to get Teams Graph info from the beta channel the good news is your an build a server side API and use the Azure AD client/secret model to serve up a token to your SPA page without the need for login redirection and access that data.

These issues are going to need to have a little better solution long term, if indeed the audio manipulation API is going to be a graph api, because one will want to see only the current logged in user for call manipulation, and frankly there are going to be organizations that will not want to give every 3rd party app, access to too much non user scope permissions.

Doug Routledge Teams, Skype for Business, SQL, Exchange, UC, Full Stack Developer Doug is the co-found of Bridge Communications, and also leads the development team. Bridge Communications

Getting Started with Microsoft Teams Tabs - Part 4 #MicrosoftTeams

Microsoft Teams is a chat-based collaboration tool that is part of the Office 365 suite of services. Teams enables local and co-workers to work together and collaborate through a common work-space, using features such as team chat, one-on-one chat and document collaboration.





Authentication in Tabs

Authentication in Teams tabs is the same thing as authentication to the o365 portal, or any of it's children.  In fact if your o365 portal token is still alive, you'll never even see the sign in page in your teams tab app, it just passes through.  In the case the above scenario doesn't work you are going to need to be able to handle authentication.  No big deal right?  Well...

There is one big thing that can gum up the works here, your teams tab page is running in an iframe, and there is some debate as to whether or not it will work as you'd expect.  Here I'll quote the teams developer page directly.

"

The tab configuration and content pages run in iframes. Azure Active Directory (Azure AD), and other identity providers that you may use, do not usually allow their sign-in and consent pages to be hosted within an iframe. Because of this, your app needs to authenticate the user in a pop-up window. You must use the Microsoft Teams JavaScript library to do this, so that it works successfully in both the web and desktop apps for Microsoft Teams.

"

Whenever you see the words "do not usually" you should probably plan to code around this in the proper way.  Fortunately the teams js api has some code to help us.  Here are the 7 steps the developer page recommends for logging in, my commentary will follow.

1. Add UI to your configuration or content page to enable the user to sign in when necessary. You should not drive the authentication pop-up without user action, because this is likely to trigger the browser's pop-up blocker.
2. Add the domain of your authentication URL to the validDomains section of the manifest. Failure to do so might result in an empty pop-up.
3. You can get user context information to help build authentication requests and URLs. For example, you can use the user's name (upn) as the login_hint value for Azure AD sign-in, which means the user might need to type less, or even that sign-in completes with no user action at all. Note that you should not use this context directly as proof of identity. For example, an attacker could load your page in a "malicious browser" and provide it with any information they want.
4. When the user selects to sign in, call microsoftTeams.authentication.authenticate({url: <auth URL>, width: <width>, height: <height>, successCallback: <successCallback>, failureCallback: <failureCallback>}).
   This launches the pop-up window in which the authorization should occur. This page should be hosted on your domain and listed in the validDomains section of the manifest. Within this authorization page, you should redirect to your identity provider, so the user can sign in. After the user completes authentication, the pop-up window is redirected to the callback page you specified for your app.
5. In your app's callback page, call microsoftTeams.authentication.notifySuccess() or microsoftTeams.authentication.notifyFailure().
   This results in a callback to the successCallback or failureCallback function that you registered in step 4, inside the original configuration or content page.
6. If successful, you can refresh or reload the page and show the configuration or content relevant to the now-authenticated user. If authentication fails, display an error message.
7. Your app can set its own session cookie in the usual way so that the user need not sign in again when they return to your tab on the current device.

Ok as I try to understand and explain this, here are a couple things to note;

1.  In my tests this method is fraught with peril.  Having to do make a separate button to initiate a login in today's token passing SSO world is a giant step backward.

2.  Changing the azure ad login to allow auth from an iframe hosted in teams would provide a much better experience, and allow existing web apps to not have to be re-written for this clunky authentication method.

3.  Every device the user potentially tries to open your tab on could wind up with a different experience.  A new browser window for a login is a completely different experience on a Windows PC and an android phone.

Final thoughts;

I would completely start over with this process.  Really if you are using Azure AD as the auth source, which let's face it > 90% of the tabs are going to, because they want access to MS graph which can then see the corresponding teams data from the context, then why have an option when you can get the current teams token from the context and use it.  The only real time this wouldn't be enough is if you wanted to extended admin consent type scopes anyway, and if that was the case, go back to point 2 above.

Happy coding,

Doug Routledge, Teams, Skype for Business, SQL, Exchange, UC, Full Stack Developer  BridgeOC Bridge Operator Console Twitter - @droutledge @ndbridge