Azure Cosmos DB: Build a web app with .NET, Xamarin, and Facebook authentication

Tip

The Azure Cosmos DB DocumentDB API or SQL (DocumentDB) API is now known as Azure Cosmos DB SQL API. You don't need to change anything to continue running your apps built with DocumentDB API. The functionality remains the same.

Azure Cosmos DB is Microsoft’s globally distributed multi-model database service. You can quickly create and query document, key/value, and graph databases, all of which benefit from the global distribution and horizontal scale capabilities at the core of Azure Cosmos DB.

This quick start demonstrates how to create an Azure Cosmos DB account, document database, and collection using the Azure portal. You'll then build and deploy a todo list web app built on the SQL .NET API, Xamarin, and the Azure Cosmos DB authorization engine. The todo list web app implements a per-user data pattern that enables users to login using Facebook Auth and manage their own to do items.

Prerequisites

If you don’t already have Visual Studio 2017 installed, you can download and use the free Visual Studio 2017 Community Edition. Make sure that you enable Azure development during the Visual Studio setup.

If you don't have an Azure subscription, create a free account before you begin.

Alternatively, you can Try Azure Cosmos DB for free without an Azure subscription, free of charge and commitments. Or you can use the Azure Cosmos DB Emulator for this tutorial with a URI of https://localhost:8081 and the following key:

C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==

Create a database account

  1. In a new browser window, sign in to the Azure portal.
  2. Click Create a resource > Databases > Azure Cosmos DB.

    The Azure portal Databases pane

  3. In the New account page, enter the settings for the new Azure Cosmos DB account.

    Setting Suggested value Description
    ID Enter a unique name Enter a unique name to identify this Azure Cosmos DB account. Because documents.azure.com is appended to the ID that you provide to create your URI, use a unique but identifiable ID.

    The ID can contain only lowercase letters, numbers, and the hyphen (-) character, and it must contain 3 to 50 characters.
    API SQL The API determines the type of account to create. Azure Cosmos DB provides five APIs to suits the needs of your application: SQL (document database), Gremlin (graph database), MongoDB (document database), Azure Table, and Cassandra, each which currently require a separate account.

    Select SQL because in this quickstart you are creating a document database that is queryable using SQL syntax and accessible with the SQL API.

    Learn more about the SQL API
    Subscription Your subscription Select Azure subscription that you want to use for this Azure Cosmos DB account.
    Resource Group Create new

    Then enter the same unique name as provided above in ID
    Select Create New, then enter a new resource-group name for your account. For simplicity, you can use the same name as your ID.
    Location Select the region closest to your users Select geographic location in which to host your Azure Cosmos DB account. Use the location that's closest to your users to give them the fastest access to the data.
    Enable geo-redundancy Leave blank This creates a replicated version of your database in a second (paired) region. Leave this blank.
    Pin to dashboard Select Select this box so that your new database account is added to your portal dashboard for easy access.

    Then click Create.

    The new account page for Azure Cosmos DB

  4. The account creation takes a few minutes. During account creation the portal displays the Deploying Azure Cosmos DB tile on the right side, you may need to scroll right on your dashboard to see the tile. There is also a progress bar displayed near the top of the screen. You can watch either area for progress.

    The Azure portal Notifications pane

    Once the account is created, the Congratulations! Your Azure Cosmos DB account was created page is displayed.

Add a collection

You can now use the Data Explorer tool in the Azure portal to create a database and collection.

  1. Click Data Explorer > New Collection.

    The Add Collection area is displayed on the far right, you may need to scroll right to see it.

    The Azure portal Data Explorer, Add Collection blade

  2. In the Add collection page, enter the settings for the new collection.

    Setting Suggested value Description
    Database id Tasks Enter Tasks as the name for the new database. Database names must contain from 1 through 255 characters, and they cannot contain /, \, #, ?, or a trailing space.
    Collection id Items Enter Items as the name for your new collection. Collection ids have the same character requirements as database names.
    Storage capacity Fixed (10 GB) Change the value to Fixed (10 GB). This value is the storage capacity of the database.
    Throughput 400 RU Change the throughput to 400 request units per second (RU/s). Storage capacity must be set to Fixed (10 GB) in order to set throughput to 400 RU/s. If you want to reduce latency, you can scale up the throughput later.

    Click OK.

    Data Explorer displays the new database and collection.

    The Azure portal Data Explorer, showing the new database and collection

Clone the sample application

Now let's clone a SQL API app from github, set the connection string, and run it. You'll see how easy it is to work with data programmatically.

  1. Open a git terminal window, such as git bash, and cd to a working directory.

  2. Run the following command to clone the sample repository.

    git clone https://github.com/Azure/azure-documentdb-dotnet.git
    
  3. Then open the DocumentDBTodo.sln file from the samples/xamarin/UserItems/xamarin.forms folder in Visual Studio.

Review the code

The code in the Xamarin folder contains:

  • Xamarin app. The app stores the user's todo items in a partitioned collection named UserItems.
  • Resource token broker API. A simple ASP.NET Web API to broker Azure Cosmos DB resource tokens to the logged in users of the app. Resource tokens are short-lived access tokens that provide the app with the access to the logged in user's data.

The authentication and data flow is illustrated in the diagram below.

  • The UserItems collection is created with the partition key '/userid'. Specifying a partition key for a collection allows Azure Cosmos DB to scale infinitely as the number of users and items grows.
  • The Xamarin app allows users to login with Facebook credentials.
  • The Xamarin app uses Facebook access token to authenticate with ResourceTokenBroker API
  • The resource token broker API authenticates the request using App Service Auth feature, and requests an Azure Cosmos DB resource token with read/write access to all documents sharing the authenticated user's partition key.
  • Resource token broker returns the resource token to the client app.
  • The app accesses the user's todo items using the resource token.

Todo app with sample data

Update your connection string

Now go back to the Azure portal to get your connection string information and copy it into the app.

  1. In the Azure portal, in your Azure Cosmos DB account, in the left navigation click Keys, and then click Read-write Keys. You'll use the copy buttons on the right side of the screen to copy the URI and Primary Key into the Web.config file in the next step.

    View and copy an access key in the Azure portal, Keys blade

  2. In Visual Studio 2017, open the Web.config file in the azure-documentdb-dotnet/samples/xamarin/UserItems/ResourceTokenBroker/ResourceTokenBroker folder.

  3. Copy your URI value from the portal (using the copy button) and make it the value of the accountUrl in Web.config.

    <add key="accountUrl" value="{Azure Cosmos DB account URL}"/>

  4. Then copy your PRIMARY KEY value from the portal and make it the value of the accountKey in Web.congif.

    <add key="accountKey" value="{Azure Cosmos DB secret}"/>

You've now updated your app with all the info it needs to communicate with Azure Cosmos DB.

Build and deploy the web app

  1. In the Azure portal, create an App Service website to host the Resource token broker API.
  2. In the Azure portal, open the App Settings blade of the Resource token broker API website. Fill in the following app settings:

    • accountUrl - The Azure Cosmos DB account URL from the Keys tab of your Azure Cosmos DB account.
    • accountKey - The Azure Cosmos DB account master key from the Keys tab of your Azure Cosmos DB account.
    • databaseId and collectionId of your created database and collection
  3. Publish the ResourceTokenBroker solution to your created website.

  4. Open the Xamarin project, and navigate to TodoItemManager.cs. Fill in the values for accountURL, collectionId, databaseId, as well as resourceTokenBrokerURL as the base https url for the resource token broker website.

  5. Complete the How to configure your App Service application to use Facebook login tutorial to setup Facebook authentication and configure the ResourceTokenBroker website.

    Run the Xamarin app.

Review SLAs in the Azure portal

The throughput, storage, availability, latency, and consistency of the resources in your account are monitored in the Azure portal. Let's take a quick look at these metrics.

  1. Click Metrics in the navigation menu.

    Metrics in the Azure portal

  2. Click through each of the tabs so you're aware of the metrics Azure Cosmos DB provides.

    Each chart that's associated with the Azure Cosmos DB Service Level Agreements (SLAs) provides a line that shows if any of the SLAs have been violated. Azure Cosmos DB makes monitoring your SLAs transparent with this suite of metrics.

    Azure Cosmos DB metrics suite

Clean up resources

If you're not going to continue to use this app, delete all resources created by this quickstart in the Azure portal with the following steps:

  1. From the left-hand menu in the Azure portal, click Resource groups and then click the name of the resource you just created.
  2. On your resource group page, click Delete, type the name of the resource to delete in the text box, and then click Delete.

Next steps

In this quickstart, you've learned how to create an Azure Cosmos DB account, create a collection using the Data Explorer, and build and deploy a Xamarin app. You can now import additional data to your Cosmos DB account.