Sample: SSO sample for Microsoft Teams tab app (#2196)

* Initial commit * Fix broken link * Update build pipeline * Add comments * Update path * Fix link * Update docs * Remove config page * Typo * Clean up * Add entry * Add entry * Rename to webchat-sso-teams-* * Typo * Apply suggestions from code review Co-Authored-By: Corina <[email protected]> * Apply suggestions from code review Co-Authored-By: Corina <[email protected]> * Fix typos * Typo * Emphasize * Fix link
microsoft · Jul 18, 2019 · 83edbd0 · 83edbd0
1 parent 9d1a9ab
commit 83edbd0
Show file tree

Hide file tree

Showing 41 changed files with 4,200 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -52,6 +52,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 -  Added bubble nub and style options, by [@compulim](https://github.com/compulim), in PR [#2137](https://github.com/Microsoft/BotFramework-WebChat/pull/2137)
 
+### Samples
+
+-  `*`: [Single sign-on for Microsoft Teams apps](https://microsoft.github.io/BotFramework-WebChat/19.c.single-sign-on-for-teams-apps/), by [@compulim](https://github.com/compulim) in [#2196](https://github.com/microsoft/BotFramework-WebChat/pull/2196)
+
 ## [4.5.0] - 2019-07-10
 
 ### Added

diff --git a/README.md b/README.md
@@ -202,6 +202,7 @@ In issue [#2022](https://github.com/microsoft/BotFramework-WebChat/issues/2022),
 | [`18.customization-open-url`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/18.customization-open-url)                                                                                                     | Advanced tutorial: Demonstrates how to customize the open URL behavior.                                                                                                                                                             | [Customize Open URL Demo](https://microsoft.github.io/BotFramework-WebChat/18.customization-open-url)                                                   |
 | [`19.a.single-sign-on-for-enterprise-apps`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/19.a.single-sign-on-for-enterprise-apps)                                                                         | Demonstrates how to use single sign-on for enterprise single-page applications using OAuth                                                                                                                                          | [Single Sign-On for Enterprise Single-Page Applications Demo](https://microsoft.github.io/BotFramework-WebChat/19.a.single-sign-on-for-enterprise-apps) |
 | [`19.b.single-sign-on-for-intranet-apps`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/19.b.single-sign-on-for-intranet-apps)                                                                             | Demonstrates how to use single sign-on for Intranet apps using Azure Active Directory                                                                                                                                               | [Single Sign-On for Intranet Apps Demo](https://microsoft.github.io/BotFramework-WebChat/19.b.single-sign-on-for-intranet-apps)                         |
+| [`19.c.single-sign-on-for-teams-apps`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/19.c.single-sign-on-for-teams-apps)                                                                                   | Demonstrates how to use single sign-on for Microsoft Teams apps using Azure Active Directory                                                                                                                                        | [Single Sign-On for Microsoft Teams Apps Demo](https://microsoft.github.io/BotFramework-WebChat/19.c.single-sign-on-for-teams-apps)                     |
 | [`20.a.upload-to-azure-storage`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/20.a.upload-to-azure-storage)                                                                                               | Demonstrates how to use upload attachments directly to Azure Storage                                                                                                                                                                | [Upload to Azure Storage Demo](https://microsoft.github.io/BotFramework-WebChat/20.a.upload-to-azure-storage)                                           |
 | [`21.customization-plain-ui`](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/21.customization-plain-ui)                                                                                                     | Advanced tutorial: Demonstrates how to customize the Web Chat UI by building from ground up instead of needing to rewrite entire Web Chat components.                                                                               | [Plain UI Demo](https://microsoft.github.io/BotFramework-WebChat/21.customization-plain-ui)                                                             |
 

diff --git a/samples/19.a.single-sign-on-for-enterprise-apps/README.md b/samples/19.a.single-sign-on-for-enterprise-apps/README.md
@@ -135,8 +135,9 @@ During development, you will run your bot locally. Azure Bot Services will send
    -  `GET /api/github/oauth/callback` will handle callback from GitHub AD OAuth
    -  `GET /api/github/settings` will send GitHub OAuth settings to the React app
    -  It will serve React app as a static content
-   -  During development-time, it will also serve the bot server via `/api/messages/`
-      - To enable this feature, add `PROXY_BOT_URL=http://localhost:3978` to `/web/.env`
+   -  During development-time, it will also serve the bot server via `/api/messages`
+      -  To enable this feature, add `PROXY_BOT_URL=http://localhost:3978` to `/web/.env`
+      -  This will forward all traffic from `https://a1b2c3d4.ngrok.io/api/messages` to `https://localhost:3978/api/messages`
 
 # Overview
 
@@ -241,15 +242,15 @@ After having signed in on this app, click the profile photo on the upper-right h
 
 To make this demo simpler to understand, instead of refresh token, we are obtaining the access token via Authorization Code Grant flow. Access token is short-lived and considered secure to live inside the browser.
 
-In your production scenario, instead of the access token, you may want to obtain the refresh token with "Authorization Code Grant" flow. We did not use the refresh token in this sample as it requires server-to-server communications and secured persistent storage, it would greatly increase the complexity of this demo.
+In your production scenario, you may want to obtain the refresh token with "Authorization Code Grant" flow instead of using the access token. We did not use the refresh token in this sample as it requires server-to-server communications and secured persistent storage, it would greatly increase the complexity of this demo.
 
 ## Threat model
 
-To reduce complexity and lower the learning curve, this sample is limited in scope. In your production system, you should consider enhancing it and review its threat model.
+To reduce complexity, this sample is limited in scope. In your production system, you should consider enhancing it and review its threat model.
 
 -  Refreshing the access token
    -  Using silent prompt for refreshing access token
-      -  Some OAuth provider support `?prompt=none` for refreshing access token silently through `<iframe>`
+      -  Some OAuth providers support `?prompt=none` for refreshing access token silently through `<iframe>`
    -  Using Authorization Code Grant flow with refresh token
       -  Save the refresh token on the server side of your web app. Never expose it to the browser or the bot
       -  This will also create a smooth UX by reducing the need for UI popups

diff --git a/samples/19.b.single-sign-on-for-intranet-apps/README.md b/samples/19.b.single-sign-on-for-intranet-apps/README.md
@@ -1,6 +1,6 @@
 # Single sign-on demo for Intranet apps using OAuth
 
-[![Deploy Status](https://fuselabs.vsrm.visualstudio.com/_apis/public/Release/badge/531382a8-71ae-46c8-99eb-9512ccb91a43/9/9)](https://webchat-sample-sso.azurewebsites.net/)
+[![Deploy Status](https://fuselabs.vsrm.visualstudio.com/_apis/public/Release/badge/531382a8-71ae-46c8-99eb-9512ccb91a43/9/9)](https://webchat-sample-sso-intranet.azurewebsites.net/)
 
 # Description
 
@@ -10,7 +10,7 @@ In this demo, we will show you how to authorize a user to access resources on an
 
 ## Background
 
-This sample is a simplified and reduced version of the sample "[Single sign-on demo for enterprise apps using OAuth](https://microsoft.github.io/BotFramework-WebChat/19.a.single-sign-on-for-enterprise)". There are notable differences:
+This sample is a simplified and reduced version of the sample "[Single sign-on demo for enterprise apps using OAuth](https://microsoft.github.io/BotFramework-WebChat/19.a.single-sign-on-for-enterprise-apps)". There are notable differences:
 
 -  In this demo, we are targeting a traditional web page instead of single-page application
    -  Page navigation and refresh are allowed on a traditional web page, but are restricted on a single-page application
@@ -20,7 +20,7 @@ This sample is a simplified and reduced version of the sample "[Single sign-on d
    -  We no longer send the sign-in and sign-out event activity to the bot
 -  We only support a single [OAuth 2.0](https://tools.ietf.org/html/rfc6749)) provider; in this demo, we are using [Azure Active Directory](https://azure.microsoft.com/en-us/services/active-directory/)
    -  Azure Active Directory supports PKCE ([RFC 7636](https://tools.ietf.org/html/rfc7636)), which we are using PKCE to simplify setup
-   -  If you are using GitHub or other OAuth providers that does not support PKCE, you should use a client secret
+   -  If you are using GitHub or other OAuth providers that do not support PKCE, you should use a client secret
 
 This demo does not include any threat models and is designed for educational purposes only. When you design a production system, threat-modelling is an important task to make sure your system is secure and provide a way to quickly identify potential source of data breaches. IETF [RFC 6819](https://tools.ietf.org/html/rfc6819) and [OAuth 2.0 for Browser-Based Apps](https://tools.ietf.org/html/draft-ietf-oauth-browser-based-apps-01#section-9) is a good starting point for threat-modelling when using OAuth 2.0.
 
@@ -112,16 +112,17 @@ During development, you will run your bot locally. Azure Bot Services will send
    -  `GET /api/oauth/callback` will handle callback from Azure AD OAuth
    -  `GET /api/directline/token` will generate a new Direct Line token for the React app
    -  It will serve a static `index.html`
-   -  During development-time, it will also serve the bot server via `/api/messages/`
+   -  During development-time, it will also serve the bot server via `/api/messages`
       -  To enable this feature, add `PROXY_BOT_URL=http://localhost:3978` to `/web/.env`
+      -  This will forward all traffic from `https://a1b2c3d4.ngrok.io/api/messages` to `https://localhost:3978/api/messages`
 
 # Overview
 
 This sample includes multiple parts:
 
 -  A basic web page that:
    -  Checks your access token or redirects to OAuth provider if it is not present or valid
-   -  Is integrated with Web Chat and piggybacks your OAuth access token on every user-initiated activity thru `channelData.oauthAccessToken`
+   -  Is integrated with Web Chat and piggybacks your OAuth access token on every user-initiated activity through `channelData.oauthAccessToken`
 -  Bot
    -  On every message, it will extract the OAuth access token and obtain user's full name from Microsoft Graph
 
@@ -155,7 +156,7 @@ MICROSOFT_APP_PASSWORD=a1b2c3d4e5f6
 
 ```
 OAUTH_CLIENT_ID=12345678abcd-1234-5678-abcd-12345678abcd
-OAUTH_REDIRECT_URI=http://localhost:3000/api/aad/oauth/callback
+OAUTH_REDIRECT_URI=http://localhost:3000/api/oauth/callback
 DIRECT_LINE_SECRET=a1b2c3.d4e5f6g7h8i9j0
 ```
 
@@ -183,15 +184,15 @@ To reset application authorization, please follow the steps below.
 
 To make this demo simpler to understand, instead of refresh token, we are obtaining the access token via Authorization Code Grant flow. Access token is short-lived and considered secure to live inside the browser.
 
-In your production scenario, instead of the access token, you may want to obtain the refresh token with "Authorization Code Grant" flow. We did not use the refresh token in this sample as it requires server-to-server communications and secured persistent storage, it would greatly increase the complexity of this demo.
+In your production scenario, you may want to obtain the refresh token with "Authorization Code Grant" flow instead of using the access token. We did not use the refresh token in this sample as it requires server-to-server communications and secured persistent storage, it would greatly increase the complexity of this demo.
 
 ## Threat model
 
-To reduce complexity and lower the learning curve, this sample is limited in scope. In your production system, you should consider enhancing it and review its threat model.
+To reduce complexity, this sample is limited in scope. In your production system, you should consider enhancing it and review its threat model.
 
 -  Refreshing the access token
    -  Using silent prompt for refreshing access token
-      -  Some OAuth provider support `?prompt=none` for refreshing access token silently thru `<iframe>`
+      -  Some OAuth providers support `?prompt=none` for refreshing access token silently through `<iframe>`
    -  Using Authorization Code Grant flow with refresh token
       -  Save the refresh token on the server side of your web app. Never expose it to the browser or the bot
       -  This will also create a smooth UX by reducing the need for UI popups

diff --git a/samples/19.c.single-sign-on-for-teams-apps/.dockerignore b/samples/19.c.single-sign-on-for-teams-apps/.dockerignore
@@ -0,0 +1,4 @@
+/bot/.env
+/bot/node_modules
+/web/.env
+/web/node_modules
diff --git a/samples/19.c.single-sign-on-for-teams-apps/Dockerfile b/samples/19.c.single-sign-on-for-teams-apps/Dockerfile
@@ -0,0 +1,28 @@
+# This container is for simplifying CI when using Azure Pipelines
+FROM node:12
+
+# Copy the bot code to /var/bot/
+ADD bot/ /var/build/bot/
+
+# Copy the web server code to /var/web/
+ADD web/ /var/build/web/
+
+# Copy SSH configuration and startup script to /var/
+# Adopted from https://github.com/Azure-App-Service/node/blob/master/10.14/sshd_config
+ADD init.sh /var/build/
+ADD sshd_config /var/build/
+
+# Doing a fresh "npm install" on build to make sure the image is reproducible
+WORKDIR /var/build/bot/
+RUN npm ci
+
+# Doing a fresh "npm install" on build to make sure the image is reproducible
+WORKDIR /var/build/web/
+RUN npm ci
+
+# Pack "concurrently" to make sure the image is reproducible
+WORKDIR /var/build/
+RUN npm install [email protected]
+
+# Pack the build content as a "build.tgz" and export it out
+RUN tar -cf build.tgz *
diff --git a/samples/19.c.single-sign-on-for-teams-apps/Dockerfile-run b/samples/19.c.single-sign-on-for-teams-apps/Dockerfile-run
@@ -0,0 +1,28 @@
+# This is the container for running the demo under Azure Web App
+FROM node:12
+
+# Expose both port 80 and 2222 (SSH for Azure Web App)
+EXPOSE 80 2222
+
+WORKDIR /var/
+
+# Extract build image to /var/
+ADD build.tgz /var/
+
+# Setup OpenSSH for debugging thru Azure Web App
+# https://docs.microsoft.com/en-us/azure/app-service/containers/app-service-linux-ssh-support#ssh-support-with-custom-docker-images
+# https://docs.microsoft.com/en-us/azure/app-service/containers/tutorial-custom-docker-image
+ENV SSH_PASSWD "root:Docker!"
+ENV SSH_PORT 2222
+RUN \
+  apt-get update \
+  && apt-get install -y --no-install-recommends dialog \
+  && apt-get update \
+  && apt-get install -y --no-install-recommends openssh-server \
+  && echo "$SSH_PASSWD" | chpasswd \
+  && mv /var/sshd_config /etc/ssh/ \
+  && mv /var/init.sh /usr/local/bin/ \
+  && chmod u+x /usr/local/bin/init.sh
+
+# Set up entrypoint
+ENTRYPOINT init.sh