Azure-Samples/xamarin-azure-businessreview

Demo app showing how to use several Azure services with Xamarin including Azure AD B2C, Azure Cosmos DB, Azure Functions, Azure App Services, and Azure Media Services

page_type	languages	products	description	name
sample	csharp	dotnet xamarin azure azure-functions azure-active-directory azure-cosmos-db azure-storage azure-media-services	This is a Xamarin app that gives users the opportunity login and create reviews for businesses and or restaurants.	The Business Reviewer (Xamarin)

The Business Reviewer

This is a Xamarin app that gives users the opportunity login and create reviews for businesses and or restaurants. In addition to being able to leave a text review, the user can also upload photos and videos.

The app showcases how to use several Azure offerings in the context of a mobile application - including how to create accounts and stream videos.

Features

This project demonstrates the following:

• Xamarin.Forms
• MVVM architecture
• Azure AD B2C
• Azure App Services
• Azure Cosmos DB
• Azure Functions
• Azure Storage
  • Azure BLOB Storage
  • Azure Message Queues
• Azure Media Services

Getting Started

To get started clone this repository and then follow the directions in the Quick Start section below to setup the Azure infrastructure. Once done, you will be able to run the app.

Prerequisites

• Visual Studio or Visual Studio for Mac.
• Azure subscription (create a free one here.)

Installation

• Clone this repository.
• Open the /src/Reviewer.sln in either Visual Studio or Visual Studio for Mac.
• Restore all NuGet packages.

Quickstart

In order to run this full sample, an Azure subscription is required. You can create a free subscription here.

Note: When creating the Azure offerings below - use the same Resource Group. And when given the option to pick a Storage Account - pick the same one for each.

Once you have a subscription, you will need to create several Azure offerings:

Azure Storage

1. Create an Azure Storage Account.

Azure AD B2C

Setting up Azure AD B2C is the most involved portion.

1. First you need to create the tenant.
2. Next you need to create your application.
   1. Within the application, create a scope, and name it rvw_all.
3. Next you need to add any identity providers.
4. Then you need to create a sign-up/sign-in policy.

Azure Cosmos DB

1. Create an Azure Cosmos DB - SQL API - instance.
   1. Create a database named: BuildReviewer
2. Create a collection named: Businesses
3. Create a collection named: Reviews

Azure App Service

1. Create the Azure App Service.

2. Configure the Reviewer.WebAPI project's appsettings.json file to match the following:

   "AzureAdB2C":
   {
       "Instance": "https://login.microsoftonline.com/tfp/",
       "ClientId": "",
       "Domain": "",
       "SignUpSignInPolicyId": "",
       "AllAccessScope": "rvw_all"
   }

   • The ClientId value will be the Application ID of your Azure AD B2C application.
   • The Domain will be the Domain Name of your Azure AD B2C tenant.
   • The SignUpSignInPolicyId will be the name of the sign-up/sign-in policy you created.

3. Update the following variable values in Reviewer.Services.APIKeys:

   1. CosmosEndpointUrl: Obtained from the API Keys blade of the portal for Cosmos DB.
   2. CosmosAuthKey: The primary key from the API Keys blade of the portal for Cosmos DB.
   3. WebAPIUrl: The URL of this Azure app service, can be obtained from the overview blade in the portal. (Make sure to include the trailing backslash.)

4. Deploy the Reviewer.WebAPI ASP.NET Core Web API application to the Azure App Service instance.

Azure Media Services (AMS)

1. Create an Azure Media Services instance.
2. Use the same Azure Storage account as created above.
3. Start the default streaming endpoint.
4. Create an Azure AD application for it.
5. Create an Azure AD service principal.

Azure Functions

1. Create an Azure Function App.
2. Use the same Azure Storage account as created above.
3. Create the following Application Settings keys with values:
   1. AMSAADTenantDomain: The Azure AD domain you created for the AMS app in step 4 in the Azure Media Services setup above.
   2. AMSClientId: The Azure AD client ID for the Azure Media Services application you created during the Azure Media Services setup above.
   3. AMSClientSecret: The secret key obtained during the Azure Media Services AD creation steps above.
   4. AMSRESTAPIEndpoint: Obtained on the Azure Media Services overview blade in the portal.
   5. MediaServicesStorageAccountKey: Obtained on the Primary Storage ID of the AMS Properties blade.
   6. MediaServicesStorageAccountName: Obtained on the Primary Storage Name of the AMS Properties blade.
   7. Reviews_Cosmos: The Azure Cosmos DB connection string (obtained on the keys blade for Cosmos DB).
   8. WebhookEndpoint: This will need to be obtained after you deploy the Function app. It is the URL of the AMSWebhook function.

Note that all of those settings can also be put into your local.settings.json to debug locally.

Xamarin.Forms Project

Finally there are a couple of settings that you need to configure in the Xamarin.Forms project to ensure it can communicate to the Azure offerings.

1. In the Reviewer.Services.APIKeys class fill in the values for the following variables:
   1. SASRetrievalUrl: The function URL of the SASRetrievalURL function.
   2. WriteToQueueUrl: The function URL of the WritePhotoInfoToQueue function.
   3. StorageAccountName: Within the Azure Storage service - the Storage Account Name as found on Access Keys blade.
   4. PhotosContainerName: review-photos

Demo

There are a couple things to note when running the demo.

1. The Xamarin.Forms app needs to run with an Android version that supports custom tabs.