Deployment Guide - OfficeDev/microsoft-teams-apps-newemployeeonboarding GitHub Wiki

Prerequisites

To begin, you will need:

  • App Service
  • App Service plan
  • Bot Channels Registration
  • Azure Storage account
  • Application Insights

A copy of the New Employee Onboarding app GitHub repo (https://github.com/OfficeDev/microsoft-teams-apps-newemployeeonboarding)

  • Estimated deployment time: This depends on you getting the MSIT approval. Installation itself will take about 30 to 45 mins.
  • User roles needed to perform the deployment: IT admin.

Step 1: Register Azure AD application:

Register one Azure AD application in your tenant's directory

  1. Log in to the Azure Portal for your subscription, and go to the App registrations blade here.
  2. Click on New registration, and create an Azure AD application.
    • Name: The name of your Teams app. If you are following the template for a default deployment, we recommend "NewEmployeeOnboarding".
    • Supported account types: Select Accounts in any organizational directory (Any Azure AD directory - Multitenant)
    • For Redirect URL

multitenant_creation

  1. Select Register.
  2. When the app is registered, you'll be taken to the app's Overview page. Copy the Application (client) ID and Directory (tenant) ID. We recommend that you save these ID's in a text file, using an application like Notepad, so you can easily retrieve them as instructed at a later point in the process.
  3. Verify that the Supported account types is set to Multiple organizations.

Overview

  1. In the navigation pane, click Certificates & secrets to create a secret for your application.
    • Under Client secrets section, click on + New client secret.
    • Add a description (Name of the secret) for the secret and select an expiry time (as per the requirement).
    • Click Add
    • Before leaving this page, copy the secret and save it in the text file you created earlier..

Secret overview

At this point you have 3 values saved to be used later:

  • Application (client) ID which will be later used during ARM deployment as Bot Client Id and in manifest files as <>
  • Client secret for the bot which will be later used during ARM deployment as Bot Client secret
  • Directory (tenant) ID

Step 2: Create a Security Group

If you already have a security group registered in Azure AD, then skip first 4 steps below

  1. Log in to the Azure Portal for your subscription, and go to the Groups blade [here(https://portal.azure.com/#blade/Microsoft_AAD_IAM/GroupsManagementMenuBlade/AllGroups).
  2. Click on New Group.

New Security Group

  1. Add members (new hires) to security group.

Security Group Members

  1. Click on Create.

Create Security Group

  1. Search for security group by group name.

Search Security Group

  1. Go to Security Group Overview and copy Object ID and save it in your text file.

Security Group Overview

Step 3: Configure SharePoint Hub

If your SharePoint hub is already configured, you can skip the steps below, but we recommend saving the values mentioned below. You’ll use them during ARM deployment. Otherwise, get started by clicking SharePoint configuration

  1. SharePoint site name.
  2. SharePoint site new hire check list name.
  3. SharePoint site tenant name.
  4. Complete learning plan URL from SharePoint.
  5. New hire question list name from SharePoint.

Step 4: Deploy to your Azure subscription

  1. Click on the "Deploy to Azure" button below.

Deploy to Azure

  1. When prompted, log in to your Azure subscription.
  2. Azure will create a Custom deployment based on the ARM template and ask you to fill in the template parameters.
  3. Select a Subscription and Resource group.(We recommend creating a new resource group.)
  4. The resource group location MUST be in a datacenter that supports Application Insights and Storage Account. For an up-to-date list, click here, and select a region where the following services are available:
    • Application Insights
    • Storage Account
  5. Enter a Base Resource Name, which the template uses to generate names for the other resources.
    • The app service names (Base Resource Name) must be Available (not Taken). Otherwise, the deployment will fail with a Conflict error.
    • Save your selected Base Resource Name in your text file to be used later
  6. Fill in the following IDs in the template:
    • Bot Client ID: The application (client) ID of the Microsoft Teams Bot app.
    • Bot Client Secret: The client secret of the Microsoft Teams Bot app.
    • Tenant Id: The tenant ID of your application.
    • Manifest Id : This needs to be same as manifest ID provided in manifest.json file inside Manifest folder.
    • Human Resource Team Link: The URL for the Microsoft Teams team your Human Resources department uses (where you want the app to send employee feedback notifications). This URL starts with https://teams.microsoft.com/l/team/.
    • Site Name: New employee onboarding site name.
    • New Hire Check List Name: New hire onboarding checklist name.
    • Site Tenant Name: SharePoint tenant name.
    • Share Feedback Form URL: The URL for the survey new employees will take to share feedback. Go to here to create survey MS Forms and copy the link by clicking on Share button if not created before.
    • Complete Learning Plan URL: Complete learning plan list URL.
    • New Hire Question List Name: New hire question list name from SharePoint Hub.
    • Security Group Object Id: Security group ID (Required for user role).
    • delayInPairUpNotificationInDays: Number of days to delay in pair up notification.
    • newHireRetentionPeriodInDays: Number of days for new hire retention period.

Make sure that you’ve pasted the values exactly as-is, with no extra spaces. The template checks that GUIDs are exactly 36 characters.

NOTE: If you plan to use a custom domain name instead of relying on Azure Front Door, read the instructions here first.

  1. If you wish to change the app name, description, and icon from the defaults, modify the corresponding template parameters.
  2. Agree to the Azure terms and conditions by clicking on the check box "I agree to the terms and conditions stated above" located at the bottom of the page.
  3. Click on Purchase to start the deployment.
  4. Wait for the deployment to finish. You can check the progress of the deployment from the Notifications pane of the Azure Portal. It can take more than 10 minutes for the deployment to finish.
  5. Once the deployment has finished, you would be directed to a page that has the following fields:
    • BotId - This is the Microsoft Application ID for the New Employee Onboarding bot.
    • AppDomain - This is the base domain for the New Employee Onboarding Bot. We need to add SharePoint domain as well.

Step 5: Set up authentication for the app

  1. Go back to the App Registrations page here
  2. Enter the BotId created in Step 1 under Owned applications search box.
  3. Click on the application (this should be the same application registered in step 1)
  4. From the left menu under Manage, select Authentication .
  5. Select Accounts in any organizational directory (Any Azure AD directory - Multitenant) under Supported account types and click +Add a platform.
  6. On the flyout menu, select Web

Set up authentication for the app

  1. Add https://[baseresourcename].azurefd.net/signin-simple-end and https://token.botframework.com/.auth/web/redirect under Redirect URLs and select the check boxes Access tokens and ID tokens and then click Configure.

Set up authentication for the app

  1. From the left menu under Manage, select Expose an API.

Set up authentication for the app

  1. Select the Set link to generate the Application ID URI in the form of api://{BotID}. Insert your app Domain (with a forward slash "/" appended to the end) between the double forward slashes and the GUID. The entire ID should have the form of: api://app Domain/{BotID}
  • for e.g.: api://newhireonboarding.azuredfd.net/c6c1f32b-5e55-4997-881a-753cc1d563b7.
  1. Select the Add a scope button. In the panel that opens, enter access_as_user as the Scope name.
  2. Set Who can consent? to "Admins and users"
  3. 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 display name: New Employee Onboarding
    • Admin consent description: Allows Teams to call the app’s web APIs as the current user.
    • User consent display name: 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; for example:

  • api://newhireonboarding.azurefd.net/c6c1f32b-5e55-4997-881a-753cc1d563b7/access_as_user
  1. In the same page in below section Authorized client applications, you identify the applications that you want to authorize to your app’s web application. Each of the following IDs needs to be entered. Click "+Add a client application" and copy-paste the below id and select checkbox "Authorized scopes". Repeat the step for second GUID.
  • 1fec8e78-bce4-4aaf-ab1b-5451cc387264 (Teams mobile/desktop application)
  • 5e3ce6c0-2b1f-4285-8d4b-75ee78787346 (Teams web application)
  1. From the left menu, select API Permissions, and add the follow permissions of Microsoft Graph API :

Delegated Permissions:

  • User.ReadBasic.All
  • User.Read.All
  • Directory.Read.All
  • Directory.AccessAsUser.All
  • Team.ReadBasic.All
  • TeamSettings.Read.All
  • openid
  • profile
  • User.ManageIdentities.All

Application Permission:

  • User.Read.All
  • Sites.Read.All
  • GroupMember.Read.All
  • Group.Read.All
  • TeamsAppInstallation.ReadWriteSelfForUser.All

Note: The detailed guidelines for registering an application for SSO Microsoft Teams tab can be found here

Step 6: Set up authentication for bot

  1. Note the name of the bot that you deployed, which is [BaseResourceName].

  2. Go to azure portal here and search for your web app bot.

  3. Click on the bot in the application list. Under Settings, click on Configuration -> Add OAuth Connection Settings.

  4. Fill in the form as follows:

    a. For Name, enter NewHireOnboardingAuth. You'll use it in your bot code.

    b. For Service Provider, select Azure Active Directory. Once you select this, the Azure AD-specific fields will be displayed.

    c. For Client ID, enter the application (client) ID that you recorded earlier.

    d. For Client secret, enter the secret that you created to grant the bot access to the Azure AD app.

    e. For Grant type , enter authorization_code.

    f. For Login URL , enter "https://login.microsoftonline.com". Insert your login URL (without a forward slash "/" appended to the end)

    g. For Tenant ID, enter the directory (tenant) ID that you saved earlier for your AAD app. This is the tenant associated with the users who can be authenticated.

    h. For Resource URL , enter "https://graph.microsoft.com/".

    i. For Scopes, keep it blank.

    j. Click Save.

Step 7: Create the Teams app packages

This step covers the Teams application package creation for teams scope and make it ready to install in Teams.

  1. Open the Manifest\manifest.json file in a text editor.
  2. Change the placeholder fields in the manifest to values appropriate for your organization.
  • developer.name (What's this?)
  • developer.websiteUrl
  • developer.privacyUrl
  • developer.termsOfUseUrl
  1. Change the <<botId>> placeholder to your **Azure AD application's ID ** from above. This is the same GUID that you entered in the template under Bot Client ID.
  2. Change <<SharePointNewHireCheckListUrl>> placeholder with Complete learning plan URL which you have recorded before and also make sure replace <<azurefdurl>> with 'https://[baseresourcename].azurefd.net'.
  3. In the validDomains section, replace the <<appDomain>> with your Bot App Service's domain. This will be [BaseResourceName].azurefd.net. For example if you chose "contosonewhireonboarding" as the base name, change the placeholder to contosonewhireonboarding.azurefd.net.
  4. Note : please make sure to not add https:// in valid domains. Also make sure to add "token.botframework.com" and SharePoint tenant name that you have recorded before in "validDomains" section.
  5. In the webApplicationInfo section, replace the <<botId>> with Bot Client ID of the app created in Step 1. Also replace <<ApplicationIdURI>> with following Application URI appended with bot client id. This will be as follows for example api://contoso-newhireonboarding.azurefd.net/19c1102a-fffe-46c4-9a85-016bec13e0ab where contoso-newhireonboarding is the base resource URL and 19c1102a-fffe-46c4-9a85-016bec13e0ab is the bot client id.
  6. Create a ZIP package with the manifest.json,color.png, and outline.png. The two image files are the icons for your app in Teams.
  7. Make sure that the 3 files are the top level of the ZIP package, with no nested folders.

Create the Teams app packages

Step 8: Run the apps in Microsoft Teams

  1. If your tenant has side loading apps enabled, you can install your app by following the instructions here
  2. You can also upload it to your tenant's app catalog, so that it can be available for everyone in your tenant to install. See here
  3. We recommend using app permission policies to restrict access to this app to the members of the experts team.
  4. Install the app (the NewHireOnboarding.zip package) to your team.

Step 9: Update Teams app Id in configuration

  1. Go to the Teams admin portal, here
  2. Go to Manage app section from side menu bar

Manage app dashboard

  1. Search for New Employee Onboarding

Search app

  1. Copy the App ID

Copy app id

  1. Go back to Azure Portal here and search app service by [Base Resource Name] which you have provided during deployment.

Search service

  1. Go to Configuration from the side menu bar and double click on App:TeamsAppId, Update its value with app Id and make sure to save the changes after updating.

Update catalog

  1. Restart the app service

Restart service

Troubleshooting

Please see our Troubleshooting page.

⚠️ **GitHub.com Fallback** ⚠️