App Modernization - Microsoft Cloud Workshop

Microsoft Cloud Workshop Microsoft Cloud Workshop on Nov 01, 2018

In this hands-on lab, you will implement the steps to modernize legacy on-premises applications and infrastructure by leveraging cloud services, while adding a mix of web and mobile services, all secured using Azure Active Directory.
At the end of this hands-on lab, you will be better able to build solutions for modernizing legacy on-premises applications and infrastructure using cloud services, and implement a mix of web and mobile services secured by Azure Active Directory.

Before the Hands-on Lab

App modernization
Before the hands-on lab
November 2018

Information in this document, including URL and other Internet Web site references, is subject to change without notice. Unless otherwise noted, the example companies, organizations, products, domain names, e-mail addresses, logos, people, places, and events depicted herein are fictitious, and no association with any real company, organization, product, domain name, e-mail address, logo, person, place or event is intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property.

The names of manufacturers, products, or URLs are provided for informational purposes only and Microsoft makes no representations and warranties, either expressed, implied, or statutory, regarding these manufacturers or the use of the products with any Microsoft technologies. The inclusion of a manufacturer or product does not imply endorsement of Microsoft of the manufacturer or product. Links may be provided to third party sites. Such sites are not under the control of Microsoft and Microsoft is not responsible for the contents of any linked site or any link contained in a linked site, or any changes or updates to such sites. Microsoft is not responsible for webcasting or any other form of transmission received from any linked site. Microsoft is providing these links to you only as a convenience, and the inclusion of any link does not imply endorsement of Microsoft of the site or the products contained therein.

© 2018 Microsoft Corporation. All rights reserved.

Microsoft and the trademarks listed at https://www.microsoft.com/en-us/legal/intellectualproperty/Trademarks/Usage/General.aspx are trademarks of the Microsoft group of companies. All other trademarks are property of their respective owners.

Contents

App modernization before the hands-on lab setup guide

Requirements

  • Microsoft Azure subscription (non-Microsoft subscription).

  • Global Administrator role for Azure AD within your subscription.

  • Local machine or a virtual machine configured with (Complete the day before the lab!):

    • Visual Studio Community 2017 or greater

    • Visual Studio 2017 workloads for:

      • Azure development

      • Mobile development with .NET

    • SQL Server 2017 Express or greater

    • SQL Server Management Studio (SSMS)

    • PowerShell 1.1.0 or higher

Before the hands-on lab

Duration: 60 minutes

In this exercise, you will set up your environment for use in the rest of the hands-on lab. You should follow all steps provided before attending the hands-on lab.

IMPORTANT: Most Azure resources require unique names. Throughout this lab you will see the word "SUFFIX" as part of resource names. You should replace this with your Microsoft alias, initials, or another value to ensure the resource is uniquely named.

Task 1: Provision a resource group

In this task, you will create an Azure resource group for the resources used throughout this lab.

  1. In the Azure Portal, select Resource groups, select +Add, then enter the following in the Create an empty resource group blade:

    1. Name: Enter hands-on-lab-SUFFIX.

    2. Subscription: Select the subscription you are using for this hands-on lab.

    3. Resource group location: Select a nearby location. Remember this location for other resources in this hands-on lab.

    Resource groups is highlighted in the navigation pane of the Azure portal, + Add is highlighted in the Resource groups blade, and

  2. Select Create.

Task 2: Create a development virtual machine

In this task, you will provision an Azure virtual machine (VM) using the Visual Studio Community 2017 on Windows Server 2016 (x64) image. This will be used as your development machine throughout this lab. If you already have a machine running Visual Studio Community 2017 (or later) and would like to use it as your development machine, you can skip this task.

It is recommended you use a DS2 or D2 instance size for this VM. If you decide to use a VM, you will not be able to run the Android emulator in later steps of the lab.

  1. In the Azure Portal, select +Create a resource, enter "Visual Studio" into the Search the Marketplace box, and select Visual Studio Community 2017 (latest release) on Windows Server 2016 (x64) from the results.

    In the Azure Portal Everything section, under Results, under Name, Visual Studio Community 2017 on Windows Server 2016 is circled.

  2. On the blade that comes up, at the bottom, ensure the deployment model is set to Resource Manager, and select Create.

    At the Bottom of the blade, Resource Manager is selected as the deployment model.

  3. Set the following configuration on the Basics tab:

    1. Subscription: Select the subscription you are using for this hands-on lab.

    2. Resource Group: Select the hands-on-lab-SUFFIX resource group.

    3. Name: Enter LabVM

    4. Image: Ensure Visual Studio Community 2017 (latest release) on Windows Server 2016 (x64) is selected.

    5. Username: demouser

    6. Password: Enter Password.1!!

  4. Select Change Size and choose D2s_v3.

  1. On the Settings blade, locate the Select public inbound ports drop down, and select RDP (3389)
    Create virtual machine basics blade with values specified above enter into the fields

  2. Select Next : Disks > to move to the next step.

  3. Select Premium SSD as the OS Disk type.

  4. Select Review + create to move on to the Validation step.

  5. After Validation is complete, select Create on the Create blade to provision the virtual machine.

  6. It may take 10+ minutes for the virtual machine to complete provisioning.

Task 3: Connect to your Lab VM

In this task, you will add an inbound port rule to you Lab VM to allow SQL Server to migrate to an Azure SQL Database later in the lab. You will then open an RDP connection to your Lab VM and disable Internet Explorer Enhanced Security Configuration.

  1. From the left-hand menu in the Azure portal, select Resource groups, then enter your resource group name into the filter box, and select it from the list. In the Azure Portal, Resource groups pane, hands-on is typed in the search field, and under Name, hands-on-labs is circled.

  2. Next, select your lab virtual machine, LabVM, from the list.

    In the Name list, the LabVM Virtual Machine is circled.

  3. Within the Settings section, select Networking, then select Add inbound port rule

    The Networking blade is open and the Add inbound port rule button is highlighted.

  4. Enter the following values:

    • Source: Any

    • Source port range: *

    • Destination: Any

    • Destination port ranges: 1433

    • Protocol: Select TCP

    • Action: Allow

    • Priority: Accept the default value

    • Name: SQL-Server

    Note: Exposing MS SQL port 1433 as shown here is done for simplicity's sake for this hands-on lab and is not recommended in other cases.

    The values listed above are entered in the inbound port rule blade.

  5. Select Save to finish creating the inbound port rule.

  6. On you Lab VM blade, select Connect from the top menu.

    The Connect button is circled on the lab VM blade top menu.

  7. Select Download RDP file, then open the downloaded RDP file.

    Connect to virtual machine dialog with Download RDP file button highlighted

  8. Select Connect on the Remote Desktop Connection dialog.

    In the Remote Desktop Connection Dialog Box, the Connect button is circled.

  9. Enter the following credentials when prompted:

    1. User name: demouser

    2. Password: Password.1!!

  10. Select Yes to connect, if prompted that the identity of the remote computer cannot be verified.

In the Remote Desktop Connection dialog box, a warning states that the identity of the remote computer cannot be verified, and asks if you want to continue anyway. At the bottom, the Yes button is circled.

  1. Once logged in, launch the Server Manager. This should start automatically, but you can access it via the Start menu if it does not start.

The Server Manager tile is circled in the Start Menu.

  1. Select Local Server, then select On next to IE Enhanced Security Configuration.

    In Server manager, in the left pane, Local Server is selected. In the right, Properties pane, IE Enhanced Security Configuration is circled, and a callout arrow points to On.

  2. In the Internet Explorer Enhanced Security Configuration dialog, select Off under Administrators and Users.

    Internet Explorer Enhanced Security Configuration dialog with Off selected under both Administrators and Users.

  3. Select OK.

  4. Close the Server Manager.

Task 4: Update Visual Studio and Install Xamarin and Android SDK

In this task, you will add the Mobile Development with .NET workload to the Visual Studio Community 2017 installation on your Lab VM.

  1. On your Lab VM, launch Visual Studio Installer.

  2. Select Modify for the Visual Studio Community 2017 installation. Note: If updates are available, select the Update button first, and install the updates before moving on to installing the Xamarin components. Once the updates are installed, the Update button will be replaced with the Modify button.

    Visual Studio Installer dialog with Modify highlighted

  3. Select the Mobile development with .NET workload from the Workloads screen.

    Visual Studio Installer workloads screen, with Mobile development for .NET workload highlighted.

  4. While Mobile development with .NET is selected, look at the Summary panel to the right. Ensure that Android SDK Setup, Xamarin Workbooks, Google Android Emulator, Intel Hardware Accelerated Execution Manager, and Universal Windows Platform tools for Xamarin are selected.

    Summary view of the Visual Studio Installer;s Mobile development with .NET components.

  5. Select Modify.

  6. Be sure to allot for extra time, since the Android SDK can be more than 3.0 GB.

Task 5: Update Android SDKs

To complete these exercises, you will need to make sure you have all the correct Android SDKs installed.

  1. On your Lab VM, launch Visual Studio 2017 Community edition.

  2. Select Tools > Android > Android SDK Manager.

  3. When the Android SDKs and Tools dialog opens, check the bottom left corner of the dialog for an x Updates Available button.

    Android SDKs and Tools dialog, with updates highlighted.

  4. If this button is visible, select it to apply any updates before selecting Android SDK platforms and tools.

    1. Select all available updates and select Install Updates.

    Android SDKs and Tools dialog review updates screen

    1. Accept any license agreements required to complete the installation.

    2. Close the Android SDKs and Tools dialog when installation completes.

  5. On the Platforms tab, select each of the Android SDK platforms from 5.0 (Lollipop) to 8.0 (Oreo), selecting only the Android SDK platform box under each item (API Levels 21, 22, 23, 24, 25, and 26).

    Android SDKs and Tools dialog with platforms 5.0 - 8.0 selected.

  6. Select the Tools tab, expand Android SDK Build Tools, and select Android SDK Build Tools 27.0.1 and Android SDK Build Tools 27.

    Android SDKs and Tools dialog with Android SDK Build-Tools 27 and 27.0.1 selected under Android SDK Build Tools.

  7. Select Apply Changes to install the platforms and tools, accepting any license agreements required.

Task 6: Install SQL Server 2017 Express edition

  1. On the Lab VM, download and install SQL Server 2017 Express edition from https://www.microsoft.com/en-us/sql-server/sql-server-editions-express.

Note: If you are using a machine that already has SQL Server installed, make sure Mixed Mode authentication is enabled: https://technet.microsoft.com/en-us/library/ms188670(v=sql.110).aspx.

  1. Select Download now on the SQL Server 2017 Express edition page.

    SQL Server 2017 Express edition download

  2. If you receive a message that your current security settings do not allow this file to be downloaded, do the following:

    1. In the top right corner of your Internet Explorer window, select Settings, the Internet options.

    Internet Explorer options menu with Internet Options selected.

    1. In the Internet Options dialog, select the Security tab, then select the Custom level button.

    Internet Options dialog with the Security tab selected, and the Custom level button highlighted.

    1. On the Security Settings dialog, scroll down until you find the Downloads section, and select Enable.

    Security Settings - Internet Zone dialog with Downloads -> File download -> Enable selected.

    1. Select OK.

    2. Select OK again on the Internet Options dialog.

    3. Select the Download now link again on the SQL Server 2017 Express edition download page.

  3. Run the downloaded installer.

  4. Choose Custom installation once the install dialog box appears.

    SQL Server 2017 Express Edition Installer with Custom selected.

  5. Accept the default Media location and select Install.

    SQL Server 2017 Express Edition Installer media location screen

  6. When the install package finishes downloading, select New SQL Server stand-alone installation from the Installation tab.

    SQL Server Installation Center with New SQL Server stand-alone installation selected.

  7. Once installation starts, accept the license terms.

  8. Accept the default settings for each step until you reach the Database Engine Configuration section.

  9. On the Database Engine Configuration step:

    1. Select Mixed Mode under the Authentication Mode segment of the Server Configuration tab.

    2. Specify Password.1!! as the password for the SA account (Please make note of the password you entered in this step. It will be used later when updating the connection strings in the project configuration files.)

    3. Make sure your username is listed under Specify SQL Server administrators. If it is not, select Add Current User to add it.

    SQL Server 2017 Setup Database Engine Configuration screen with Mixed Mode (SQL Server authentication and Windows Authentication) selected. Add Current User button is highlighted.

    1. Select Next.
  10. Complete the installation, accepting defaults for the remaining steps.

  11. Select Close on the Complete screen and return to the SQL Server Installation Center for the next task.

Task 7: Install SQL Server Management Studio

In this task, you will download and install SQL Server Management Studio (SSMS) from the SQL Server Installation Center.

  1. In the SQL Server Installation Center, select Install SQL Server Management Tools on the Installation tab.

    SQL Server Installation Center with Install SQL Server Management Tools highlighted.

  2. This will launch a web browser window, prompting you to download the latest SQL Server Management Studio version.

  3. Select Download SQL Server Management Studio 17.x, then run the executable file.

    Download SQL Server Management Studio (SSMS) web page, with Download SQL Server Management Studio link highlighted.

  4. Once the download is complete, the Microsoft SQL Server Management Studio installation window will open. Click Install to complete the installation.

    SQL Server Management Studio installer welcome screen with Install button highlighted.

  5. Select Close when the installation is complete.

Task 8: Download the ContosoInsurance sample application

  1. On your Lab VM, open a web browser and download the sample application from https://bit.ly/2Nvn9aO.

Note: Bit.ly links are case sensitive. MS Word converts hyperlinks to all lowercase, so you should copy and paste the bit.ly link into your browser.

  1. When the download completes, unblock the zip file. Right click the file and select Properties. Check the Unblock check box. This will prevent the files within from being blocked leading to compile problems later in the lab.

The file properties dialog is depicted and the Unblock check box is checked.

  1. Extract the ZIP file to C:\ContosoInsurance.

Task 9: Attach the ContosoInsurance Database

In this task, you will attach the ContosoInsurance database to your local database instance using SSMS. This will serve as your on-premises database for the following exercises.

  1. On your Lab VM, launch SQL Server Management Studio (SSMS) from the Start menu.

  2. Connect to the local SQLEXPRESS instance using Windows Authentication.

    SQL Server Connect to Server dialog

  3. Right-click on Databases on the left-hand menu, then select Attach...

  4. In the Attach Databases dialog, select the Add... button.

    Attach Databases dialog

  5. In the file dialog, browse to C:\ContosoInsurance\Hackathon\Database, select ContosoInsurance.mdf, and select OK.

    Attach Databases dialog locate database files screen, with the database data file location field highlighted and C:\ContosoInsurance\Hackathon\Database entered into the field.

  6. Select OK on the Attach Databases dialog.

  7. You should now see the ContosoInsurance database listed underneath the Databases folder.

    ContosoInsurance database highlighted within the SSMS Object Explorer.

  8. Next, you need to create the ContosoUser account.

  9. Select the New Query button in the SSMS toolbar, and paste the following command into the query window:

    USE [master]

    GO

    CREATE LOGIN [ContosoUser] WITH PASSWORD=N'P@ss4now', DEFAULT_DATABASE=[master], DEFAULT_LANGUAGE=[us_english], CHECK_EXPIRATION=OFF, CHECK_POLICY=OFF
  1. Select the Execute button on the toolbar or hit F5.

  2. You should now see a ContosoUser listed underneath the Security Logins section of the left-hand menu.

  3. Run another query to re-associate the ContosoUser login with the existing database user:

    Use ContosoInsurance

    EXEC sp_change_users_login 'Report'

    EXEC sp_change_users_login 'Auto_Fix', 'ContosoUser'

    EXEC sp_change_users_login 'Report'

You should follow all steps provided before attending the Hands-on lab.

Hands-on Lab Guide

Microsoft Cloud Workshops

App modernization
Hands-on lab step-by-step
November 2018

Information in this document, including URL and other Internet Web site references, is subject to change without notice. Unless otherwise noted, the example companies, organizations, products, domain names, e-mail addresses, logos, people, places, and events depicted herein are fictitious, and no association with any real company, organization, product, domain name, e-mail address, logo, person, place or event is intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property.

The names of manufacturers, products, or URLs are provided for informational purposes only and Microsoft makes no representations and warranties, either expressed, implied, or statutory, regarding these manufacturers or the use of the products with any Microsoft technologies. The inclusion of a manufacturer or product does not imply endorsement of Microsoft of the manufacturer or product. Links may be provided to third party sites. Such sites are not under the control of Microsoft and Microsoft is not responsible for the contents of any linked site or any link contained in a linked site, or any changes or updates to such sites. Microsoft is not responsible for webcasting or any other form of transmission received from any linked site. Microsoft is providing these links to you only as a convenience, and the inclusion of any link does not imply endorsement of Microsoft of the site or the products contained therein.

© 2018 Microsoft Corporation. All rights reserved.

Microsoft and the trademarks listed at https://www.microsoft.com/en-us/legal/intellectualproperty/Trademarks/Usage/General.aspx are trademarks of the Microsoft group of companies. All other trademarks are property of their respective owners.

Contents

App modernization hands-on lab step-by-step

Abstract and learning objectives

In this hands-on lab, you will implement the steps to modernize legacy on-premises applications and infrastructure by leveraging cloud services, while adding a mix of web and mobile services, all secured using Azure Active Directory.

At the end of this hands-on lab, you will be better able to build solutions for modernizing legacy on-premises applications and infrastructure using cloud services, and implement a mix of web and mobile services secured by Azure Active Directory.

Overview

The App Modernization hands-on lab is an exercise that will challenge you to implement an end-to-end scenario using a supplied sample that is based on Microsoft Azure App Services and related services. The scenario will include implementing compute, storage, security, and search, using various components of Microsoft Azure. The hands-on lab can be implemented on your own, but it is highly recommended to pair up with other members at the lab to model a real-world experience and to allow each member to share their expertise for the overall solution.

Solution architecture

After lawyers affirmed that Contoso, Ltd. could legally store customer data in the cloud, Contoso created a strategy that capitalized on the capabilities of Microsoft Azure. Below is a diagram of the solution architecture you will build in the lab. Please study this carefully, so you understand the whole of the solution as you are working on the various components.

Architecture diagram of the preferred solution. Mobile and web apps connect APIs and Azure Functions Proxies, secured by Azure AD, with application secrets stored in Key Vault. Redis Cache is used to improve application performance, and data is stored in SQL Server and Azure Blob Storage. PowerApps and Flow are used to enable business users to build mobile and web (CRUD) applications. Azure API Management is used to provide an API Store experience for developers.

The solution begins with mobile apps (built for Android and iOS using Xamarin) and a website, both of which provide access to PolicyConnect. The website, hosted in a Web App, provides the user interface for browser-based clients, whereas the Xamarin Forms-based apps provide the UI to mobile devices. Both mobile app and website rely on web services hosted in an API App. In addition to the API App, a light-weight, serverless API is provided by Azure Functions Proxies to provide access to policy documents stored in Blob Storage. Azure API Management is used as a proof of concept for the future goal to create an API Store for development teams and affiliated partners. Sensitive configuration data, like connection strings, are stored in Key Vault and accessed from the API App or Web App on demand so that these settings never live in their file system. Full-text search of policy documents is enabled by the Indexer for Blob Storage (which indexes text in the Word and PDF documents) and stores the results in an Azure Search index. PowerApps enable authorized business users to build mobile and web create, read, update, delete (CRUD) applications that interact with SQL Database and Azure Storage, while Microsoft Flow enables them to orchestrations between services such as Office 365 email and services for sending mobile notifications. These orchestrations can be used independently of PowerApps or invoked by PowerApps to provide additional logic. The solution uses user and application identities maintained in Azure AD.

Requirements

  • Microsoft Azure subscription (non-Microsoft subscription).

  • Global Administrator role for Azure AD within your subscription.

  • Local machine or a virtual machine configured with (complete the day before the lab!):

    • Visual Studio Community 2017 or greater

    • Visual Studio 2017 workloads for:

      • Azure development

      • Mobile development with .NET

    • SQL Server 2017 Express or greater

    • SQL Server Management Studio (SSMS)

    • PowerShell 1.1.0 or higher

Exercise 1: Migrate the database to Azure SQL Database

Duration: 15 minutes

Contoso Insurance has asked you to migrate their on-premises SQL database to Azure SQL Database. In this exercise, you will provision a new SQL Server in Azure, configure the firewall for that SQL Server, and then use SSMS to migrate the Contoso Insurance database from on-premises to Azure SQL Database.

Task 1: Provision a SQL Server

In this task, you will create a SQL Server (logical server). You will not create the databases at this time since it will be created during the database migration step.

  1. In a web browser, navigate to the Azure portal (http://portal.azure.com).

  2. Select +Create a resource, enter SQL Server into the Search the Marketplace box and select SQL Server (logical server) from the results.

    Azure portal with +Create a resource highlighted, and SQL Server entered into the filter box. SQL Server (logical server) is highlighted in the search results.

  3. Select Create on the SQL server (logical server) blade.

  4. On the SQL Server (logical server on...) blade, specify the following configuration:

    1. Server name: Enter a unique value, such as contoso-insurance-SUFFIX (ensure the green checkmark appears).

    2. Server admin login: demouser

    3. Password: Password.1!!

    4. Resource group: Select the hands-on-lab-SUFFIX resource group.

    5. Location: Select the same location you used for the hands-on-lab-SUFFIX resource group.

    SQL Server (logical server) blade with values specified above entered into the appropriate fields.

  5. Select Create.

Task 2: Configure SQL Server firewall

In this task, you will create a firewall rule to allow access to your SQL Server.

  1. After the SQL Server finishes provisioning, navigate to it by select Resource groups from the left-hand menu in the Azure portal, then enter your resource group name into the filter box, and select it from the list.

    In the Azure Portal, Resource groups pane, hands-on is typed in the search field, and under Name, hands-on-labs is circled.

  2. Select your SQL Server from the resources in the group.

    List of resources in the hands-on-lab resource group, with the contoso-insurance SQL Server resource highlighted.

  3. On the SQL Server blade, select Firewalls and virtual networks under Security.

  4. On the Firewalls and virtual networks blade, specify a new rule named ALL, with START IP 0.0.0.0, and END IP 255.255.255.255, then select Save.

    SQL Server firewalls and virtual networks dialog with a new rule named ALL entered, with an IP range from 0.0.0.0 - 255.255.255.255. The Save button is highlighted.

    Note: Adding all IP address ranges as shown here is done for simplicity's sake for this hands-on lab and is not recommended in other cases. The correct approach is to add only the necessary IPs and consider limiting access to Azure SQL through AAD ( https://docs.microsoft.com/en-us/azure/sql-database/sql-database-aad-authentication).

  5. On the Success dialog box, select OK.

Task 3: Migrate the on-premises SQL database to Azure

In this task, you will migrate the Contoso Insurance database from on-premises (Lab VM) into Azure SQL Database.

  1. On your Lab VM, open SSMS from the Start menu.

  2. Connect to your local SQL Express instance, as you did previously, and expand the Databases node in the Object Explorer.

  3. Right-click the Contoso Insurance database and select Tasks Deploy Database to Microsoft Azure SQL Database.

    Deploy Database to Azure SQL Database is selected from the Tasks menu on the ContosoInsurance database in the SSMS Object Explorer.

  4. In the Deploy Database 'ContosoInsurance' dialog, select Next to begin.

  5. On the Deployment Settings tab, select Connect next to Server Connection.

    Screenshot of the Deployment Settings screen in the Deploy Database dialog, with the Connect button highlighted next to Server Connection.

  6. In the Connect to Server dialog, enter the server name of the Azure SQL server you created previously. You can find this by navigating to your SQL Server in the Azure portal and selecting Properties.

    Properties blade of the SQL Server in Azure with the server name highlighted.

  7. Next, set Authentication to SQL Server Authentication and enter the following credentials:

    1. Login: demouser

    2. Password: Password.1!!

  8. Check Remember password.

  9. Select Connect.

    SQL Server Connect to Server dialog with the SQL Server server name from Azure entered into the Server name box, SQL Server Authentication selected, and the demouser credentials entered.

  10. You should now see the Azure SQL server name in the Server connection box. Verify the new database name is ContosoInsurance and select Next.

    Deployment Settings screen of the Deploy Database dialog, with ContosoInsurance entered in the New database name field.

  11. Verify the settings are correct and select Finish.

  12. When the operation has completed, close the database deployment dialog. You should see green checkmarks next to each completed step, along with a large checkmark next to Operation Complete.

    Deploy Database results screen.

Note: If you receive an error during the import stage like the following, you need to make sure you are using the latest version of SQL Server Management Studio. This error can be caused by newer Azure SQL compatibility levels not being supported by older versions of SSMS, or if you did not set your SQL Server firewall settings:

"Unable to connect to master or target server 'ContosoInsurance'. You must have a user with the same password in master or target server 'ContosoInsurance'."

  1. You can verify that the database is operational, and its tables populated by connecting to it through SSMS, using the same credentials used in Step 7 above.

Exercise 2: Provision App Services

Duration: 15 minutes

Contoso Insurance has asked you to provision resources in Azure for hosting their web and API applications. In this exercise you will create a Web App and an API App in Azure.

Task 1: Create a Web App

In this task, you will provision a Web App and API App for hosting the Contoso Insurance applications in Azure.

  1. In the Azure portal (http://portal.azure.com), create a new Web App by selecting +Create a resource, enter "web app" in the Marketplace search box, and selecting the Web App item in the results.

    Azure portal +Create a resource is selected, with web app entered into the filter box, and Web App selected from the search results.

  2. Select Create on the Web App blade.

  3. On the Web App Create blade, specify the following configuration:

    1. App name: Enter a unique and valid URL, such as contosoinsuranceSUFFIX (until the green check mark appears) in the App Name field.

    2. Subscription: Select the subscription you are using for this hands-on lab.

    3. Resource group: Select Use existing, and select the hands-on-lab-SUFFIX resource group.

    4. Select App Service plan/Location.

    5. On the App Service plan blade, select Create new.

    6. On the New App Service Plan blade, enter the following:

    • App Service plan: Enter a unique name, such as contosoinsuranceSUFFIX.

    • Location: Select the location you are using for this hands-on lab.

    • Pricing tier: Select S1 Standard.

    +Create new selected on the App Service Plan blade.

    • Select OK.
  4. Select Create to provision the new Web App.

    Web App Create blade with the values specified above entered into the appropriate fields.

Task 2: Provision an API App

  1. In the Azure portal (http://portal.azure.com), select +Create a resource, enter "api app" in the Marketplace Search box, and select API App from the results.

    Azure portal +Create a resource is selected, with api app entered into the filter box, and API App selected from the search results.

  2. Select Create on the API App blade.

  3. On the API App Create blade, enter the following:

    1. App name: Enter a unique name, such as contosoinsuranceapiSUFFIX.

    2. Subscription: Select the subscription you are using for this hands-on lab.

    3. Resource group: Choose Use existing, and select the hands-on-lab-SUFFIX resource group.

    4. App Service plan/Location: Select the contosoinsuranceSUFFIX plan you created for the Web App.

    API App Create blade with the values specified above entered into the appropriate fields.

  4. Select Create.

Exercise 3: Identity and security

Duration: 45 minutes

Azure Active Directory (Azure AD) will be used to allow users to authenticate to the web app, PolicyConnect desktop app, mobile apps, and PowerApps solutions. Azure AD will also be used to manage application access to Key Vault secrets. You have been asked to create a new Azure AD Tenant and secure the application so only users from the tenant can log on.

Note: Tasks 1 and 2 require global admin permissions on the Azure AD Tenant and cannot be completed if you use Microsoft's Azure AD tenant. Task 3 requires the permission to create an app in the Azure AD tenant.

Task 1: Create a new Contoso user

In this task, you will create an Azure AD user account that will be used for authenticating against the web and mobile apps.

Note: This task is valid only if you are a global administrator on the Azure AD tenant associated with your subscription.

  1. In the Azure Portal, select Azure Active Directory from the left-hand menu.

    Azure Active Directory menu item selected in the Azure navigation menu.

  2. Ensure the correct Azure AD tenant is selected. You must be a Global Administrator for the selected tenant to complete the exercise. If you need to change it, select Switch directory.

    The Switch directory button is highlighted.

  3. Under Manage, select Users, All Users, then select +New User.

    In Azure AD, Users -> All users is selected, and +New user is highlighted.

  4. On the User blade, enter the following:

    1. Name: Contoso User

    2. User name: contosouser@[YOUR-TENANT].onmicrosoft.com (Note this full user name for later use.)

    3. Profile: On the profile blade, enter:

      1. First name: Contoso

      2. Last name: User

      3. Select OK

    4. Check the Show Password box and select the Click to copy button to copy the password.

    5. Paste the password into a text editor, such as Notepad.exe, for later use.

    6. Select Create.

    On the Azure AD new user blade, the values specified above are entered into the appropriate fields.

Task 2: Register the Web API application

  1. Open Azure Active Directory from the left-hand menu in the Azure portal, select App registrations, and select +New application registration.

    Azure AD App registrations blade, with +New application registration selected.

  2. In the Create blade, enter the following:

    1. Name: Contoso Insurance Web API.

    2. Application type: Select Web app / API.

    3. Sign-on URL: https://[YOUR-WEB-API-NAME].azurewebsites.net (You can retrieve this value from your API App's blade.)

    Create App registration blade with the values above entered into the appropriate fields.

    1. Select Create.
  3. On the Contoso Insurance Web API Registered app blade, select Settings, then select Keys on the Settings blade.

Web API registered app settings blade, with Keys selected.

  1. On the Keys blade, create a new key by enter the following:

    1. Key description: Enter apikey.

    2. Duration: Select In 1 year.

    3. Select Save.

    Keys blade, with a new key named apikey and expires set to In 1 year. The Save button is highlighted.

  2. Don't miss this step! After saving, the value of the key will be displayed. Copy this value and paste it into a text editor for later reference.

    The generated key is highlighted.

  3. Close the Keys blade.

  4. Back on the Settings blade, select Reply URLs, and copy the reply URL for later use.

    The registered app Settings blade is displayed withh Reply URLs selected, and the Reply URL highlighted.

  5. Close the Reply URLs blade.

  6. On the Settings blade, select Properties, and copy the Application ID and App ID URI values and paste them into a text edit for later reference.

    The registered app settings blade with Properties selected, and the Application ID and App ID URI highlighted.

  7. Bonus: On the Properties blade, select the browse button next to Upload new logo. Browse to the C:\ContosoInsurance\Hackathon\Graphics folder and select the file names CI-Icon-215x215.png. You will now have the Contoso Insurance Logo associated with the API App!

    Upload dialog for the Contoso Insurance logo

  8. Select Save on the Properties blade.

Task 3: Expose Web API to other applications

To make the Web API accessible to other applications added to Azure AD, you must define the appropriate permissions. You will modify the manifest for the Web API to configure these settings, since, as of now, the Azure portal does not provide an interface for this.

  1. Within the Azure Active Directory blade, select App registrations, and select your Web API application.

    Azure AD App registrations list with the Contoso Insurance Web API highlighted.

  2. On the Contoso Insurance Web API blade, select Manifest.

    Registered app blade with the Manifest button highlighted.

  3. On the Edit manifest blade, locate the oauth2AllowImplicitFlow setting, and change its value to true. This will allow JavaScript calls to the Web API from the web application.

    The edit manifest blade is displayed, with

  4. Next, locate the oauth2Permissions setting. This setting will be populated with a value.

    The oauth2Permissions node is displayed from the manifest JSON document.,

    Copy the id property as you will need it at the end of this step.

  5. You are going modify the permission in this array. (Copy the text below and paste it over the top of the existing permission):

    {
        "adminConsentDescription": "Allow read-write access to the Contoso Insurance Web API on behalf of the signed-in user",
        "adminConsentDisplayName": "Read-Write access to Contoso Insurance Web API",
        "id": "<REPLACE-WITH-THE-ID-YOU-COPIED>",
        "isEnabled": true,
        "type": "User",
        "userConsentDescription": "Allow read-write access to the Contoso Insurance Web API on your behalf",
        "userConsentDisplayName": "Read-Write access to Contoso Insurance Web API",
        "value": "Read_Write_ContosoInsurance_WebAPI"
    }
    
    
  6. Paste the id value you set aside into the id property.

  7. The result should look like this:

    The oauth2AllowImplicitFlow node and a new node under oauth2Permissions node are highlighted in the manifest JSON document.

  8. Select Save to commit the changes.

    The Save button for the manifest is selected.

Task 4: Register the Desktop (WinForms) application

  1. Open Azure Active Directory from the left-hand menu in the Azure portal, select App registrations, and select +New application registration.

    Azure AD App registrations blade with the +New application registrations button selected.

  2. On the Create blade, enter the following:

    1. Name: Contoso Insurance Desktop

    2. Application type: Select Native

    3. Redirect URI: http://contosoinsurance.desktop.client (It does not matter if this path is exact. What is important is that the URI for each application is valid and unique for every application in your directory. The Redirect URI is used to identify your app).

    Create app registration blade with the values above entered into the appropriate fields.

    1. Select Create.
  3. On the Contoso Insurance Desktop Registered app blade, select Settings, then select Redirect URIs, and copy the redirect URI into a text editor for later use.

    The registered app Settings blade is displayed withh Redirect URLs selected, and the Redirect URL highlighted.

  4. Close the Redirect URIs blade.

  5. Back on the Settings blade, select Required Permissions, then select +Add.

    The Registered App Settings blade is displayed, with Required permissions selected, and +Add highlighted on the Required permissions blade.

  6. On the Add API access blade, select Select an API, enter "contoso" into the search box, and select Contoso Insurance Web API from the list of available APIs.

    The registered app Add API access Select an API blade is displayed, and the Contoso Insurance Web API is selected.

  7. Select Select.

  8. On the Enable Access blade, check "Read-write access to Contoso Insurance Web API" and select Select.

    Select permissions is selected, and Read-Write access is selected on the Enable Access blade.

  9. Select Done on the Add API access blade and close the Required permission blade.

  10. Back on the Settings blade, select Properties, copy the Application ID value and paste it into a text editor for later reference.

    Properties is selected on the Settings blade, and the Application ID is highlighted on the Properties blade.

  11. Bonus: On the Properties blade, select the browse button next to Upload new logo. Browse to the C:\ContosoInsurance\Hackathon\Graphics folder and select the file names CI-Icon-215x215.png. You will now have the Contoso Insurance Logo associated with the Desktop App!

    Upload dialog for the Contoso Insurance logo

  12. Select Save.

Task 5: Register the mobile application

  1. Open Azure Active Directory from the left-hand menu in the Azure portal, select App registrations, and select +New application registration.

    Azure AD App registrations blade with the +New application registrations button selected.

  2. On the Create blade, enter the following:

    1. Name: Contoso Insurance Mobile

    2. Application type: Select Native.

    3. Redirect URL: http://contosoinsurance.mobile.client (It does not matter if this path is exact. What is important is that the URI for each application is valid and unique for every application in your directory. The Redirect URI is used to identify your app.)

    Create app registration blade with the values above entered into the appropriate fields.

    1. Select Create.
  3. On the Contoso Insurance Mobile Registered app blade, select Settings, then select Redirect URIs, and copy the redirect URI into a text editor for later reference.

    The registered app Settings blade is displayed withh Redirect URLs selected, and the Redirect URL highlighted.

  4. Close the Redirect URIs blade.

  5. Back on the Settings blade, select Required Permissions, then select +Add.

    The Registered App Settings blade is displayed, with Required permissions selected, and +Add highlighted on the Required permissions blade.

  6. On the Add API access blade, select Select an API, enter "contoso" into the search box, and select Contoso Insurance Web API from the list of available APIs.

    The registered app Add API access Select an API blade is displayed, and the Contoso Insurance Web API is selected.

  7. Select Select.

  8. On the Enable Access blade, check "Read-write access to Contoso Insurance Web API" and select Select. Select permissions is selected, and Read-Write access is selected on the Enable Access blade.

  9. Select Done on the Add API access blade and close the Required permission blade.

  10. Back in the Settings blade, select Properties, copy the Application ID value and paste it into a text editor for later reference.

    Properties is selected on the Settings blade, and the Application ID is highlighted on the Properties blade.

  11. Bonus: On the Properties blade, select the browse button next to Upload new logo. Browse to the C:\ContosoInsurance\Hackathon\Graphics folder and select the file names CI-Icon-215x215.png. You will now have the Contoso Insurance Logo associated with the Mobile App!

    Upload dialog for the Contoso Insurance logo

  12. Select Save.

Task 6: Configure access control for the PolicyConnect web application

  1. In the Azure Portal, navigate to your web app by selecting Resource groups from the Azure navigation menu, selecting the hands-on-lab-SUFFIX resource group, and then selecting your Web app from the list of available resources.

    Resource groups is highlighted in the Azure navigation menu. The hands-on-lab-SUFFIX resource group is selected, and the Contoso Insurance Web App resource is selected.

  2. Select the Authentication / Authorization tile underneath the list of settings.

  3. On the Authentication / Authorization blade:

    1. App Service Authentication: Select On.

    2. Action to take when request is not authorized: Select Log in with Azure Active Directory.

    3. Authentication Providers: Select Azure Active Directory, then on the Azure Active Directory Settings blade set the Management mode to Express, and select OK.

    App Service Authentication/Authorization blade with App Service Authentication turned On, and Log in with Azure Active Directory selected. Azure Active Directory is Configured in Express Mode.

    1. Select Save.

Task 7: Grant the ContosoInsurance Web app permissions to the Web API app

  1. Open Azure Active Directory from the left-hand menu in the Azure portal, select App registrations, and select your web application, which was automatically added to Azure AD in the previous task. (You may need to select View all applications to see the list of applications).

    Azure AD is selected in the Azure navigation menu, with the App registrations menu item selected, and the contosoinsuranceSUFFIX Web App selected in the list of registered apps.

  2. In the Web App blade, select Manifest. Registered app blade with the Manifest button highlighted.

  3. In the Edit manifest blade, look for the oauth2AllowImplicitFlow setting, and set the value to true. This is required for our JavaScript Web API service calls from the web application.

  4. Select Save and close the Edit manifest blade.

  5. Back in the Web App blade, select Settings, then select Reply URLs.

    The registered app Settings blade is displayed withh Reply URLs selected, and the Reply URL highlighted.

  6. On the Reply URLs blade, two new reply URLs need to be added for our application to work correctly:

    1. Enter: https://[YOUR-WEB-APP-NAME].azurewebsites.net/

    2. Enter: https://[YOUR-WEB-APP-NAME].azurewebsites.net/static

    3. OPTIONAL: If you intend to debug the web app locally from within Visual Studio, you will need to add the localhost path (http://localhost:10421/static) to the list of Reply URLs as well. Otherwise, your AAD auth to the Web API will fail.

    Reply URLs blade with the Reply URLs specified above entered and highlighted.

    1. Select Save.
  7. Close the Reply URLs blade.

  8. Back in the Settings blade, select Required permissions, then select +Add.

    The Registered App Settings blade is displayed, with Required permissions selected, and +Add highlighted on the Required permissions blade.

  9. On the Add API access blade, select Select an API, enter "contoso" in the search box, select the Contoso Insurance Web API from the list of APIs, and select Select.

    The registered app Add API access Select an API blade is displayed, and the Contoso Insurance Web API is selected.

  10. On the Enable Access blade, check "Read-write access to Contoso Insurance Web API" and select Select.

    Select permissions is selected, and Read-Write access is selected on the Enable Access blade.

  11. Select Done on the Add API access blade.

  12. Back on the Settings blade, select Properties, copy the Application ID and App ID URI values, and paste them into a text editor for later reference.

Properties is selected on the Settings blade, and the Application ID and API ID URI are highlighted on the Properties blade.

  1. Bonus: On the Properties blade, select the browse button next to Upload new logo. Browse to the C:\ContosoInsurance\Hackathon\Graphics folder and select the file names CI-Icon-215x215.png. You will now have the Contoso Insurance Logo associated with the Mobile App!

    Upload dialog for the Contoso Insurance logo

  2. Select Save.

Exercise 4: Upload PDFs to blob storage

Duration: 15 minutes

Contoso Insurance is currently storing all of their scanned PDF documents on a local network share. They have asked to be able to store them in the cloud automatically from a workflow. In this exercise, you will provision a storage account that will be used to store the files in a blob container. Then, you will provide a way to bulk upload their existing PDFs.

Task 1: Provision a storage account

  1. In the Azure Portal, select +Create a resource, enter "storage account" into the Search the Marketplace box, and select Storage account -- blob, file, table, queue from the results.

    Azure portal +Create a resource is selected, with storage account entered into the filter box, and Storage account - blob, file, table, queue selected from the search results.

  2. Select Create on the Storage account blade.

  3. On the Create storage account blade, enter the following:

    1. Name: Enter a unique value, such as contosoinsuranceSUFFIX (ensure the green check mark appears).

    2. Deployment model: Select Resource manager.

    3. Account kind: Select Storage (general purpose v1).

    4. Location: Select the same region as the resource group.

    5. Replication: Select Locally-redundant storage (LRS).

    6. Performance: Select Standard.

    7. Secure transfer required: Select Disabled.

    8. Subscription: Select the subscription you are using for this hands-on lab.

    9. Resource group: Choose Use existing, and select the hands-on-lab-SUFFIX resource group.

    The Basic tab within the create storage account blade is displayed with the values above entered into the appropriate fields.

  4. Select Review + create.

  5. After validation is successful, select Create.

  6. After the storage account has completed provisioning, open the storage account by opening your hands-on-lab-SUFFIX resource group, and then selecting the storage account name.

    Resource groups is selected in the Azure navigation menu, and the contosoinsurancestorage account resource is selected.

  7. On the Storage account blade, select Access Keys, under Settings in the left-hand menu.

    Access keys is highlighted under Settings

  8. On the Access keys blade, copy the key1 Key value by selecting the Click to copy button for key1 (NOT the connection string).

    The key1 Key is highlighted.

  9. Paste the value into a text editor, such as Notepad, for later reference.

Task 2: Create container for storing PDFs in Azure storage

In this task, you will create a new container in your storage account for the scanned PDF policy documents.

  1. In the Azure Portal, navigate to your newly provisioned storage account within the hands-on-labs-SUFFIX resource group, then from the storage account Overview blade, select Blobs under services.

    Blobs is selected on the Overview blade of the Storage account.

  2. On the Blob service blade, select +Container to create a new container.

  3. In the New container dialog, enter "policies" as the container name, and set the Public access level to Container. (This is for demo purposes, otherwise, you should set this to Private.) Select OK.

    The New container dialog is displayed with a name of

  4. After the container has been created, select its name on the Blob service blade, select Properties, and copy the URL from the policies -- Properties blade, and paste it into a text editor for later reference.

    The policies container is selected, with the Properties blade selected, and the URL of the storage container highlighted.

Task 3: Bulk upload PDFs to blob storage using AzCopy

In this task, you will download and install AzCopy. You will then use AzCopy to copy the PDF files from the "on-premises" location into the policies container in Azure storage.

  1. Download the latest version of AzCopy from http://aka.ms/downloadazcopy.

  2. Run the installer, accepting all the defaults to complete the AzCopy install.

  3. Launch a Command Prompt window (Select search on the task bar, type cmd, and select Enter).

  4. Browse to the AzCopy directory. By default, it is installed to %ProgramFiles(x86)%\Microsoft SDKs\Azure\AzCopy (If you are on a 32-bit machine, change ProgramFiles(x86) to ProgramFiles ).

  5. Type the following command at the command prompt, replacing the tokenized values with your own:

    AzCopy /Source:[FILE-SOURCE] /Dest:[STORAGE-ACCOUNT-URL] /DestKey:[STORAGE-ACCOUNT-KEY] /S
    
  6. The values in the above command should be replaced as follows:

    1. FILE-SOURCE: This is the path to the Files folder in your sample project directory, such as C:\ContosoInsurance\Hackathon\Files.

    2. STORAGE-ACCOUNT-URL: This is the URL to your storage account's policies container, which you copied in the last step of the previous task. (e.g., https://contosoinsurancekb.blob.core.windows.net/policies)

    3. STORAGE-ACCOUNT-KEY: This is the blob storage account key you copied in after provisioning the storage account in Task 1 of this exercise. (e.g., 1z5Jd0+JbffwmEBEWuEUPjStI0iT3EzlKaoj2DZVhL/w9F60ezcos6gZYtXqUmJRPLhpvDLP8TuDNMGVW1/4YQ==)

  7. The final command should resemble the following:

    AzCopy /Source:C:\ContosoInsurance\Hackathon\Files /Dest:https://contosoinsurancekb.blob.core.windows.net/policies /DestKey:1z5Jd0+JbffwmEBEWuEUPjStI0iT3EzlKaoj2DZVhL/w9F60ezcos6gZYtXqUmJRPLhpvDLP8TuDNMGVW1/4YQ== /S
    
  8. The output of the command should look like the following:

    The output of the AzCopy command is displayed.

Exercise 5: Create serverless API for accessing PDFs

Duration: 15 minutes

Contoso Insurance has made some updates to prepare their applications, but there are some features that they have not been able to build into the API yet. They have requested that you assist them in setting up a proof-of-concept (POC) API solution to enable users of their application to retrieve their policy documents directly from their Azure Storage account. In this exercise, you will create a Function App, and an Azure Functions Proxy to enable this functionality using serverless technologies.

Task 1: Provision a Function App

  1. In the Azure portal, select +Create a resource, enter "function" into the search box, select Function App in the results, and select Create.

    Azure portal +Create a resource is selected, with function entered into the filter box, and Function App selected from the search results.

  2. On the Function App Create blade, enter the following:

    1. App name: Enter a unique name, such as contosoinsurancedocsSUFFIX.

    2. Subscription: Select the subscription you are using for this hands-on lab.

    3. Resource group: Choose Use existing and select the hands-on-lab-SUFFIX resource group.

    4. OS: Select Windows.

    5. Hosting Plan: Select Consumption Plan.

    6. Location: Select the location you are using for resources in this hands-on lab.

    7. Runtime Stack: Leave this set to .NET.

    8. Storage: Choose Use existing and select the storage account (contosoinsuranceSUFFIX) you created for this hands-on lab.

    9. Application Insights: Select Off.

    The Create Function App blade is displayed with the values specified above entered into the appropriate fields.

  3. Select Create.

Task 2: Retrieve URL for policy documents in Azure storage

In this task, you will retrieve the URL associated with the PDF policy documents you uploaded into Azure storage in the previous exercise.

  1. Navigate to your storage account in the Azure portal and select the policies container under Blobs.

  2. On the Overview page of the policies blade, select the first PDF document in the list.

    The policies storage container Overview blade is displayed, with the first blob selected from the list.

  3. On the blade for the select blob, select the Click to copy button next to the URL to copy the URL for the blob, and paste it into a text editor for use in the next task.

    The URL of the selected blob is highlighted on its properties page.

Task 3: Create an Azure Functions Proxy

In this task, you will create an Azure Function Proxy, which is a simple way to provide a clean API endpoint. To learn more, check out Working with Azure Functions Proxies.

  1. Navigate to your Function App in the Azure portal.

  2. On the Function Apps blade, select + next to Proxies under the contosoinsurancedocsSUFFIX Function App.

  3. In the New proxy form, enter the following values:

    1. Name: PolicyDocs

    2. Route template: Enter "/"

    3. Allowed HTTP methods: Select Selected Methods and check GET.

    4. Backend URL: Paste the policy document URL you copied in the previous task.

    The + (Add) button is highlighted next to Proxies on the Function Apps blade. On the New proxy blade, the name is set to

  4. Select Create.

  5. When it is done creating the Proxy, copy the Proxy URL, and paste it into a new browser tab or window.

    The Proxy URL for the PolicyDocs Proxy is highlighted.

  6. This will result in the policy document being downloaded. You can open the downloaded file and inspect the policy document.

Task 4: Parameterize Azure Functions Proxy

In the previous task, you created an Azure Functions Proxy to download a specific policy document from Azure storage. In this task, you will update the Proxy to parameterize the URL, so you can retrieve any policy document using the policy holder's last name and their policy number.

  1. Return to the PolicyDocs Proxy in your Function App in the Azure portal.

  2. Update the Route template and Backend URL fields with the following values:

    1. Route template: Change to "//".

    2. Backend URL: Change to "https://<YOUR-STORAGE-ACCOUNT-NAME>.blob.core.windows.net/policies/-.pdf.

    3. Select Save.

    The Save button is highlighted. On the Proxy blade, the route template is set to

  3. Copy the new Proxy URL and paste it into a new browser tab or window, replacing the parameters in the URL with a policy holder's last name and policy number. For example:

  4. You can try this out with other policy holder names and numbers.

  5. The Azure Functions Proxy is now ready for use within the Contoso Insurance applications.

Exercise 6: Create an Azure Search service

Duration: 15 minutes

Contoso Insurance has asked for full-text searching on the documents. In this exercise, you will provision an Azure Search service, then configure search indexing on the policies blob storage container.

Task 1: Create an Azure search service

  1. In the Azure portal, select +Create a resource, enter "azure search" into the search box, select Azure Search from the results and select Create.

    Azure portal +Create a resource is selected, with azure search entered into the filter box, and Azure Search selected from the search results.

  2. On the New Search Service blade, enter the following:

    1. URL: Enter a unique value, such as contosoinsurancesearchSUFFIX.

    2. Subscription: Select the subscription you are using for this hands-on lab.

    3. Resource group: Select the hands-on-lab-SUFFIX resource group.

    4. Location: Select the location you are using for resources in this hands-on lab.

    5. Pricing tier: Select Standard.

    On the New Search Service blade the values specified above are entered into the appropriate fields.

  3. Select Create.

Task 2: Configure full-text search indexing

  1. Navigate to the newly created search service, and select Import data.

    On the Search service blade, Import data is highlighted.

  2. On the Import data blade, select Connect to your data, then in the Data Source blade select Azure Blob Storage.

    On the Import data -> Data source blade, Azure Blob Storage is selected.

  3. On the New data source blade, enter a unique, lowercased name, such as scanned-policies, then select Select an account and container.

    On the New data source blade, the values specified above are entered into the appropriate fields.

  4. Under Storage accounts, select the storage account you created earlier, then select the policies container on the Containers blade and select Select.

    On the Storage accounts blade, the policies container is selected.

  5. Select OK on the New data source blade.

  6. Now, select Index Customize target index on the Import data blade.

  7. On the Index blade, you will be presented with a result of the sampling process, which shows many of our metadata fields, and the suggested indexes. The blob indexer can crack open your documents and extract all text into the content field as well.

  8. On the Index blade, enter in a name for the index, such as policies. Select metadata_storage_path for the Key, if not already selected, then set the following fields as Retrievable, Filterable, and Searchable.

    On the Import data -> Index blade, an Index name of policies has been entered, and multiple items have been checked in the search fields.

  9. Select OK.

  10. On the Create an Indexer blade, enter the following:

    1. Name: policy-indexer

    2. Schedule: Select Custom.

    • Interval (minutes): 5

    • Start time (UTC)

      • Set the date to today's date.

      • Set the start time to 12:00:00 AM.

    1. Select OK.

    On the Import data -> Indexer blade has a name of policy-indexer entered, with the schedule set to customer and a start date of today and time of 12:00:00 AM.

  11. Select OK on the Import data blade.

  12. After a few minutes, you should see a document count matching the number of PDFs next to the policies index you created, on the Search service home screen. Select this index.

    The list of search service indexes is displayed, with policies highlighted.

  13. Select the Edit CORS options menu item.

    The Edit CORS Options button on the policies index page is selected.

  14. Select the Allowed origin type to All, then select Save. This will allow external applications to perform searches against the index. When running in production, it is strongly recommended to select Custom and manually specify allowed sources by URL.

    On the CORS blade, All has been selected.

  15. Back on the Search service blade, verify that your policies index has a Document Count of 650. If it is still 0, you may need to manually start the indexer.

    1. You can manually trigger the indexer by selecting Indexers on the Search service blade.

    On the Search service blade, the Indexers tile is highlighthed.

    1. Next, select the policy-indexer on the Indexers blade, then select Run on the policy-indexer blade.

    The policy-indexer is highlighted, and the Run button is selected.

    1. It will take a few minutes for the indexer to run against the documents.
  16. On the Search service blade, select Search explorer on the top menu.

    On the Search service blade, the Search explorer button is selected, and the policies index document count of 650 is highlighted.

  17. In the Query string field within the Search explorer, type in the following policy number: DOW586IJCG493F, then select Search. You should see a single search result for a PDF file containing the policy number within its content. A successful result indicates that the index is working as expected.

    On the Search explorer blade, DOW586UCG493F is entered into the Query string box, and that policy number is highlighted in the Results.

  18. While in the Search explorer, copy the Request URL and save it for later.

    The Click to copy button next to Request URL on the Search explorer blade is highlighted.

  19. Go back to the main search service page, select Keys on the left-hand menu pane, then select Manage query keys.

    On the Search service blade, Keys is selected, and Manage query keys is highlighted.

  20. On the Manage query keys blade, copy the Key value and paste it into a text editor for later reference.

    The Key is highlighted on the Manage query keys blade.

Exercise 7: Configure Key Vault

Duration: 15 minutes

Key Vault will be used to protect sensitive information, such as database connection strings and storage account keys. The application services that you have registered within Azure Active Directory will be granted access to the Key Vault secrets you create in this section. You will use secrets instead of keys, due to the small size of the strings being stored, as well as how often you need to retrieve the values. Retrieving secrets from Key Vault is a lower latency operation than retrieving keys, due to the real-time encryption and decryption involved.

Task 1: Create a new Key Vault

  1. In the Azure portal, select +Create a resource, enter "key vault" in the search box, select Key Vault from the search results, and select Create.

    Azure portal +Create a resource is selected, with key vault entered into the filter box, and Key Vault selected from the search results.

  2. On the Create key vault blade, enter the following:

    1. Name: Enter a unique name, such as ContosoInsKeyVaultSUFFIX.

    2. Subscription: Select the subscription you are using for this hands-on lab.

    3. Resource group: Choose Use existing and select the hands-on-lab-SUFFIX resource group.

    4. Location: Select the location you are using for resources in this hands-on lab.

    5. Pricing tier: Select Standard.

    6. Access policies: Leave set to the default value (1 principal selected).

    On the Create key vault blade, the values specified above are entered into the appropriate fields.

  3. Select Create.

Task 2: Create a new secret to store the SQL connection string

  1. Now, you will add a secret to the Key Vault containing the connection string for the Contoso Insurance database in Azure SQL.

  2. First, retrieve the connection string for your SQL database by navigating to the database in the Azure portal.

  3. On the Overview blade for your SQL database, select Show database connection strings.

    On the ContosoInsurance SQL database blade, the Show database connection string link is highlighted.

  4. Copy the ADO.NET connection string and paste it into a text editor. This is necessary because you will need to insert your database username and password into the string before adding it as a secret in Key Vault.

    The ADO.NET connection string is highlighted on the Connections string blade for the SQL database.

  5. In the text editor, replace the tokenized username and password values with the following:

    1. {your_username}: demouser

    2. {your_password}: Password.1!!

  6. Your connection string should now resemble the following:

    Server=tcp:contoso-insurance.database.windows.net,1433;Initial Catalog=ContosoInsurance;Persist Security Info=False;User ID=demouser;Password=Password.1!!;MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;
    
  7. Copy your completed connection string from the text editor.

  8. Next, navigate to your new Key Vault, by selecting it from the list of resources in the hands-on-lab-SUFFIX resource group.

  9. On the Key Vault blade, select Secrets under Settings in the left-hand menu, then select +Generate/Import.

    On the Key Vault blade, Secrets is selected and the +Generate/Import button is highlighted.

  10. On the Create a secret blade, enter the following:

    1. Upload options: Select Manual.

    2. Name: SqlConnectionString

    3. Value: Paste your SQL connection string.

    On the Create a secret blade, the values specified above are entered into the appropriate fields.

  11. Select Create.

  12. When the secret has been created successfully, select it from the list of secrets on the Secrets blade.

    The SqlConnectionString is highlighted on the Key Vault Secrets blade.

  13. On the SqlConnectionString secret blade, select the Current Version, copy the Secret Identifier from the Secret Version blade, and paste it into a text editor for later reference.

    On the Secret version blade for the SqlConnectionString secret, the Secret identifier is highlighted.

  14. The Secret Identifier will look like:

https://contosoinsurancekeyvault.vault.azure.net/secrets/SqlConnectionString/67a86f635a5541feb88ce11d67a4cf04

  1. This is the version specific identifier. You can omit the version number to always obtain the latest version of the secret. For example:

https://contosoinsurancekeyvault.vault.azure.net/secrets/SqlConnectionString/

Task 3: Grant access to the secret to the Web API application

In this task you will add the required permissions to allow the Web API application to read the SqlConnectionString secret from your Key Vault.

  1. You need to grant the Web API application access to the secret you just created. To accomplish this, select Access policies on the Key Vault blade, then select +Add New.

    On the Key Vault blade, Access policies is selectd, and +Add new is highlighted.

  2. On the Add access policy blade, configure the following:

    1. Select principal: Enter "Contoso Insurance Web API" into the Select box, select the app from the list of results, and select Select

    2. Secret permissions: Select Get and List in the drop down

    On the Add access policy blade, Contoso Insurance Web API is selected as a Principal, and the Get and List Secret permissions are selected.

  3. Select OK.

  4. Select Save on the Access policies blade.

    On the Access Policies blade, Save is highlighted.

Exercise 8: Configure and deploy the Contoso Insurance Web API

Duration: 10 minutes

The developers at Contoso Insurance have been working toward migrating their apps to the cloud. As such, most of the pieces are already in place to deploy the apps to Azure, as well as configure them to communicate with the new app services, such as Web API. Since the required services have already been provisioned in, what remains is applying application-level configuration settings, and then deploying any hosted apps and services from the Visual Studio starter project solution. In this task, you will apply application settings to the Web API using the Azure Portal. Once the application settings have been set, you will deploy the Web API from the Visual Studio.

Task 1: Add Application Settings to the API App

In this task, you will add the application settings to the API App for the Web API in the Azure portal.

  1. On your Lab VM, launch the sample app solution with Visual Studio 2017 Community edition by double-clicking the solution file at C:\ContosoInsurance\Hackathon\Contoso.Apps.Insurance.Data\Contoso.Apps.Insurance.Data.sln.

    The Contoso.Apps.Insurance.Data Visual Studio solution file is highlighted in the Windows Explorer dialog.

  2. If prompted, select Visual Studio 2017 from the Microsoft Visual Studio Version Selector.

    Visual Studio 2017 is selected in the Visual Studio Version Selector dialog.

  3. Sign in to Visual Studio when prompted.

  4. On the Security Warning for PolicyConnectDataService dialog, uncheck Ask me for every project in this solution, then select OK.

    On the Security Warning dialog, Ask me for every project in this solution is unchecked.

  5. In the Solution Explorer in Visual Studio, expand the Contoso.Apps.Insurance.WebAPI project located in the Web folder, and open Web.config.

    In the Visual Studio Solution Explorer, Contoso.Apps.Insurance.WebAPI and Web.config are highlighted.

  6. Locate the appSettings section and use the keys within that section as a reference for the steps below. Instead of updating the application settings in the config file, you will be setting them in the application settings for Web API in the Azure portal as an added security measure. If you would like to debug locally, you will need to insert the values in the Web.config file as well.

    App Settings section of the Web.config file is displayed.

  7. In the Azure portal, navigate to the Contoso Insurance Web API App Service instance by selecting it from the list of resources in the hands-on-lab-SUFFIX resource group.

  8. On the Web API blade, select Application settings, and scroll down to the Application settings section.

    Application Settings is selected on the App Service blade, and +Add new setting is highlighted.

  9. You are going to add several settings to the Application settings of the Web API. For each setting, make sure the Key name is exact, including casing, as this must match the Web.config file.

  10. Follow the steps below to add the settings:

    1. Select +Add new setting.

    2. In the Key field, enter ClientId.

    3. In the Value field, enter the Azure AD Application ID for the Contoso Insurance Web API.

    • The ClientId value is the Application ID you copied into the text editor from the Web API's property blade.

    • If in doubt, you can find in by going into the Azure portal, selecting Azure AD, browsing to the App registrations tab, choosing Contoso Insurance Web API, selecting Settings, then opening Properties.

  11. Repeat the previous step, setting the key and value for each of the settings below:

    1. ClientSecret
    • Key: ClientSecret

    • Value: <Azure AD Web API Key>

    • The ClientSecret value is the Key you created and copied in Exercise 3, Step 2.

    1. SecretUri
    • Key: SecretUri

    • Value: <Key Vault Secret Identifier for the SqlConnectionString secret>

    • The SecretUri value is the Secret Identifier value you copied for the SqlConnectionString secret in Key Vault.

    • You can omit the version number in this value.

    1. ida:Tenant
    • Key: ida:Tenant

    • Value: <Azure AD tenant name>

    • The ida:Tenant value is your Azure AD tenant name (e.g. contoso.onmicrosoft.com), which can be found by selecting Custom Domain Names within Azure AD in the portal

    1. ida:Audience
    • Key: ida:Audience

    • Value: <App ID URI within Azure AD application settings>

    • The ida:Audience value is the App ID URI from the Azure portal within the AAD application settings for this Web API.

  12. Your Application settings should look like the following:

    The application settings specified above have been entered into the Application settings section.

  13. Select Save on the Application settings blade.

Task 2: Deploy the Web API app from Visual Studio

In this task, you will use Visual Studio to deploy the Web API to your API App in Azure.

  1. In Visual Studio, locate the Contoso.Apps.Insurance.WebAPI project in the Web folder in the Solution Explorer.

    Contoso.Apps.Insurance.WebAPI is highlighted in the Visual Studio Solution Explorer.

  2. Right-click the Contoso.Apps.Insurance.WebAPI project and select Publish.

    The Publish link is selected in the properties menu for Contoso.Apps.Insurance.WebAPI.

  3. On the Pick a publish target dialog, select App Service as the publish target, and select Select Existing, then select Publish. If the Pick a publish target dialog is not present, select New Profile in the Publish Screen.

    Select Existing is chosen under App Service as the publish target.

  4. Log on with your credentials and ensure the subscription you published earlier is selected.

  5. Select the Contoso Insurance Web API app.

    The Contoso Insurance Web API API App is selected as the deployment target.

  6. Select OK to begin publishing the Web API.

  7. In the Visual Studio Web Publish Activity view, you will see a status that indicates the Web API was published successfully, along with the URL to the site.

    Publish Succeeded message is displayed.

Task 3: Verify the Web API deployment

  1. Open the URL of the published Web API in a browser window.

  2. Validate the Web API by adding "/swagger" at the end of the URL in your browser (e.g., http://contosoinsuranceapi.azurewebsites.net/swagger).

  3. You should see a list of the available REST APIs. However, you will not be able to execute them from here, as they are protected by Azure AD application permissions, accepting only token-based calls from registered apps.

    The Swagger page for the published Web API is displayed.

Exercise 9: Configure and deploy the Contoso Insurance web app

Duration: 10 minutes

In this exercise, you will apply application settings using the Microsoft Azure Portal. You will also edit a .js file in Visual Studio and deploy the Web app from the starter project.

Task 1: Configure application settings in Azure

  1. Expand the Contoso.Apps.Insurance.Web project in the Visual Studio Solution Explored, in the Web folder, and open Web.config.

    Contoso.Apps.Insurance.Web and Web.config are highlighted in the Visual Studio Solution Explorer.

  2. Locate the appSettings section and use these keys as a reference for the steps below. Instead of updating the application settings in the config file, you are setting them in the application settings for Web API in the portal as an added security measure. If you would like to debug locally, you will need to place the values in the Web.config file as well.

  3. In the Azure portal, navigate to your Web App by selecting it from the list of resources in the hands-on-lab-SUFFIX resource group.

  4. On the Web App blade select Application settings and scroll down to the Application settings section.

    Application Settings is selected on the App Service blade, and +Add new setting is highlighted.

  5. You are going to add several settings to the Application settings of the Web App. For each setting, make sure the Key name is exact, including casing, as this must match the Web.config file.

  6. Follow the steps below to add the settings:

    1. Select +Add new setting.

    2. In the Key field, enter RootWebApiPath.

    3. In the Value field, enter the URL to the published Contoso Insurance Web API.

    • The RootWebApiPath value is the URL of your published Web API.

    Note: It is important to make sure this link starts with https to ensure proper communication between the web app and the API. Otherwise, the requests to the API may be blocked.

  7. Repeat the previous step, setting the key and value for each of the settings below:

    1. Tenant
    • Key: Tenant

    • Value: <Azure AD tenant name>

    • The Tenant value is your Azure AD tenant name (e.g. contoso.onmicrosoft.com), which can be found by selecting Custom Domain Names within Azure AD in the portal

    1. WebClientId
    • Key: WebClientId

    • Value: <Azure AD Application ID>

    • The WebClientId value is the Application ID from the Azure AD properties, which you pasted into the text editor for the Web App.

    1. SecretUri
    • Key: WebApiAppId

    • Value: <Azure AD App URI ID>

    • The WebApiAppId value is the App URI ID from Azure AD for your Web API (this is the same value you used for the ida:Audience setting in the Web API application settings)

    1. AzureFunctionsProxyUrl
    • Key: AzureFunctionsProxyUrl

    • Value: <Proxy URL for your PolicyDocs Azure Functions Proxy>

    • The AzureFunctionsProxyUrl value is the Proxy URL associated with the PolicyDocs proxy you created previously (e.g., https://contosoinsurancedocs.azurewebsites.net//)

  8. Your Application settings should look like the following:

    The application settings specified above have been entered into the Application settings section.

  9. Select Save on the Application settings blade.

  10. Back in Visual Studio, open the app.js file, located within the Contoso.Apps.Insurance.Web project under the Scripts > app folder.

    app.js is highlighted in the Visual Studio Solution Explorer.

  11. Scroll down to the bottom of the file where you see the line (126) that begins with var endpoints = {. Change the URL in quotes to the same URL you entered for the RootWebApiPath application variable, which is the root location of your Web API, (e.g. https://contosoinsurancewebapi.azurewebsites.net).

    Note: It is important to make sure this link starts with https to ensure proper communication between the web app and the API. Otherwise, the requests to the API may be blocked.

    The endpoints variable value is highlighted in the app.js file.

  12. Save app.js.

Task 2: Deploy the Contoso Insurance Web App from Visual Studio

  1. Navigate to the Contoso.Apps.Insurance.Web project located in the Web folder using the Solution Explorer of Visual Studio.

    Contoso.Apps.Insurance.Web is highlighted in the Visual Studio Solution Explorer.

  2. Right-click the Contoso.Apps.Insurance.Web project and select Publish.

    Publish is selected in the properties menu for Contoso.Apps.Insurance.Web.

  3. On the Pick a publish target dialog, select App Service as the publish target, and select Select Existing, then select Publish. If the Pick a publish target dialog is not present, select New Profile in the Publish Screen.

    Select Existing is chosen under App Service as the publish targer.

  4. Log on with your credentials and ensure the subscription you published earlier is selected.

  5. Select the Contoso Insurance Web App.

    The Contoso Insurance Web App is selected as the publish target.

  6. Select OK to begin publishing the Web API.

  7. In the Visual Studio Web Publish Activity view, you will see a status that indicates the Web App was published successfully, along with the URL to the site.

    Publish Succeeded message is displayed.

Task 3: Login and verify the Web App deployment

  1. Open the URL of the published Web App in a browser window.

  2. When prompted, enter the credentials for the Contoso User account (contosouser@<YOUR-TENANT>.onmicrosoft.com) to log into the site. You will need to use the password you copied when you created the account. If you don't have this, you can navigate the Azure AD in the portal, select Users > All Users, select the Contoso User account, and select Reset Password to generate a new password.

  3. Change the password when prompted to complete the login.

  4. Select Accept on the app access screen.

    The app access dialog is displayed.

  5. You should now see the Contoso Insurance website.

    Screenshot of the PolicyConnect app landing page.

  6. Select Policies from the top menu and verify that you see something similar to the following screenshot. After authentication is complete, you should see a list of policies, and you should have a Logout link on the upper-left.

    Policies page of the PolicyConnect app.

  7. Verify that policy documents are accessible through the Azure Functions Proxy by selecting Policy Holders from the top menu, then selecting Details next to one of the policy holders.

    The Policy Holders page of the PolicyConnect app, with the Details link of a policy holder selected.

  8. On the Policy Holder Details pages, hover over the File Path link and observe that it points to the PolicyDocs Proxy URL, with the tokens for and replaced by the appropriate values. Select the link to download and view the policy document.

    The File Path and underlying URL are highlighted, showing the link to the Azure Function Proxy URL created previously.

Exercise 10: Configure and run the legacy desktop (Windows Forms) application

Duration: 15 minutes

Contoso Insurance has created a web and mobile version of their desktop application, but they have opted to update it to communicate with the new Web API service for business and data functionality, doing away with their old WCF services (also included in the solution). They have also replaced their SQL membership-based user authentication with Azure Active Directory (AAD).

If you would like to run the desktop application in its original configuration, you will need to set up a local self-signed certificate, as detailed in Appendix A. Also, make sure that you run both WCF services when debugging the desktop application by right-clicking on the Solution, then selecting Select StartUp Projects... From here, select the Multiple startup projects radio button, then select the Start action for the following projects, moving them from top to bottom in this order: PolicyConnectDataService, PolicyConnectManagementService, and PolicyConnectDesktop. Also, make sure that the UseWebApi app setting is set to false in App.config.

Task 1: Configure application settings in App.config

In this task, you will update the application settings in the App.config file, allowing the desktop application's updated code to take advantage of the new Azure services.

  1. On your Lab VM, expand to the PolicyConnectDesktop project located in the Desktop folder using the Solution Explorer of Visual Studio and open the App.config file.

    PolicyConnectDesktop and App.config are highlighted in the Visual Studio Solution Explorer.

  2. Modify the values for the following keys under appSettings:

    1. PdfRootPath: This is the root folder of the PDF files. This path should point to the folder: C:\ContosoInsurance\Hackathon\Files\.

    2. RootWebApiPath: Insert the value of the URL to your published Web API (e.g., https://contosoinsuranceapi.azurewebsites.net).

    3. UseWebApi: Set to true. This allows the desktop app to communicate with the new Web API, and authenticate through Azure AD.

    4. DesktopClientId: Insert the value of the Application ID for the Contoso Insurance Desktop Azure AD application (e.g., e5040790-6d06-458d-b4da-8e83fa1c56b1).

    5. DesktopRedirectUri: Insert the Redirect URI value from Azure AD for the Contoso Insurance Desktop app (e.g., http://contosoinsurance.desktop.client).

    6. WebApiAppId: Insert the App URI ID for the Contoso Insurance Web API from Azure AD (e.g., https://<YOUR-TENANT>.onmicrosoft.com/e701e991-0aeb-4f91-9a12-5168bb310f72 ). This can be found on the properties blade for the Web API app in Azure AD.

    7. AzureAdLoginUrl: This is the URL of your Azure AD tenant, which should be: https://login.windows.net/<tenantID>. You can find your Tenant ID by opening Azure AD and selecting Properties. Your Tenant ID is the Directory ID value.

    8. AzureADTenantId: This is the Guid value of your tenant, which you retrieved from Azure AD for the previous key.

  3. Save App.config. The updated App.config file should look like:

    The appSettings section of the App.config file is displayed, with the values specified above entered.

Task 2: Run the desktop application

  1. In the Solution Explorer in Visual Studio, right-click the PolicyConnectDesktop project located in the Desktop folder.

  2. Select Debug, and then select Start new instance.

    Start new instance is selected from the Debug menu for the PolicyConnectDesktop project in Visual Studio.

    You will have to take an additional step if you did not unblock the zip file before extracting. If the project does not build due to the following error: "Couldn't process file *.resx due to its being in the internet or Restricted zone or having the mark of the web on the file. Remove the mark of the web if you want to process these files," Run the following Powershell command using the file path you unzipped the source code to, e.g. C:\ContosoInsurance.

        dir c:\contosoinsurance -Recurse | Unblock-File
    
  3. Select Log in, and enter the credentials for the Contoso User (contosouser@<YOUR-TENANT>.onmicirosoft.com) into the Azure AD login window. The password will be whatever you set it to when you changed it after logging into the Web App.

  4. After authentication is complete, you should see a list of policyholders, and you should see a label on the upper-right saying you are logged in as your Contoso User account. Feel free to explore the different capabilities of the application. Some functionality is intentionally left out. To open a policyholder record, simply double-click on any of the rows.

    Screenshot of the PolicyConnect Desktop app.

Exercise 11: Configure and run the mobile application

Duration: 15 minutes

The mobile application was built using Xamarin Forms, capitalizing on the .NET expertise of the Contoso Insurance development team. As a bonus, they can easily add additional platforms, such as iOS and Windows phone, as well as target multi-platform desktop environments. For now, their focus has been on deploying to Android, since they can run the Android emulator right from their development machines, which are Windows-based. You will need to have completed the Xamarin installation steps outlined at the beginning of this hands-on lab guide.

In this exercise, you will update the application settings in the ApplicationSettings.cs file, and then run the mobile application within the Android emulator.

Task 1: Configure application settings in ApplicationSettings.cs

  1. On your Lab VM, expand the CIMobile project located in the Mobile folder in the Visual Studio Solution Explorer, and open ApplicationSettings.cs.

    CiMobile and ApplicationSettings.cs are highlighted in the Visual Studio Solution Explorer.

  2. Modify the values for the following properties:

    1. RootWebApiPath: Insert the value of the URL to your published Web API (e.g., https://contosoinsuranceapi.azurewebsites.net).

    2. BlobContainerUrl: Enter the URL property of your blob storage account policies container where the policy PDF files are kept (e.g., https://contosoinsurancekb.blob.core.windows.net/policies). You can find this by navigating to your Storage account in Azure, selecting Blobs on the Overview blade, then selecting the policies container, and selecting Properties.

    3. MobileClientId: Insert the Application ID, in Guid format, from the Azure AD application settings for your mobile application (e.g., 06e8576a-566d-4582-884f-ce2f99a729bb).

    4. MobileRedirectUri: Insert the Redirect URI value from the Azure AD for the Contoso Insurance Mobile app (e.g., http://contosoinsurance.mobile.client).

    5. WebApiAppId: Insert the App URI ID for the Contoso Insurance Web API from Azure AD (e.g., https://<YOUR-TENANT>.onmicrosoft.com/e701e991-0aeb-4f91-9a12-5168bb310f72). This can be found on the properties blade for the Web API app in Azure AD.

    6. WebApiReplyUrl: Insert the Reply URL value from Azure AD for the Contoso Insurance Web API (e.g., https://contosoinsuranceapi.azurewebsites.net).

    7. AzureADLoginUrl: This is the URL of your Azure AD tenant, which should be: https://login.windows.net/<tenantID>. You can find your Tenant ID by opening Azure AD and selecting Properties. Your Tenant ID is the Directory ID value.

    8. GraphResourceUri: Set to https://graph.windows.net.

    9. AzureADTenantId: This is the Guid value of your tenant, which you retrieved from Azure AD for the previous key.

    10. AzureSearchServiceUrl: To get this value, go into the Azure portal, select your search service, then the "policies" index, and then "Search explorer." Copy the full URL within the URL field. Make sure to include the entire path, even the "&search=*" at the end (e.g., https://contosoinsurance.search.windows.net/indexes/policies/docs?api-version=2015-02-28&search=*)

    11. AzureSearchQueryApiKey: Insert the query key value from your Azure Search service, which can be found by selecting your search service in Azure, selecting Keys, then selecting Manage query keys, and coping the displayed key (or create one if none exist) (e.g., 1A80181B30F975CFE252E4FDDAA657DC).

Task 2: Run the mobile application

  1. Select the CIMobile.Droid project in the Mobile folder using the Solution Explorer of Visual Studio.

  2. On the top tool bar of Visual Studio, select Debug from the first dropdown, Any CPU in the second, and CIMobile.Droid as the application to be debugged. Select the green play button next to the Android emulator name to launch the application.

    The Andriod emulator run button is highlighted in the Visual Studio toolbar.

    1. Alternately, you can right-click on the CIMobile.Droid project, select Debug, then select Start new instance.
  3. The Android emulator should appear, and then launch the PolicyConnect app within.

    Screenshot of the Android emulator.

  4. Select the Sign In... button to begin.

  5. You will be presented with an Azure AD login window. Enter the login credentials for the Contoso User account ( contosouser@<your tenant>.onmicrosoft.com) and enter the password you created. After authentication is complete, you should see a list of policyholders. You cannot interact with the records in any way for this demo.

  6. Select the menu button on the upper-left to explore other parts of the app.

    Policy Holders list viewed in the Android emulator.

  7. Select the menu and select Search Policy #.

    Search Policy # is highlighted in the Android emulation.

  8. You can either enter a full policy # or perform a partial search of all content and metadata fields within the search field. Type in at least three characters to activate the search button. Try searching with the letters MON. The most relevant search results will appear first. Now try searching by an exact policy number, such as DOW586IJCG493F. You should see a single result matching that policy number.

    Search results are displayed in the Android emulator.

  9. Select a search result to view the content that was extracted by the Azure Search indexer. There is a link to download the actual PDF at the bottom of the result page. This will display the file that is stored in blob storage.

    Search resullt details in the Android emulator.

    Policy document in the Android emulator.

Exercise 12: Create a Flow app to send push notifications

Duration: 10 minutes

Contoso wants to receive push notifications when important emails arrive, since any newly scanned policies that are emailed to the data entry employees are marked as important. Since they use Office 365 for their email services, you can easily meet this requirement with Flow.

Task 1: Sign up for a Flow account

  1. Go to https://flow.microsoft.com and sign up for a new account, using the same account you have been using in Azure.

  2. You may receive an email asking you to verify your account request, with a link to continue the process.

  3. Download the Microsoft Flow mobile app to your phone or mobile device.

Task 2: Create new flow

  1. With your Flow account created and logged into the Flow website, select the My flows link on top of the page.

    My flows menu is highlighted within the Flow app.

  2. Select the Create from blank button.

  3. Select Search hundreds of connectors and triggers.

    Screenshot of the Search hundreds of connectors and triggers link.

  4. Type email into the trigger search box to find the Office 365 Outlook -- When a new email arrives trigger. Select it to continue.

    Email is entered into the search box on the Flow connectors and triggers dialog. Office 365 Outlook - When a new email arrives is highlighted.

  5. When prompted, sign in to create a connection to Office 365 Outlook.

  6. Within the When a new email arrives trigger configuration box, select Show advanced options.

    Screenshot of the Show advanced options drop-down in the When a new email arrives trigger configuration box.

  7. Within the advanced options, set the Importance to High and set Has Attachment to Yes.

    In the When a new email arrives trigger configuration box, fields are set to the previously defined settings.

  8. Select +New step to continue.

    Under the New step button, Add an action is selected.

  9. Type push into the action search box, then select Notifications -- Send me a mobile notification.

    In the Choose an action box, push is typed in the search field, and Notifications - Send me a mobile notification is selected.

  10. Within the Send me a mobile notification action box, type in a notification in the Text field: Important email with attachment:

  11. Select the Subject tag from the Dynamic content dialog to insert it after your notification text.

  12. Type https://outlook.office365.com/ into the Link field.

  13. Type Go to Outlook Office 365 as the Link label.

    In the When a new email arrives trigger configuration box, in the Send me a mobile notification action box, fields are set to the previously defined settings.

  14. Enter a name, such as "When a new email arrives -> Send mobile notification," in the top left corner (where it says Untitled), then select Save.

Task 3: Test your flow

  1. Send an email to your O365 account marked as High Importance, with a test Policy PDF file attached. You can find some test files that are not stored in Blob storage (for additional testing later) within the C:\ContosoInsurance\Hackathon\New Policies folder.

  2. If you have the Flow app installed on your phone, you should receive a push notification (this could take up to five minutes the first time).

  3. You can check the status of the flow by selecting My flows from the flow website. Select the name of the flow When a new email arrives -> Send me a mobile notification you created.

    On the My flows tab, the option to send a mobile notification when a new email arrives is set to On.

  4. You will see each time the flow was run, along with its status, under Run History.

    Under Run history, Succeeded displays.

  5. Select the line item to view more details.

    The flow status shows that the result for when a new email arrives is for a mobile notification to be sent.

Exercise 13: Create an app in PowerApps

Duration: 15 minutes

Since creating mobile apps is a long development cycle, Contoso is interested in using PowerApps to create mobile applications to add functionality not currently offered by their app rapidly. In this scenario, they want to be able to edit the Policy lookup values (Silver, Gold, Platinum, etc.), which they are unable to do in the current app.

Get them up and running with a new app created in PowerApps, which connects to the ContosoInsurance database and performs basic CRUD (Create, Read, Update, and Delete) operations against the Policies table.

Task 1: Sign up for a PowerApps account

  1. Go to https://web.powerapps.com and sign up for a new account, using the same account you have been using in Azure.

  2. You may receive an email asking you to verify your account request, with a link to continue the process.

  3. Download and install PowerApps Studio from the Microsoft store: https://www.microsoft.com/en-us/store/p/powerapps/9nblggh5z8f3.

Task 2: Create new SQL connection

  1. With your PowerApps account created and logged into the PowerApps website, select the Connections link on left menu of the page.

  2. Select the New connection button on top of the page.

  3. Type SQL into the search box, and then select the SQL Server item in the list below.

    In the New connection section, the search field is set to SQL. In the item list below, SQL Server is selected.

  4. Within the SQL Server connection dialog, select the Connect directly (cloud services) radio button.

  5. Consult your saved SQL Server connection string (or locate it in Azure) to fill in the SQL server name, Username, and Password values. The SQL Database name should be ContosoInsurance.

    The SQL Server dialog box fields are completed.

Task 3: Create a new app

  1. Open PowerApps Studio and sign in with the same account.

  2. Select New on the left-hand menu, and then select the right arrow next to the list below the Create an app from your data heading.

    In the PowerApps Studio, the New button on the left is selected. The right arrow to the right of Create an app from your data is also selected.

  3. Select the SQL Server connection you created in the previous task.

    In PowerApps Studio, under Connections, the SQL Server connection is selected.

  4. Select default under Choose a dataset.

  5. Select Policies under Choose a table.

    In PowerApps Studio, under Choose a table, Policies is selected.

  6. Select Connect.

Task 4: Design app

  1. The new app will automatically be created and displayed within the designer. Select the title for the first page (currently named [dbo].[Policies]) and edit the text in the formula field to read Policies.

    All of the Policy options display.

  2. Select the DetailScreen screen on the left-hand side.

    On the Home tab, under Screens, DetailScreen1 is selected.

  3. Reorder the fields on the form by selecting them, then dragging them by the Card: <field name> tag to the desired location. The new order should be Name, Description, DefaultDeductible, then DefaultOutOfPocketMax.

    In the dbo.policies window, the new order of the fields displays.

  4. On the form, edit the DefaultDeductible and DefaultOutOfPocketMax labels to be Default Deductible and Default Out of Pocket Max, respectively.

  5. Rename the screen title to Policy by typing "Policy" in quotes within the formula field.

    The formula field is set to

  6. Select EditScreen on the left-hand menu.

  7. Repeat steps 4-6 on the edit screen.

Task 5: Edit the app settings and run the app

  1. Select File on the top menu. Select App settings, then App name + icon and type in a new App name, such as PolicyConnect Plus.

    In PowerShell App Studio, under App settings, App name plus icon is selected, and the App name is set to PolicyConnectPlus.

  2. Select Save on the left-hand menu to save the app to the cloud, then select the Save button below.

  3. After saving, select the left arrow () on top of the left-hand menu.

    Screenshot of the Left arrow, and the message that all changes are saved.

  4. Select the Run button on the top menu to preview the app. You should be able to view the current policies, edit their values, and create new policies.

    Screenshot of the Run button.

Exercise 14: Add Azure Function to Azure API Management

Duration: 15 minutes

Contoso is interested in providing an API Store experience to the development teams. In this exercise you will create an API Management portal and import the Function app you created earlier.

Task 1: Provision Azure API Management

In this task, you will create a new API Management Resource.

  1. Connect to the Azure portal at: https://portal.azure.com, select +Create a resource, Integration and then select API management.

    Create a resource is selected. Integration is selected, and the API management button is clicked.

  2. On the API management blade, specify the following configuration and select Create:

    1. Name: Enter a unique value, such as contosoinsuranceSUFFIX (ensure the green checkmark appears).

    2. Subscription: Select the subscription you are using for this hands-on lab.

    3. Resource Group: Select the resource group you are using for this hands-on lab.

    4. Organization Name: Contoso Insurance

    5. Administrator Email: Enter the email address associated with the Azure account you are using for this hands-on lab.

    6. Pricing Tier: Developer (No SLA)

    API management Create blade with the values specified above entered into the appropriate fields.

    Note: It will take several minutes to provision the APIM resource. You can safely move on to the next task.

Task 2: Add API Definition to Function App

In this task, you will generate a swagger api definition for the policy documents Function App. This is required for API Management to discover the API. At this time, the Function API definition (Swagger) feature is not supported for V2 runtime so we will set the function back to V1 for the purposes of this POC.

  1. Navigate to the Function App you created earlier (contosoinsurancedocsSUFFIX) and Select Function app settings in the Configured features section.

The Configured features link is highlighted.

  1. Change the Runtime version setting to ~1.

The Runtime version setting of ~1 is highlighted.

  1. Select the Overview tab and select Restart. Select Ok, if prompted.

  2. Select the Platform features blade then select API definition

  3. In the API definition source setting, select Function (preview).

Function (preview) is highlighted in the API definition section.

  1. Delete the placeholder text if it exists in the text area.

API definition blade with blank text area and Generate api definition template selected

  1. Select Generate API definition template. The error window should disappear and the swagger json will appear.

API definition blade after Generate api definition template selected and swagger json template appearing

  1. Copy the API definition URL and save it in a text file for the next task.

The Copy button next to the API definition url is highlighted.

  1. Select Save.

Task 3: Import the Function App to API Management(APIM)

In this task, you will add your function app to the APIM's API collection.

  1. Return to the API Management service and select the APIs blade.

  2. Select OpenAPI specification to begin importing your Policy Docs API into APIM.

APIs blade open and OpenAPI specification is selected

  1. Paste the API definition URL you copied in the last task into the OpenAPI specification text box. You can accept the name values and select Create.

The OpenAPI location URL is pasted into the OpenAPI specification field and the Create button is highlighted.

  1. Select the Settings tab and choose Unlimited for the Products setting. Select Save.

The Settings tab is open and Unlimited has been entered in the Products field. Save is highlighted.

  1. Select the Test tab, then select the GET function in the left menu.

  2. Enter the values for policyHolder and policyNumber in the template parameters text fields.

    1. For example:
    • policyHolder: Albert
    • policyNumber: ALB417974T1SV1

The values listed above are entered in the indicated text fields

  1. Select Send to test the API with the supplied parameters. Within a few seconds a 200 response with binary data representing the pdf will be returned.

The HTTP response displayed indicates 200 OK and binary data represeting the pdf file is included.

After the hands-on lab

Duration: 10 minutes

In this exercise, you will deprovision any Azure resources that were created in support of the lab.

Task 1: Delete the Resource group in which you placed your Azure resources.

  1. From the Portal, navigate to the blade of your Resource Group and select Delete in the command bar at the top.

  2. Confirm the deletion by re-typing the resource group name and selecting Delete.

Task 2: Delete the Azure Active Directory app registrations for Desktop and Mobile

  1. Open the manifest for each app registration and change the following setting to false:

    1. "availableToOtherTenants": false
  2. Save the manifest, then delete the app registrations.

Task 3: Delete Flow

  1. In your Microsoft Flow account, delete the Flow you created to send a push notification when email messages marked as important with an attachment are received in your inbox.

You should follow all steps provided after attending the hands-on lab.

Appendix A: Create a self-signed certificate

For users who wish to run the PolicyConnect desktop application within its legacy configuration, you must create and configure a self-signed certification. SSL is used to encrypt communication between the desktop application and the WCF services, including SQL-based authentication. This is not required to complete the lab successfully.

Task 1: Create self-signed certificate

  1. On the new VM, run the Developer Command Prompt for the appropriate version of Visual Studio as an [administrator] from the Start menu.

  2. Browse to a folder location you wish to store the certificate files, taking note of the path.

  3. Run the following command to create the root CA, and execute:

    makecert -n "CN=RootCATest" -r -sv RootCATest.pvk RootCATest.cer
    

    Note: By default, no makecert tool is installed on Windows 10 PC. To install, you need to download Windows 10 SDK from here: https://developer.microsoft.com/en-us/windows/downloads/windows-10-sdk.

  4. In the Create Private Key Password dialog box, select None without entering the password. Normally this is not recommended for security reasons but is acceptable for test purposes only.

  5. Now you will install the certificate in the Trusted Root Certification Authorities container.

  6. Select Start, then type MMC and then select OK. On Windows 10, you will need to type mmc.exe after selecting Start.

  7. In the Microsoft Management Console (MMC), on the File menu, select Add/Remove Snap-in.

  8. In the Add Standalone Snap-in dialog box, select Certificates and then select Add.

    In the Add or Remove Snap-ins dialog box, the Certificates snap-in and the Add button are selected.

  9. In the Certificates snap-in dialog box, select the Computer account radio button because the certificate needs to be made available to all users, and then select Next.

  10. In the Select Computer dialog box, leave the default Local computer (the computer this console is running on) selected and then select Finish.

  11. In the Add/Remove Snap-in dialog box, select OK.

  12. In the left pane, expand the Certificates (Local Computer) node, and then expand the Trusted Root Certification Authorities folder.

  13. Under Trusted Root Certification Authorities, right-click the Certificates subfolder, select All Tasks, and then select Import.

  14. On the Certificate Import Wizard welcome screen, select Next.

  15. On the File to Import screen, select Browse.

  16. Browse to the location of the signed Root Certificate Authority RootCATest.cer file copied in Step 3, select the file, and then select Open.

  17. On the File to Import screen, select Next.

  18. On the Certificate Store screen, accept the default choice and then select Next.

  19. On the Completing the Certificate Import Wizard screen, select Finish.

    In the MMC window - console1, under Console Root\Certificates (Local Computer), Trusted Root Certification Authorities is selected. Under Issued To, RootCATest is selected.

  20. Leave the MMC window open, as it will be required below.

Task 2: Create and install your temporary service certificate

  1. On the new VM, run the Developer Command Prompt for the appropriate version of Visual Studio as an [administrator] from the Start menu, or switch over to the command prompt if you had left it open from the previous steps.

  2. Browse to the folder location you stored the certificate files.

  3. Type in the following command, replacing the <<YOUR MACHINE NAME>> with your machine name, and execute:

    makecert -sk ContosoInsurance -iv RootCATest.pvk -n "CN=<<YOUR MACHINE NAME>>" -ic RootCATest.cer -sr localmachine -ss my -sky exchange -pe
    
  4. Keep the command prompt open.

  5. You must now associate this certificate with all SSL transactions within IIS Express. To do this, re-open the Certificates MMC snap-in from the previous section.

  6. Expand the Personal certificates node on the Certificates tree to the left. You should see a certificate issued to your machine name and issued by RootCATest. Double-click your certificate, then select the Thumbprint field under the Details tab. Copy the Thumbprint value.

    In the MMC window - console1, under Certificate\Personal, Certificates is selected. Under Issued To, the RootCATest certificate is selected. In the Certificate dialog box Details tab, the thumbprint value is selected.

  7. Launch PowerShell from the start menu. You will run a command to remove the spaces from the Thumbprint value you copied on the previous step. You will also execute a command to generate a new Guid value.

  8. From the PowerShell command prompt, paste your certificate's thumbprint between double quotes, executing the following command (replacing the thumbprint value with your own):

    "a1 b6 9e 7a be 27 fe 21 fa c7 21 f5 40 72 9f c1 f5 8c dc 4e" -replace " "

  9. Copy the output value, which is your thumbprint with the spaces removed.

  10. Go back to the Visual Studio command prompt you left open on step 4. Type in the following command, but do not execute yet:

    netsh http add sslcert ipport=0.0.0.0:44321 appid= certhash=a1b69e7abe27fe21fac721f540729fc1f58cdc4e

  11. Replace the certhash value with the thumbprint you copied in the previous step. Replace the appid value with a newly generated Guid. To generate a Guid, switch pack to PowerShell and execute the following command:

    [guid]::NewGuid()
    
  12. Paste the output Guid value in between the curly braces next to appid in the Visual Studio command prompt.

  13. Execute the netsh command. If you receive an error stating that the "SSL Certificate add failed," you may ignore it. The certificate is now associated with https communications over port 44321.

Task 3: Configure the IIS Express self-signed certificate

  1. On the new VM, verify that the IIS Express developer certificate bound to localhost is present.

  2. Select Start, type MMC, and then select OK.

  3. In the Microsoft Management Console (MMC), on the File menu, select Add/Remove Snap-in.

  4. In the Add Remove Snap-in dialog box, select Add.

  5. In the Add Standalone Snap-in dialog box, select Certificates, and then select Add.

  6. In the Certificates snap-in dialog box, select the Computer account radio button because the certificate needs to be made available to all users, and then select Next.

  7. In the Select Computer dialog box, leave the default Local computer (the computer this console is running on) selected, and then select Finish.

  8. In the Add Standalone Snap-in dialog box, select Close.

  9. In the Add/Remove Snap-in dialog box, select OK.

  10. In the left pane, expand the Certificates (Local Computer) node, and then expand the Personal folder.

  11. You should see a certificate issued to and issued by "localhost".

    In the MMC window - console1 window, the certificate issued to localhost is selected.

  12. If this certificate is not present, you will need to run a repair command for the IIS Express application. If it is present, continue to step 12.

    1. Select Start, then type in Programs and Features. select Programs and Features application link.

    2. Find and right-click on the IIS Express application listing, then select Repair.

    The right-click menu for IIS 10.0 Express displays with Repair selected.

    1. Once the repair has completed, go back to the Certificates MMC snap-in and verify that the localhost certificate is now present under the Personal folder.
  13. From the Certificates MMC snap-in, right-click on the localhost certificate within the Personal certificates container, then choose All Tasks Export.

    In the MMC window - console1 window, under Certificates\Personal, Certificates is selected. Under Issued to, the right-click menu for localhost displays, and All Tasks / Export is selected.

  14. When the Certificate Export Wizard dialog appears, select Next. Under Export Private Key, select Yes, export the private key, and then select Next.

    The Certificate Export Wizard displays.

  15. Make sure the Personal Information Exchange -- PKCS #12 (.PFX) file format is selected, and that the first checkbox (include all certificates in the certification path if possible) is checked, leaving the other three unchecked. select Next.

    In the Certificate Export Wizard, Export File Format section, Personal Information Exchange -- PKCS #12 (.PFX) is selected.

  16. Enter and confirm a password on the next step. Make note of the password for the certificate import process. select Next.

  17. Specify the name of your exported file by browsing to a folder and typing in the name of the file (such as localhost). select Next.

  18. Select Finish on the confirmation screen. You will receive a prompt stating that the export was successful. select OK to close the dialog.

  19. After the export is complete, expand the Trusted Root Certification Authorities folder, then right-click on the Certificates subfolder and select All Tasks... Import.

  20. select Next, and then browse to the exported certificate location. You may need to select Personal Information Exchange (*.pfx,*.p12) from the file types dropdown next to the filename field in order to see your certificate listed. Select the certificate, select Open, and then Next.

  21. Type the password you entered while exporting the certificate in step 15, then select Next.

  22. Make sure that the Trusted Root Certification Authorities certificate store is selected, then select Next, then Finish. You will receive a prompt stating that the import was successful. select OK to close the dialog.

Attribution

This content was originally posted here:
https://github.com/Microsoft/MCW-App-Modernization

License

This content is licensed with the MIT License license.

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE