Babel on Visual Studio AppCenter

Oct 10, 2020

Microsoft Visual Studio AppCenter is the platform to quickly create high-quality apps for Android, iOS, macOS, and Windows. Automate your build, test, and distribution pipelines. And continuously monitor real-time performance. This article will give you a step-by-step guide to create a Xamarin Android application on AppCenter and integrate Babel Obfuscator into the build pipeline.

If you have already configured AppCenter to build your Xamarin application, you can skip to the Add Babel Obfuscator section. The section will describe how to add Babel Obfuscator to the build using the NuGet package.

Create Visual Studio AppCenter App

Login in to your AppCenter account and from the App page add a new application.

Select Android and Xamarin in the list provided for your operating system and platform, respectively. Then press the Add new app button.

Open Visual Studio 2019 on your local machine and create a new Xamarin application named by selecting the Mobile App (Xamarin.Forms) template in the Create a new project panel. 

Select your application template and check Android as a deployment platform.

GitHub Repository

We will use git and GitHub as our source code repository. In the Solution Explorer right-click the solution node and from the popup menu select Create Git Repository… Then open the Team Explorer panel and select Publish to GitHub:

Synchronize your local copy by pushing the solution on the remote GitHub repository.

Go back to AppCenter and connect your application to GitHub on the Connect to Repo page. AppCenter will connect to your GitHub repository asking you to choose the source code repository from those available on your GitHub account. It is possible that GitHub may ask you to authorize AppCenter access to your repositories.

You can add the AppCenter Analytics and Crashes NuGet packages to your solution and initialize AppCenter inside the MainActivity OnCreate method as described in the AppCenter Getting started application page. 

Configure AppCenter Build

Go to the AppCenter Build page and press the “Configure build” button. Leave all the default settings, we will come back here later to add the Babel Obfuscator NuGet package. Run the build. A green checkmark will appear next to the list of active builds to indicate that the build was successful. 

Add Babel Obfuscator

Babel Obfuscator can be added to your solution using the Babel.Obfuscator NuGet package distributed with the Babel Obfuscator Company license.

The Babel Obfuscator NuGet package is not available on the public NuGet repository, so you should upload the package file received when you purchased the license on your private NuGet repository. 
A convenient way to share NuGet packages with AppCenter is to use the Azure DevOps package feed. To know more about how to publish Babel Obfuscator NuGet package on DevOps please refer to the following article Configure Babel on DevOps.

From Visual Studio 2019 in the Solution Explorer, right-click the solution node, and from the popup menu choose Manage NuGet Packages for Solution…

Browse for Babel.Obfuscator and click on all projects you want to obfuscate, then press Install.

To compile the solution, add your Babel license file babel.licenses into the solution folder then add the license file to the solution.

Build the solution. In the Output panel, you can see the Babel Obfuscation log for each project where you added the Babel Obfuscator NuGet package.

Before pushing everything to AppCenter, we must configure NuGet to see the DevOps feeds. This can be done by adding to the solution a NuGet.config file containing the following XML:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <packageSources>
    <add key="nuget" value="https://www.nuget.org/api/v2" />
    <add key="babel" value="DevOps feed URL" />
  </packageSources>
  <activePackageSource>
    <add key="All" value="(Aggregate source)" />
  </activePackageSource>
  <packageSourceCredentials>
    <babel>
      <add key="Username" value="%AZURE_USER%" />
      <add key="ClearTextPassword" value="%AZURE_PASSWORD%" />
    </babel>
  </packageSourceCredentials>
</configuration>

Where “DevOps feed URL” must be the address of your DevOps feed, and the environment variables %AZURE_USER%, %AZURE_PASSWORD% must be set on AppCenter Build configuration.

Inside AppCenter go to Build panel then under Branches click on master. Click the settings icon on the top left.

Enable Environment Variables in the Build Settings and enter the two values for AZURE_USER and AZURE_PASSWORD.

Save your Build settings and push local changes on GitHub. A new build will start on AppCenter pulling the Babel Obfuscator package from the DevOps feed. 

The resulting APK package will contain the project assemblies obfuscated.

Configuring Obfuscation

The Babel Obfuscator NuGet package is configured to perform the obfuscation on the target assembly of the project where is added. You can control the obfuscation by editing the project file, adding Babel related properties to the project configuration. The Babel properties you can set are explained in the Babel Obfuscator user’s guide paragraph “Task Attributes”, which refers to the Babel task used by MSBuild to run Babel Obfuscator. You can find more information about configuring Babel using the NuGet package by reading the Chapter “Babel NuGet Package”.

For instance, in our project, we can add control flow obfuscation by editing the XamBabel.Android project file directly inside Visual Studio. In the Solution Explorer right-click the project node and select Unload Project.

Locate the ProperyGroup related to the Release build and add the following properties:

<ControlFlowObfuscation>if=on;goto=on;switch=on;case=on;true</ControlFlowObfuscation>
<ControlFlowIterations>3</ControlFlowIterations>

To enable control flow obfuscation for the target assembly.

<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' ">
  <DebugSymbols>true</DebugSymbols>
  <DebugType>portable</DebugType>
  <Optimize>true</Optimize>
  <OutputPath>bin\Release</OutputPath>
  <ErrorReport>prompt</ErrorReport>
  <WarningLevel>4</WarningLevel>
  <AndroidManagedSymbols>true</AndroidManagedSymbols>
  <AndroidUseSharedRuntime>false</AndroidUseSharedRuntime>
   <ControlFlowObfuscation>if=on;goto=on;switch=on;case=on;true</ControlFlowObfuscation>
  <ControlFlowIterations>3</ControlFlowIterations>
</PropertyGroup>

Save and reload the project. By pushing the changes to GitHub, AppCenter will spawn a new build performing the obfuscation with control flow enabled.

DevOps Personal Access Token

To let AppCenter pull the Babel Obfuscator NuGet package form DevOps feed, you need to get a Personal Access token from DevOps and use it in AppCenter. The AZURE_PASSWORD we set on AppCenter is a Personal Access Token generated on DevOps. This can be created by accessing DevOps User settings, Personal access tokens, New Token.

Pin It on Pinterest

Share This