Skip to content

Commit

Permalink
solved me sso issue
Browse files Browse the repository at this point in the history
  • Loading branch information
Yitong Feng committed Mar 25, 2021
1 parent 92de7ef commit 3c5ce9e
Show file tree
Hide file tree
Showing 13 changed files with 290 additions and 146 deletions.
134 changes: 134 additions & 0 deletions BotSSOSetup.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
## Bot SSO Setup
This document show how to setup AAD and Azure Bot Services, which are the prerequisites steps to enable Bot SSO.

### 1. Create and configure AAD app

#### 1.1 Create AAD app for SSO

This step will create an AAD app, it will be reused wherever it needs AAD throughout this sample to simpler the steps.

- Navigate to [Azure _App Registration_ Blade](https://ms.portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade)

- Click "New Registration" on the upper left corner

- Fill out name and select third option for supported account type
- Set Redirect Uri to "https://token.botframework.com/.auth/web/redirect" and click "Register":

![App Registration Organization](https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Samples/main/samples/bot-conversation-sso-quickstart/js/sso_media/AppRegistration.png)

- Navigate to the AAD app you just created, _copy and paste the Application ID(will referred as **AppId** in this document) somewhere safe_. You'll need it in a future step:
![Save Application ID](https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Samples/main/samples/bot-conversation-sso-quickstart/js/sso_media/AppId.png)

#### 1.2 Create Client Secret

- Navigate to the "Certificates & secrets" blade and add a client secret by clicking "New Client Secret"

![New Secret](https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Samples/main/samples/bot-conversation-sso-quickstart/js/sso_media/ClientSecret.png)
</br>

- _Copy and paste the secret somewhere safe_. You'll need it in a future step

#### 1.3. Expose API endpoint

- Click "_Expose an API_" in the left rail

- Update your application ID URL to include your bot id - api://botid-<AppId>, where <AppId> is the id of the bot that will be making the SSO request and found in your Teams Application Manifest, which is the same you create and saved in step1.1:
![Application ID URI](https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Samples/main/samples/bot-conversation-sso-quickstart/js/sso_media/AppIdUri.png)

- Click "_Add a scope_"

- access_as_user as the Scope name.

- Set Who can consent? to Admins and users

- Fill in the fields for configuring the admin and user consent prompts with values that are appropriate for the access_as_user scope. Suggestions:

- Admin consent title: Teams can access the user’s profile

- Admin consent description: Allows Teams to call the app’s web APIs as the current user.

- User consent title: Teams can access your user profile and make requests on your behalf

- User consent description: Enable Teams to call this app’s APIs with the same rights that you have

- Ensure that State is set to Enabled

- Select Add scope (Note: The domain part of the Scope name displayed just below the text field should automatically match the Application ID URI set in the previous step, with /access_as_user appended to the end)

![Add Scope](https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Samples/main/samples/bot-conversation-sso-quickstart/js/sso_media/CreateScope.png)

#### 1.4. Authorize client applications

Add the following Ids as authorized clients for your application

- 1fec8e78-bce4-4aaf-ab1b-5451cc387264 (Teams mobile/desktop application)

- 5e3ce6c0-2b1f-4285-8d4b-75ee78787346 (Teams web application)

![Add Client Application](https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Samples/main/samples/bot-conversation-sso-quickstart/js/sso_media/AddClient.png)

#### 1.5. Add any necessary API permissions for downstream calls

- Navigate to "API permissions" blade on the left hand side

- Add any user delegated permissions that your app will need to downstream APIs. This quick start only requires User.Read.

![Add Permissions](https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Samples/main/samples/bot-conversation-sso-quickstart/js/sso_media/image013.png)

#### 1.6. Enable implicit grant

- Navigate to "Authentication"

- Check the *Access tokens* and *ID tokens* boxes..

#### 1.7
- Navigate to "Manifest"
- Confirm the config item: `"accessTokenAcceptedVersion": 2`, if not, change its value to 2, click "save". (If you are already in testing your bot in Teams, you need to signout this app and signout Teams then signin again to see this change work).


### 2. Setup bot in Azure Bot Service

#### 2.1. Run ngrok - point to port 3978

```bash
ngrok http -host-header=rewrite 3978
```

#### 2.2. Create new Bot Channel Registration resource in Azure

Create [Bot Channels registration resource](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-quickstart-registration) in Azure
- For the "_Messaging endpoint_", use the current `https` URL you were given by running ngrok. Append with the path `/api/messages`:
- For "Microsoft App ID and password", click "Create New", fill in the AppId and client secret you created in step1.1 and step 1.2:
![Create Bot Channels Registration](https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Samples/main/samples/bot-conversation-sso-quickstart/js/sso_media/CreateBot.png)

![Create Bot Channels Registration2](https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Samples/main/samples/bot-conversation-sso-quickstart/js/sso_media/CreateBot2.png)

- After you select *Create*, it will take a few moments for your bot service to be provisioned. Once you see a notification indicating the validation process is complete, navigate back to *Home > Bot Services* to find your bot. You may have to refresh the page to see your bot listed.
- Ensure that you've [enabled the Teams Channel](https://docs.microsoft.com/en-us/azure/bot-service/channel-connect-teams?view=azure-bot-service-4.0)

### 3. Setup Bot Service Connection (TokenStore)

- In the Azure Portal, navigate back to the Bot Channels Registration created in Step 2


- Switch to the "Settings" blade and click "Add Setting" under the OAuth Connection Settings section

![Add OAuth Settings](https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Samples/main/samples/bot-conversation-sso-quickstart/js/sso_media/AddOauth.png)

- Fill out the Connection Setting form

- Enter a name for your new Connection setting. This will be the name that gets referenced inside the settings of your bot service code in step 5

- In the Service Provider dropdown, select Azure Active Directory V2

- Enter in the client id and client secret obtained in step 2

- For the Token Exchange URL use the Application ID URL obtained in step 2

- Specify "common" as the Tenant ID

- Add all the scopes configured when specifying permissions to downstream APIs in step 2

- Click "Save"

![SSO Connection Settings](https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Samples/main/samples/bot-conversation-sso-quickstart/js/sso_media/image017.png)
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,9 @@
|3|Messaging extensions - action quick-start | Hello world Messaging Extension that accepts parameters and returns a card. Also, how to receive a forwarded message as a parameter in a Messaging Extension. | | [View][msgext-action-quickstart#js] | |
|4|Messaging extensions - action | Messaging Extension that accepts parameters and returns a card. Also, how to receive a forwarded message as a parameter in a Messaging Extension. | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/51.teams-messaging-extensions-action) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/javascript_nodejs/51.teams-messaging-extensions-action) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/python/51.teams-messaging-extensions-action) |
|5|Messaging extensions - auth and config | Messaging Extension that has a configuration page, accepts search requests and returns results after the user has signed in. | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/52.teams-messaging-extensions-search-auth-config) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/javascript_nodejs/52.teams-messaging-extensions-search-auth-config) |
|6|Messaging extensions - action preview | Demonstrates how to create a Preview and Edit flow for a Messaging Extension. | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/53.teams-messaging-extensions-action-preview) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/javascript_nodejs/53.teams-messaging-extensions-action-preview) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/python/53.teams-messaging-extensions-action-preview) |
|7|Link unfurling | Messaging Extension that performs link unfurling. | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/55.teams-link-unfurling) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/javascript_nodejs/55.teams-link-unfurling) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/python/55.teams-link-unfurling) |
|6|Messaging extensions - auth and config | Messaging Extension that has a configuration page, accepts search requests and returns results with SSO. | | [View][msgext-search-sso-config#js] |
|7|Messaging extensions - action preview | Demonstrates how to create a Preview and Edit flow for a Messaging Extension. | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/53.teams-messaging-extensions-action-preview) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/javascript_nodejs/53.teams-messaging-extensions-action-preview) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/python/53.teams-messaging-extensions-action-preview) |
|8|Link unfurling | Messaging Extension that performs link unfurling. | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/55.teams-link-unfurling) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/javascript_nodejs/55.teams-link-unfurling) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/python/55.teams-link-unfurling) |

#### Additional samples

Expand Down Expand Up @@ -129,6 +130,7 @@
[msgext-link-unfurl#cs]:samples/msgext-link-unfurling-reddit/csharp
[msgext-action-quickstart#js]:samples/msgext-action-quickstart/js
[msgext-search-quickstart#js]:samples/msgext-search-quickstart/js
[msgext-search-sso-config#js]:samples/msgext-search-sso-config

[tab-sso#ts]:samples/tabs-sso/nodejs
[tab-sso#cs]:samples/tab-sso/csharp
Expand Down
8 changes: 4 additions & 4 deletions samples/msgext-search-sso-config/.env
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
MicrosoftAppId=d9dd7f95-ce59-4c16-abf2-378569eee647
MicrosoftAppPassword=81n5x5.lGyE1p_OKN5oJt2F4__w_32FNqz
connectionName=YifeBotConnect
SiteUrl=https://5bc254477ba4.ngrok.io
MicrosoftAppId=
MicrosoftAppPassword=
connectionName=
SiteUrl=
61 changes: 23 additions & 38 deletions samples/msgext-search-sso-config/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Teams Search Auth Config Bot
# Teams Search SSO Config Bot

Bot Framework v4 sample for Teams expands the [50.teams-messaging-extensions-search](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/javascript_nodejs/50.teams-messaging-extensions-search) sample to include a configuration page and Bot Service authentication.
Bot Framework v4 sample for Teams expands the [52.teams-messaging-extensions-search-auth-config](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/javascript_nodejs/52.teams-messaging-extensions-search-auth-config) sample to include a configuration page and Bot Service SSO authentication.

This bot has been created using [Bot Framework](https://dev.botframework.com), it shows how to use a Messaging Extension configuration page, as well as how to sign in from a search Messaging Extension.

Expand All @@ -15,48 +15,33 @@ This bot has been created using [Bot Framework](https://dev.botframework.com), i
> Note these instructions are for running the sample on your local machine, the tunnelling solution is required because
the Teams service needs to call into the bot.

1) Clone the repository
### 1. Setup for Bot SSO
Refer to [Bot SSO Setup document](../../../BotSSOSetup.md).

```bash
git clone https://github.com/Microsoft/botbuilder-samples.git
```
### 2. Configure this sample

1) In a terminal, navigate to `samples/javascript_nodejs/52.teams-messaging-extensions-search-auth-config`
Update the `.env` configuration for the bot to use the Microsoft App Id and App Password from the Bot Framework registration. The `SiteUrl` is the URL that generated by ngrok and start with "https". (Note the MicrosoftAppId is the AppId created in step 1.1, the MicrosoftAppPassword is referred to as the "client secret" in step1.2 and you can always create a new client secret anytime.)

1) Install modules
### 3. Run your bot sample
Under the root of this sample folder, build and run by commands:
- `npm install`
- `npm start`

```bash
npm install
```
### 4. Configure and run the Teams app
- **Using App Studio**
- Open your app in App Studio's manifest editor.
- Open the *Bots* page under *Capabilities*.
- Choose *Setup*, then choose the existing bot option. Enter your AAD app registration ID from step 1.1. Select any of the scopes you wish to have the bot be installed.
- Open *Domains and permissions* from under *Finish*. Enter the same ID from the step above in *AAD App ID*, then and append it to "api://botid-" and enter the URI into *Single-Sign-On*.
- Open *Test and distribute*, then select *Install*.

1) Run ngrok - point to port 3978

```bash
ngrok http -host-header=rewrite 3978
```

1) Create [Bot Framework registration resource](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-quickstart-registration) in Azure
- Use the current `https` URL you were given by running ngrok. Append with the path `/api/messages` used by this sample
- Ensure that you've [enabled the Teams Channel](https://docs.microsoft.com/en-us/azure/bot-service/channel-connect-teams?view=azure-bot-service-4.0)
- __*If you don't have an Azure account*__ you can use this [Bot Framework registration](https://docs.microsoft.com/en-us/microsoftteams/platform/bots/how-to/create-a-bot-for-teams#register-your-web-service-with-the-bot-framework)

1) Update the `.env` configuration for the bot to use the Microsoft App Id and App Password from the Bot Framework registration. (Note the App Password is referred to as the "client secret" in the azure portal and you can always create a new client secret anytime.)

1) __*This step is specific to Teams.*__
- **Edit** the `manifest.json` contained in the `teamsAppManifest` folder to replace your Microsoft App Id (that was created when you registered your bot earlier) *everywhere* you see the place holder string `<<YOUR-MICROSOFT-APP-ID>>` (depending on the scenario the Microsoft App Id may occur multiple times in the `manifest.json`)
- **Zip** up the contents of the `teamsAppManifest` folder to create a `manifest.zip`
- **Upload** the `manifest.zip` to Teams (in the Apps view click "Upload a custom app")
1) Run your bot at the command line:
```bash
npm start
```
## Interacting with the bot in Teams
Once the Messaging Extension is installed, click the icon for **Config Auth Search** in the Compose Box's Messaging Extension menu to display the search window. Right click to choose **Settings** and view the Config page.
- **Manually update the manifest.json**
- Edit the `manifest.json` contained in the `appPackage/` folder to replace with your MicrosoftAppId (that was created in step1.1 and is the same value of MicrosoftAppId in `.env` file) *everywhere* you see the place holder string `{TODO: MicrosoftAppId}` (depending on the scenario the Microsoft App Id may occur multiple times in the `manifest.json`)
- Zip up the contents of the `appPackage/` folder to create a `manifest.zip`
- Upload the `manifest.zip` to Teams (in the left-bottom *Apps* view, click "Upload a custom app")

- **Interacting with the Message Extension in Teams
Once the Messaging Extension is installed, find the icon for **Config Auth Search** in the Compose Box's Messaging Extension menu. Right click to choose **Settings** and view the Config page. Click the icon to display the search window, type anything it will show your profile picture.
## Deploy the bot to Azure

To learn more about deploying a bot to Azure, see [Deploy your bot to Azure](https://aka.ms/azuredeployment) for a complete list of deployment instructions.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
"manifestVersion": "1.5",
"version": "1.0.0",
"id": "d9dd7f95-ce59-4c16-abf2-378569eee647",
"packageName": "com.microsoft.teams.sample",
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
"manifestVersion": "1.8",
"version": "1.0.2",
"id": "{TODO: MicrosoftAppId}",
"packageName": "com.microsoft.teams.samples.msgExt",
"developer": {
"name": "Microsoft",
"websiteUrl": "https://dev.botframework.com",
Expand All @@ -15,8 +15,8 @@
"outline": "icon-outline.png"
},
"name": {
"short": "Messaging Extension Auth",
"full": "ME Auth for Search, Action and link unfurling"
"short": "Messaging Extension SSO",
"full": "ME SSO for Search, Action and link unfurling"
},
"description": {
"short": "ME Authentication for Search, Action and Link unfurling",
Expand All @@ -25,7 +25,7 @@
"accentColor": "#FFFFFF",
"composeExtensions": [
{
"botId": "d9dd7f95-ce59-4c16-abf2-378569eee647",
"botId": "{TODO: MicrosoftAppId}",
"canUpdateConfiguration": true,
"commands": [
{
Expand Down Expand Up @@ -110,7 +110,7 @@
"*.botframework.com"
],
"webApplicationInfo": {
"id": "d9dd7f95-ce59-4c16-abf2-378569eee647",
"resource": "api://botid-d9dd7f95-ce59-4c16-abf2-378569eee647"
"id": "{TODO: MicrosoftAppId}",
"resource": "api://{TODO: SiteUrlDomain}/botid-{TODO: MicrosoftAppId}/{TODO: MicrosoftAppId}"
}
}
Loading

0 comments on commit 3c5ce9e

Please sign in to comment.