Develop enterprise-ready applications for Microsoft Teams with Azure resources such as Azure App Config and Azure Key Vault authenticated by Managed Identity and on modern web technologies

1. Develop enterprise-ready
applications for Microsoft
Teams
with Azure resources on modern web
technologies

2. Agenda
About
• Me
• Avanade
Microsoft
Teams Dev
• Overview
• Demo App
• Authentication
and
configuration
Azure ...
• App Config
• Key Vault
• Demo
• DevOps
Summary
• Wrap up
• Resources
• Q&A

3. About me
• Markus Moeller
• Microsoft 365 Developer Expert
• Avanade Germany
• @moeller2_0
• https://mmsharepoint.wordpress.com
• Proud dad of 1 (1Y)

4. ©2020 Avanade Inc. All Rights Reserved. 4
We believe:
• We change things for the better.
• We innovate with passion and purpose.
• We deliver with excellence.
• We believe everyone counts.
• We act with integrity and respect.
About Avanade
Our Microsoft expertise:
• 15-time winner of Microsoft Partner
of the Year
• 32,000+ certifications in Microsoft
technology
• 100+ Microsoft partner awards
• 18 Gold Competencies
• 1,000+ in ASG (Austria, Switzerland,
Germany)

5. Bots
Help users get tasks done in calls,
conversations and online meetings
Connectors
Post rich updates to channels
Personal apps
All content across all teams
and channels in one place
Tabs
Surface rich content within
Teams
Activity feed
Engage users via feed
notifications
Messaging extensions
Allow users to query and share
rich cards in conversations
Scope
of
Teams Development
Voice + Video
Enhance Calls and online Meeting
with Calling and Media bots
MS Graph
Gateway to your data in
Microsoft cloud

6. Microsoft Teams development
• Frontend vs Backend (Tabs vs Connectors, Bots, Messaging
Extensions …)
• NodeJS/Javascript/Typescript vs C#.Net …
• Visual Studio vs yeoman generator (+ @VSCode)
• Authentication …
• App Studio / App manifest
6

7. Yeoman setup Teams application

8. A Teams
Messaging
Extension posting
a selected file to
the Message
Channel

9. Not only

11. Exercise for our
developers
delivering that
way ...
11

12. What about
less sensitive
config data? • What about re-using it in different apps?
• What about „self service“ ... let users write
configuration entries?

13. Azure App
Config,
Azure Key Vault
& more

14. Microsoft 365
High level architecture
Teams Application
Web Application
Azure App Service
Azure App Configuration
Azure Key Vault
Hosted
Configuration
Authenticate
Get data
Get Credentials
Microsoft
Graph

15. Config page & Config storage

16. Retrieve Config

17. GetClient

18. Save Config

19. ManagedIdentity (Credential)?
Credentials
Credentials
Managed Identity

20. A simple NodeJS
app retrieving
some
documents via
Microsoft Graph

21. Microsoft 365
High level architecture
Teams Application
Web Application
Azure App Service
Azure App Configuration
Azure Key Vault
Hosted
Configuration
Authenticate
Get data
Get Credentials
Microsoft
Graph

22. Microsoft 365
Simple high level architecture
Web Application
Azure App Service
Azure App Configuration
Azure Key Vault
Hosted
Configuration
Authenticate
Get data
Get Credentials
Microsoft
Graph

23. Summary

24. Open
source is a
cancer
Steve Ballmer -
2005

25. Microsoft
Today
• Lots of things I showed are free
• O365 Dev tenant, VSCode, github,
1st app config
• Standard technologies
• NodeJS, JavaScript, TypeScript,
Webpack, yeoman
• Non-proprietary solutions
• Shared and celebrated in a
great open community
They want YOU ...
...and so do we!

26. Nevertheless
We develop for enterprises and need
• Professional solutions
• Supported patterns (Think about migrations,
evergreen)
• Security
• Stability
• Automation
• Maintenance

27. Resources
• Speaker's blog
• On this specific topic
• Deploy a Yo Teams project to Azure through Azure DevOps
• Microsoft Teams SSO - The frontend part
• Microsoft Teams SSO and Microsoft Graph - the backend part · Wictor Wilen
• Azure App Configuration
• In NodeJS
• Azure Key Vault
• Avanade

28. Q&A
• Use Twitter @moeller2_0
• Visit our Avanade virtual booth
• Tomorrow: 16:00
• Thursday: 13:00
• T
• T
• T