Local development and debugging the Mobile App .NET server backend

Donna Malayeri edited this page Jun 7, 2016 · 9 revisions

When developing your Mobile App .NET server backend, you can test it by either hosting it on your computer using IIS/IIS Express, or remote debugging by deploying it to a test website on Azure. I will be discussing how to set up your environment for local development and debug and connecting it to your client device. For illustrative purposes, I will be using the Windows Phone 8.1 client application. You can also apply the methods I describe to debug your .NET server backend with another client device on your local network. I will touch on the configuration of your backend and client code to work with App Service Authentication and Authorization to mint and decode App Service Authentication tokens.

When locally debugging the Mobile App .NET server backend you may have encountered the following issues:

  • The client app cannot authenticate with an identity provider
  • The server rejects requests from an authenticated client
  • The client cannot find the locally hosted server

This post intends to help solve those issues.

Prerequisites

The content in this blog post assumes you have performed the following.

  1. You published a .NET server backend to App Service.
  2. You enabled App Service Authentication and Authorization and set up an identity provider.

Configuring your development environment for local debugging

By default, your Mobile App .NET server backend application will run in IIS Express. This is problematic when debugging with a client application running in another device on your network, or in a virtual machine in Hyper-V (such as Windows Phone Emulator). IIS Express will host your server application under localhost, which makes the application unreachable to other devices or virtual machines. Your client application running on Windows Phone Emulator has a different meaning for localhost.

It is simpler to configure your machine to host your Mobile App .NET server backend application on IIS, as this allows you to control the binding of the server application to an IP address, rather than localhost.

Enable IIS on your computer

To use IIS instead of IIS Express, you'll have to turn it on in your Windows Features.

  • Control Panel –> Programs and Features –> Turn Windows Features on or off
  • Turn on Internet Information Services

Local development and debugging the Mobile App .NET server backend

Create a firewall exception for World Wide Web Services (HTTP) to allow HTTP requests through the firewall

You have to allow HTTP requests from your network through your firewall so that your client application can reach your IIS instance.

  • Control Panel –> Windows Firewall –> Allow an app or feature through Windows Firewall.
  • Click Change settings. Make sure World Wide Web Services (HTTP) has checkboxes under Domain (if you have a domain controller on your network), or Private (if you're working on network that has no domain controller).

Local development and debugging the Mobile App .NET server backend

Set your Mobile App .NET server backend project to run locally using IIS

By default, your Mobile App .NET server backend will be deployed to IIS Express. You have to change some configuration so that it runs in IIS.

  1. Get the IP address of your development computer running ipconfig from command line. Alternatively, you can use the name of your computer by running set COMPUTERNAME from command line.

  2. Run Visual Studio as administrator and open your Mobile App .NET server backend project.

  3. Right click your Mobile App .NET server backend project in the Solution Explorer. Select Properties.

  4. Browse to the Web tab. Under the Servers section:

    1. Change the drop down box from IIS Express to Local IIS.
    2. Change the Project Url from “localhost” to your development computer’s IP Address (or computer name).
    3. Click Create Virtual Directory.
    4. Save the changes.

Make note of the Project Url, which is your computer's IP address (or computer name) and path bound to the server application.

Local development and debugging the Mobile App .NET server backend

Configuring your Mobile App .NET server backend project for local debugging

You need to add some application settings to allow your locally hosted .NET backend server to validate tokens from App Service Authentication and Authorization.

  1. Browse to your website SCM endpoint (https://{yoursite}.scm.azurewebsites.net/).

  2. Click the Environment tab on the top bar. Local development and debugging the Mobile App .NET server backend

  3. Search for the app setting WEBSITE_AUTH_SIGNING_KEY and copy the value.

  4. Open your Mobile App .NET server backend project Web.Config.

  5. Under <appSettings>, add the following key value pairs.

    <add key="SigningKey" value="{your WEBSITE_AUTH_SIGNING_KEY value}" />        
    <add key="ValidAudience" value="https://{yoursite}.azurewebsites.net/" />        
    <add key="ValidIssuer" value="https://{yoursite}.azurewebsites.net/" />
  6. Run the Mobile App .NET server backend project in debugger. A browser window should pop up, indicating that the application has been deployed to IIS successfully and bound to your Project Url.

Configuring your client project for local debugging

When debugging locally, you can host your server application in IIS and run your client application in a debugger (i.e. Visual Studio, Xamarin Studio, XCode, Android Studio).

The MobileServiceClient must be instantiated to point at the locally hosted server application. The Project Url of your deployed application is the target of your MobileServiceClient. You need to set the AlternateLoginHostproperty so that your client application can communicate with App Service Authentication and Authorization to mint auth tokens. Your Mobile App .NET server backend can decode the tokens because you copied the signing key from your website to the web.config.

Add the following code snippet to your client application App.xaml.cs OnLaunched method, where MobileService is the property that stores the MobileServiceClient:

#if DEBUG  
   MobileService = new MobileServiceClient("{Your Project Ur}]");  
   MobileService.AlternateLoginHost = new Uri("https://{servicename}.azurewebsites.net/");  
#else  
   MobileService = new MobileServiceClient("https://{servicename}.azurewebsites.net/");  
#endif

Testing it all

You can test if you have set up local debugging with the quickstart projects with some modifications to know if authentication is working properly.

Add an API controller to your server project

In your Mobile App .NET server backend project, create a controller that requires authentication to access, and responds with your user information, like below:

using System.Security.Claims;
using System.Security.Principal;
using System.Threading.Tasks;
using System.Web.Http;
using Microsoft.Azure.Mobile.Server.Authentication;
using Microsoft.Azure.Mobile.Server.Config;

namespace yournamespace.Controllers
{
	[Authorize]
	[MobileAppController]
	public class AuthenticatedController : ApiController
	{

		public async Task<ProviderCredentials> Get()
		{
			var claimsPrincipal = this.User as ClaimsPrincipal;
			return await this.User.GetAppServiceIdentityAsync<AzureActiveDirectoryCredentials>(this.Request);
		}

	}
}

Build and deploy that to your local IIS.

Add an InvokeApi method to your client application that can call AuthenticatedController

Implement client login as in the Add authentication to your Windows app tutorial.

Add a button to invoke your api.

In MainPage.cs:

private async void ButtonShowUser_Click(object sender, RoutedEventArgs e)
{
	if (user == null)
	{
		return;
	}
	var result = await App.MobileService.InvokeApiAsync("authenticated", HttpMethod.Get, new Dictionary<string, string>());
	var message = result.ToString();

	var dialog = new MessageDialog(message);
	dialog.Commands.Add(new UICommand("OK"));
	await dialog.ShowAsync();
}

In your Windows Phone 8.1 project MainPage.xaml add a "Show User" button, which will invoke ButtonShowUser_Click:

<Button Grid.Row="3" Grid.Column="0" Name="ButtonLogin" Click="ButtonLogin_Click" HorizontalAlignment="Center">Login</Button>
<Button Grid.Row="3" Grid.Column="1" Name="ButtonRefresh" Click="ButtonRefresh_Click" HorizontalAlignment="Center">Refresh</Button>
<Button Grid.Row="3" Grid.Column="2" Name="ButtonShowUser" Click="ButtonShowUser_Click" HorizontalAlignment="Center">Show User</Button>

Run your app

  • Open Visual Studio in Administrator mode and open your Mobile App .NET server backend project. Run it in debugger.
  • Open another instance of Visual Studio and open your Mobile App client project. Right click the Windows Phone 8.1 app and click "Set as StartUp Project". Run it.
  • The client app should execute in the Windows Phone Emulator.

Local development and debugging the Mobile App .NET server backend

  • Click Login and enter your credentials.

Local development and debugging the Mobile App .NET server backend

  • After logging in, your TodoList should be populated with items.

Local development and debugging the Mobile App .NET server backend

  • Click Show User and observe that the information about your login is returned.

Local development and debugging the Mobile App .NET server backend

Summary

In this post we described how you can set up your development environment to debug your Mobile App .NET server backend using a client application on your network. This helps speed up development and debug time by avoiding the deployment to an Azure website.

Additional reading

The information in the following articles are relevant to the topic touched in this blog post.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.