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