OfficeDev / TeamsFx

Developer tools for building Teams apps
Other
427 stars 165 forks source link

Required bicep templates missing #6276

Closed amansani15 closed 1 year ago

amansani15 commented 1 year ago

Describe the bug I am trying to create a new teams tab application using Teams tool kit extension in visual studio code. The available templates under azure folder are for storage account and user identity. When I select provision in the cloud, it is not registering the app under AAD and not creating a simple web application because the required templates are not available.

To Reproduce Steps to reproduce the behavior:

  1. Go to Visual studio code, teams tool kit
  2. Select 'Create a new teams app' and pick create a new teams app
  3. Select Tab capability under basic teams app
  4. Select JS language and select folder location.
  5. Below is the folder structure I see after following the above steps

image

Expected behavior For basic teams tab application, it should create the following azure resources according to the below documentation. For me it's missing to create a web app, registering teams app under azure AAD and app service plan.

https://learn.microsoft.com/en-us/microsoftteams/platform/toolkit/provision?pivots=visual-studio-code

image

VS Code Extension Information (please complete the following information):

Additional context Also, I would like to know how to select both tab and bot capability while creating the teams application. Right now it allows me to select only one option.

Any guidance is highly appreciated, Thank you.

ghost commented 1 year ago

Thank you for contacting us! Any issue or feedback from you is quite important to us. We will do our best to fully respond to your issue as soon as possible. Sometimes additional investigations may be needed, we will usually get back to you within 2 days by adding comments to this issue. Please stay tuned.

adashen commented 1 year ago

Hi @amansani15 Thanks for reporting the issue. It seems the document you specified is obsolete now. Now for the tab app, it is a pure front-end application. And we are now using auth-code flow to get the token from AAD. So there is no backend app (simple auth) needed now. And as for aad app registration. Did you choose the "SSO enabled personal tab" or "Tab". If it just "Tab", it is a template without SSO support. So there is no AAD app registration. If you would like to have SSO enabled, please try the "SSO enabled personal tab".

amansani15 commented 1 year ago

Hello @adashen , thank you for the reply.

Yes I have selected just the "Tab" option before. However, after seeing your comment, I tried creating another application by selecting the "SSO enabled personal tab" and below is the folder structure I see:

image

Even in this, I don't see webapp.bicep template. Also, choosing SSO enabled will create app registration for us? As the document which I shared is obsolete, could you point me to the right documentation? Thank you

amansani15 commented 1 year ago

Hello @adashen, did you get any chance to look into this issue? Please let me know if you need any more information from my end. Thank you

adashen commented 1 year ago

Hi @amansani15 Sorry for the late reply. Actually, what you saw is as expected. For a pure frontend tab, there is no webapp.bicep included in the project. We are updating the document on Doc site. So for your case do you need a backend for tab? And there is a tutorial https://learn.microsoft.com/en-us/microsoftteams/platform/sbs-gs-javascript?tabs=vscode%2Cvsc%2Cviscode to run your first tab in toolkit

amansani15 commented 1 year ago

Hello @adashen, no problem. Thanks for getting back to me.

In my case, I don't use the app service, but I want the teams app to be registered under AAD, so that I can create the Azure Bot with the same appid used for teams app. Currently when I create both tab and bot, the appid/clientid are different. If I create only the tab, then as the app is not registered under AAD, I am not able to create the bot using the same microsoft appid.

https://learn.microsoft.com/en-us/microsoftteams/platform/bots/how-to/authentication/add-authentication?tabs=dotnet%2Cdotnet-sample#install-and-test-the-bot-in-teams

In the above link, the second point under install and test the bot in teams, it says the botid and id should be same in the manifest file to make the authentication work. In my current manifest they both are different:

image

All I want is to use the same appid for both teams app and the Azure bot. When I created the tab application with teams tool kit version V2.9.0, it used to register the app under AAD, then I created the Azure bot on the portal using the same appid. Please let me know if there is any way to have the same appid for both teams app and the bot using the current teams tool kit version V4.0.6. Thank you.

KennethBWSong commented 1 year ago

@amansani15 thank you for using our toolkit! First of all, I want to introduce that our toolkit also provides support for Teams Bot and you can follow this link to add auth to your Bot. We also provides sso Bot sample here. For your question, the Id in the Teams app manifest, which represents the id of the Teams app, is not necessarily the same as botId. You can keep your botId same as the Microsoft App Id in the doc you provide and use current Id for Teams app. If you persist to use the same id, you can go to .fx/states/state.{env}.json and replace the 'teamsAppId' under 'fx-resource-appstudio' with your botId: image

amansani15 commented 1 year ago

Hello @KennethBWSong, thank you for the reply.

I am assuming we need to switch the values in the given picture right?

image

KennethBWSong commented 1 year ago

@amansani15 I mean you need to copy your Microsoft App Id and fill in "teamsAppId" and keep the "tenantId" unchanged.

amansani15 commented 1 year ago

Thank you for clarifying. If we want to make any changes to manifest, first we have to apply the changes to state.{env}.json files then when we do debugging or provisioning the actual manifest file will get updated right?

If so, I would like to add additional valid domains to manifest file, but it's getting removed when provisioning the resources to Azure, as the information is reading from state.dev.json. Where should I add additional valid domains to state.dev.json file?

Thank you.

KennethBWSong commented 1 year ago

@amansani15 You can directly update the templates/appPackage/manifest.template.json to add valid domains for Teams app. Add @nliu-ms for awareness.

amansani15 commented 1 year ago

Thanks @KennethBWSong . I am able to add valid domains successfully in manifest.template.json.

To see those domain names under apps - developer portal, I had to do "provision in the cloud" step. I believe, we have to do provisioning every time whenever there is a change exists in manifest file right?

Another question, I want to create just the frontend tab using teams tool kit and would like to add the bot details later, not with "Add features" option. Just add the existing bot id, pwd directly to manifest file. In this case, I have to add the bot details in the manifest.template.json file right? If yes, then the added botid applies to both local and dev environments?

Thank you and sorry to bug you with many questions.

KennethBWSong commented 1 year ago

Hi @amansani15 We truly appreciate all your feedback and questions when you are using Teams toolkit. These questions and feedback will help us to improve our product. Please feel free to leave your feedback or comment in the issues.

For your first question, yes you need to do provision to update the Teams app in App Studio. There is another simple way for you to only deploy the Teams app manifest. You can press Ctrl + Shift + p to open the command palette and trigger command Teams: Deploy Teams app manifest like below: image

For the second question, yes you need to manually add the bot info into the templates/appPackage/manifest.template.json. If you hardcode the bot info into this file, this change will be applied to all the environments you have. (Of course, you need to provision/deploy Teams app manifest first.) You can also use envs in .fx/configs/config.{env}.json files like following if you want to use different bot for different environments. image image

amansani15 commented 1 year ago

Awesome, this actually helps a lot. Thank you so much.

Do we have any tutorial which explains all these kind of questions?

KennethBWSong commented 1 year ago

Hi @amansani15 Usually you can find related docs here or in Github Wiki. If you have any questions, you can raise an issue here or ask a question in Stack Overflow with teams-toolkit tag.

amansani15 commented 1 year ago

Great, thank you for all the information.