Teams Development
Rick van Rousselt & Albert-Jan Schot
Topics
• Introduction
• App packages
• Authentication
• Connectors & Cards
• Bots
• Notifications
• Voice & Video
• Messaging Extensions
• Teams Management
Notifications
Tabs
Bots
Voice and video
Messaging Extensions
Microsoft Graph
Adaptive Cards
Notifications
Tabs
Bots
Voice and video
Messaging Extensions
Microsoft Graph
Adaptive Cards
Teams package
Manifest.json
Icon-20x20.png
Icon-96x96.png
Index.html
Privacy.html
Terms.html
Tab.html
Tabconfig.html
Tabremove.html
/API
Teams extensibility “cheat sheet”
Converse through natural language commands
Structured UI-based invocation of bot commands
Present a full embedded experience with content that users
can collaborate around
Simple incoming webhook integration for sending notifications
into channels
Rich flexible layouts with interactive content
Custom dialog to collect user input or show richer information
Getting started
Demo - App Studio
Authentication
Authentication
for tabs
Authentication
for bots
SSO for tabs
1. Use ADAL.js for single sign on
2. Create a hidden iframe for implicit grant flow
3. Set prompt=none
4. Show login button if there is an error
Walkthrough: https://techcommunity.microsoft.com/t5/Microsoft-Teams-
Blog/Authentication-SSO-and-Microsoft-Graph-in-Microsoft-Teams-Tabs/ba-p/125366
Demo - Authentication
Connectors & Adaptive cards
Connectors === Webhooks
• Set up a custom incoming webhook if you want an integration just for your team.
• Register a Connector and submit it as a Microsoft Teams app if you want others to
use it.
• Outgoing webhooks do not have access to non-messaging APIs, such as team
roster membership.
• Outgoing webhooks cannot post into channels proactively.
• Although outgoing webhooks can use cards, they cannot use all button types
{
"type": "message",
"id": "1485983408511",
"timestamp": "2017-02-01T21:10:07.437Z",
"localTimestamp": "2017-02-01T14:10:07.437-07:00",
"serviceUrl": "https://smba.trafficmanager.net/amer-client-ss.msg/",
"channelId": "msteams",
"from": {
"id": "...",
"name": "Tim Jones"
},
"conversation": {
"id": "19:253b1f341670408fb6fe51050b6e5ceb@thread.skype;messageid=1485983194839"
Message
Demo - Connectors
Bots
Bots in teams
• Anything that is not a ‘tab’ must be
handled as a bot
• A bot can use the teams context
• A bot can handle conversations,
messages, likes and channel
updates
• A bot can send messages and
notifications
notification only bots cannot be
messaged or @mentioned
Some remarks
• Users can block bots in personal chats
• Removing a bot from a team does not remove
the personal connection
• Authentication is hard
Demo bots
• Notification only bots use proactive messaging to communicate with the user.
• You can start 1-1 conversations or channel conversations
• There is no way currently to create a personal scoped notification only bot since
the user cannot message your notification only bot in a personal chat.
In the team setting, your bot will have access to the necessary information to either
send a notification to a channel or privately to a user.
Messaging extensions
At first there was
Now actions
Static
• Teams will render a form for you
Dynamic
• You can do whatever you want
3 types of responses
Task Module response
This is used when your extension needs to chain dialogs together to get more information.
Compose extension auth/config response
This is used when your extension needs to either authenticate or configure in order to
continue. See authentication section in the search section for more details.
Compose extension result response
This used to insert a card into the compose box as a result of a the command. It's the same
response that's used in the search command, but it's limited to one card or one result in the
array.
Demo messaging extensions
Calling, voice & video
Call types
Call types
• A user may initiate a peer-to-peer call with your bot or invite your bot into an existing
multiparty call (although the latter is not yet enabled in the Microsoft Teams UI).
• No Microsoft Graph permissions are necessary for a user to initiate a call with your
bot for a peer-to-peer call, but additional permissions are needed for your bot to
participate in a multiparty call, or for your bot to initiate a peer-to-peer call with a
user.
• A call may start as peer-to-peer and escalate to multiparty. Your bot can initiate this
escalation by inviting others provided your bot has the proper permissions, but if
your bot does not have permissions to participate in group calls, if one participant
adds another person, your bot is dropped from the call.
Signaling: incoming call and in-call
Calls and meetings
2 types of meetings:
• Ad-hoc
• Scheduled
For a bot this is not true: A meeting is just a (multiparty) call with additional metadata
such as: chatId, joinUrl, startTime, endTime,…
Ngrok again
1. Setup an account and get an auth token
2. Run ngrok authtoken <yourtoken>
3. Update file with
• tunnels:
• signaling: addr: 12345
• proto: http
• host-header: localhost:3979
• media:
• addr: 8445
• proto: tcp
4. !!Python style
Add additional permissions for the AAD app
Permission Display String Description Admin Consent Required
Calls.Initiate.All Initiate outgoing 1:1 calls from the app
(preview)
Allows the app to place outbound calls to a single user
and transfer calls to users in your organization’s
directory, without a signed-in user.
Yes
Calls.InitiateGroupCall.All Initiate outgoing group calls from the app
(preview)
Allows the app to place outbound calls to multiple users
and add participants to meetings in your organization,
without a signed-in user.
Yes
Calls.JoinGroupCall.All Join Group Calls and Meetings as an app
(preview)
Allows the app to join group calls and scheduled
meetings in your organization, without a signed-in user.
The app will be joined with the privileges of a directory
user to meetings in your tenant.
Yes
Calls.JoinGroupCallasGuest.All Join Group Calls and Meetings as a guest
(preview)
Allows the app to anonymously join group calls and
scheduled meetings in your organization, without a
signed-in user. The app will be joined as a guest to
meetings in your tenant.
Yes
Calls.AccessMedia.All Access media streams in a call as an app
(preview)
Allows the app to get direct access to media streams in
a call, without a signed-in user.
Yes
Do not forget to update
your manifest version
Demo calling
Teams management
Teams Management
• PS: Connect-MicrosoftTeams
• CLI: o365$ graph teams
• Graph: /beta/teams
Remember that teams rely on groups (memberships) or other services (SharePoint /
Planner)
Demo teams management
Teams Developer Survey
https://www.cloudappie.nl/go/TeamsSurvey/
Whats’s next
1. Developer opportunities https://aka.ms/TeamsDeveloper &
https://aka.ms/TeamsDevSupport
2. Download Teams Generator at https://github.com/OfficeDev/generator-teams &
samples https://github.com/OfficeDev/microsoft-teams-sample-complete-node
3. Start coding
4. Provide feedback: https://microsoftteams.uservoice.com/
5. Keep an eye for Ignite The Tour & Teams Partner Development Workshop
Want to know more?
https://www.cloudappie.nl
@appieschot
https://www.rickvanrousselt.com
@rickvanrousselt
Teams Developer Survey
https://www.cloudappie.nl/go/TeamsSurvey/

Diwug 2019 Teams Development

  • 1.
    Teams Development Rick vanRousselt & Albert-Jan Schot
  • 2.
    Topics • Introduction • Apppackages • Authentication • Connectors & Cards • Bots • Notifications • Voice & Video • Messaging Extensions • Teams Management
  • 3.
    Notifications Tabs Bots Voice and video MessagingExtensions Microsoft Graph Adaptive Cards
  • 4.
    Notifications Tabs Bots Voice and video MessagingExtensions Microsoft Graph Adaptive Cards
  • 5.
  • 6.
    Teams extensibility “cheatsheet” Converse through natural language commands Structured UI-based invocation of bot commands Present a full embedded experience with content that users can collaborate around Simple incoming webhook integration for sending notifications into channels Rich flexible layouts with interactive content Custom dialog to collect user input or show richer information
  • 7.
  • 10.
    Demo - AppStudio
  • 11.
  • 12.
  • 13.
  • 14.
    SSO for tabs 1.Use ADAL.js for single sign on 2. Create a hidden iframe for implicit grant flow 3. Set prompt=none 4. Show login button if there is an error Walkthrough: https://techcommunity.microsoft.com/t5/Microsoft-Teams- Blog/Authentication-SSO-and-Microsoft-Graph-in-Microsoft-Teams-Tabs/ba-p/125366
  • 15.
  • 16.
  • 17.
    Connectors === Webhooks •Set up a custom incoming webhook if you want an integration just for your team. • Register a Connector and submit it as a Microsoft Teams app if you want others to use it. • Outgoing webhooks do not have access to non-messaging APIs, such as team roster membership. • Outgoing webhooks cannot post into channels proactively. • Although outgoing webhooks can use cards, they cannot use all button types
  • 18.
    { "type": "message", "id": "1485983408511", "timestamp":"2017-02-01T21:10:07.437Z", "localTimestamp": "2017-02-01T14:10:07.437-07:00", "serviceUrl": "https://smba.trafficmanager.net/amer-client-ss.msg/", "channelId": "msteams", "from": { "id": "...", "name": "Tim Jones" }, "conversation": { "id": "19:253b1f341670408fb6fe51050b6e5ceb@thread.skype;messageid=1485983194839" Message
  • 19.
  • 20.
  • 21.
    Bots in teams •Anything that is not a ‘tab’ must be handled as a bot • A bot can use the teams context • A bot can handle conversations, messages, likes and channel updates • A bot can send messages and notifications notification only bots cannot be messaged or @mentioned
  • 22.
    Some remarks • Userscan block bots in personal chats • Removing a bot from a team does not remove the personal connection • Authentication is hard
  • 23.
  • 24.
    • Notification onlybots use proactive messaging to communicate with the user. • You can start 1-1 conversations or channel conversations • There is no way currently to create a personal scoped notification only bot since the user cannot message your notification only bot in a personal chat. In the team setting, your bot will have access to the necessary information to either send a notification to a channel or privately to a user.
  • 25.
  • 26.
  • 27.
    Now actions Static • Teamswill render a form for you Dynamic • You can do whatever you want
  • 28.
    3 types ofresponses Task Module response This is used when your extension needs to chain dialogs together to get more information. Compose extension auth/config response This is used when your extension needs to either authenticate or configure in order to continue. See authentication section in the search section for more details. Compose extension result response This used to insert a card into the compose box as a result of a the command. It's the same response that's used in the search command, but it's limited to one card or one result in the array.
  • 29.
  • 30.
  • 31.
  • 32.
    Call types • Auser may initiate a peer-to-peer call with your bot or invite your bot into an existing multiparty call (although the latter is not yet enabled in the Microsoft Teams UI). • No Microsoft Graph permissions are necessary for a user to initiate a call with your bot for a peer-to-peer call, but additional permissions are needed for your bot to participate in a multiparty call, or for your bot to initiate a peer-to-peer call with a user. • A call may start as peer-to-peer and escalate to multiparty. Your bot can initiate this escalation by inviting others provided your bot has the proper permissions, but if your bot does not have permissions to participate in group calls, if one participant adds another person, your bot is dropped from the call.
  • 33.
  • 34.
    Calls and meetings 2types of meetings: • Ad-hoc • Scheduled For a bot this is not true: A meeting is just a (multiparty) call with additional metadata such as: chatId, joinUrl, startTime, endTime,…
  • 35.
    Ngrok again 1. Setupan account and get an auth token 2. Run ngrok authtoken <yourtoken> 3. Update file with • tunnels: • signaling: addr: 12345 • proto: http • host-header: localhost:3979 • media: • addr: 8445 • proto: tcp 4. !!Python style
  • 36.
    Add additional permissionsfor the AAD app Permission Display String Description Admin Consent Required Calls.Initiate.All Initiate outgoing 1:1 calls from the app (preview) Allows the app to place outbound calls to a single user and transfer calls to users in your organization’s directory, without a signed-in user. Yes Calls.InitiateGroupCall.All Initiate outgoing group calls from the app (preview) Allows the app to place outbound calls to multiple users and add participants to meetings in your organization, without a signed-in user. Yes Calls.JoinGroupCall.All Join Group Calls and Meetings as an app (preview) Allows the app to join group calls and scheduled meetings in your organization, without a signed-in user. The app will be joined with the privileges of a directory user to meetings in your tenant. Yes Calls.JoinGroupCallasGuest.All Join Group Calls and Meetings as a guest (preview) Allows the app to anonymously join group calls and scheduled meetings in your organization, without a signed-in user. The app will be joined as a guest to meetings in your tenant. Yes Calls.AccessMedia.All Access media streams in a call as an app (preview) Allows the app to get direct access to media streams in a call, without a signed-in user. Yes
  • 37.
    Do not forgetto update your manifest version
  • 38.
  • 39.
  • 40.
    Teams Management • PS:Connect-MicrosoftTeams • CLI: o365$ graph teams • Graph: /beta/teams Remember that teams rely on groups (memberships) or other services (SharePoint / Planner)
  • 41.
  • 42.
  • 43.
    Whats’s next 1. Developeropportunities https://aka.ms/TeamsDeveloper & https://aka.ms/TeamsDevSupport 2. Download Teams Generator at https://github.com/OfficeDev/generator-teams & samples https://github.com/OfficeDev/microsoft-teams-sample-complete-node 3. Start coding 4. Provide feedback: https://microsoftteams.uservoice.com/ 5. Keep an eye for Ignite The Tour & Teams Partner Development Workshop
  • 44.
    Want to knowmore? https://www.cloudappie.nl @appieschot https://www.rickvanrousselt.com @rickvanrousselt
  • 45.

Editor's Notes

  • #4 3
  • #5 4
  • #11 Demo 1 - App Studio  Ask questions: search sdk  Manifest editor  Dev demo app  Step 1, 2, 3  Card editor   Edit Hero card   Edit Adaptive card  Control Library  
  • #14 Bots use a verification code to validate what is received from the identity provider and what is received from teams
  • #16 Demo 2 - Auth Start NGRok Explain require HTTPS Download package Explain package not correct (wrong id) Login fail show azure AD redirect url   Bot Template (personal one) https://teams.microsoft.com/_#/apps/400bdca0-df25-4f0a-89e2-93a83f5060a5/sections/conversations?slug=28:d8d05563-ed31-4ce1-afe5-d55b64d36b35&intent=0&category=16&autoNavigationOnDone=true&filterByPersonal=true&storeLaunchFromChat=false Show Simple Auth Click Login Tell about pop-up Show silent auth Line 142 - silent-start Silent start adal.js config Scopen=openid + login_hint Silent-end Show getcacheduser notify succes Silent Show button if fails
  • #20 Team 52 Twitter webhook Incomming webhook
  • #21 For all interaction you require bots