The PhoneGap Build “Access Origin” Problem

PhoneGap build makes it easy to create a PhoneGap application without needing to run PhoneGap locally on your own machine.  It does this by combining many of the configuration and plugin settings into a single configuration XML file.  The downside of this is that some of the options are more limited than they would be with standard PhoneGap.

One of these options is “Access Origin”.  This specifies which URLs are allowed to be accessed from within PhoneGap.  Other URLs are either opened in the phone’s standard browser or are denied altogether depending on the call type and access settings.  The problem is that currently iOS and Android builds handle things a little bit differently when it comes to access.    Apparently there is no combination that allows for some URLs to display in the PhoneGap app while others display using an external browser on both iOS and Android.

There are some workaround solutions to this:

  • Have all external links display in the same manner, either in the app or in a browser.  This is not ideal but is a simple solution
  • Create a different config.xml file for iOS and Android builds.  This eliminates the advantage of having a single build for all platforms.
  • Use a plugin such as ChildBrowser to open external links in a browser.  Requires additional configuration.

iOS Device Provisioning

There are a few steps to adding a new iOS device to a PhoneGapBuild project.

  1. Get the iOS device UDID. Here is a tutorial on getting the ID out of iTunes http://whatsmyudid.com/
  2. Add the Device to the devices list in the iOS Developer Portal at https://developer.apple.com/account/ios/device/deviceList.action
  3. Once the device is added, you need to edit the appropriate Provisioning Profile in the iOS Developer Portal make sure the new device is selected to be included in the profile.
  4. After saving the updated Provisioning Profile you will be able to download it.
  5. The new profile needs to be added to the Signing Key in PhoneGapBuild. See this post for instructions on adding a Signing Key in PhoneGapBuild

PhoneGapBuild iOS Signing Keys

Here are instructions to adding a Signing Key to PhoneGapBuild.

  1. Once signed into PhoneGapBuild navigate to the Edit Account section. This can be found by clicking the person icon in the top right of the site.
  2. Under Edit Account go to Signing Keys
  3. Click the Add a Key button under iOS ( Unfortunately there is no way to Edit an existing key, so if that is your intention I usually just delete and recreate the key)
  4. Give the Key a title
  5. Add your iOS p12 certificate and provisioning profile to the signing key (You can download these from the iOS developer center)
  6. Submit the key
  7. Once it is submitted, it will be added, but locked. Click the lock button and input the p12 certificate password (this was created when you generated the certificate)
  8. Navigate back to your PhoneGapBuild project. You should now see the Signing key in the dropdown next to the iOS build.
  9. Select the Signing key and re-build the project

Get the Android SDK & Phonegap to work

Getting the create Command to Work on PhoneGap 2.x Android. Huge thanks to Simon MacDonald

Start with the PhoneGap setup documentation here:

http://docs.phonegap.com/en/2.7.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android

Then fix it here:

http://simonmacdonald.blogspot.ca/2012/11/getting-create-command-to-work-on.html

If I only knew this sooner

Things that it would have been nice to know:

  1. Android package names can only contain letters & periods. NO NUMBERS or SPECIAL CHARACTERS
  2. PhoneGapBuild Keys cannot be edited or deleted, so be precise and descriptive in your naming conventions
  3. It is important for us to decide on a good structure for application versions/environments. Managing multiple installs on multiple devices, pointed at multiple server environments

Creating your .keystore file to sign your Android APK

The APK signing process for android, although much simpler than iOS IPA signing, can still be another challenge for first time app developers. Again, it’s all about finding the right starting point, and syntax.

To Create our keystore We will use the keytool.exe included in the Java JDK. Open a command-line and navigate to your Java bin directory. For Windows 7, mine is located at
C:Program Files (x86)Javajre7bin
Next, run the following command. Be sure to replace the NAME & ALIAS with your values.
keytool -genkey -v -keystore [NAME HERE].keystore -alias [ALIAS NAME HERE] -keyalg RSA -keysize 2048 -validity 10000
The keytool will prompt you for the other required information for the keystore, Like Name, location, and password, but it’s all very basic.

That’s it. The .keystore file will be placed in your java bin directory, and you’re ready to go.

Sign iOS apps on a PC

The following information can be used to create profiles and certificates on a PC to sign a iOS app. Info in this post was taken from a great playlist of video instructions found at http://www.youtube.com/playlist?list=PL57C122F59F8F1A43

These operations require OpenSSL Fow Windows. You can get this at http://slproweb.com/products/Win32OpenSSL.html Download & install the Win32 or Win64 OpenSSL Light Client.

VARIABLES TO FIND/REPLACE
##PATH_TO_OPEN_SSL_BIN## - Ex: C:OpenSSL-Win64bin
##KEY_NAME## - Ex: reUrgencyMobileApp
##CONTACT_EMAIL## - Ex: apps@reUrgency.com
##CONTACT_NAME## - Ex: John Doe
##ENVIRONMENT## - Ex: Dev

Open a Command Prompt & cd to your OpenSSL bin directory

Run the following command to set your OpenSSL config path:

set OPENSSL_CONF=##PATH_TO_OPEN_SSL_BIN##openssl.cfg

Run the following command to create your Application Key

openssl genrsa -out ##KEY_NAME##.key 2048

Run the following command to create your Certificate Signing Requuest

openssl req -new -key ##KEY_NAME##.key -out ##KEY_NAME##_CSR.certSigningReq­uest -subj "/emailAddress=##CONTACT_EMAIL##, CN=##CONTACT_NAME##, C=US"

Run the following command to create your Signing Profile

openssl x509 -in ##KEY_NAME##_##ENVIRONMENT##.cer -inform DER -out ##KEY_NAME##_##ENVIRONMENT##.pem -outform PEM

Run the following command to create your .p12 signing certificate

openssl pkcs12 -export -inkey ##KEY_NAME##.key -in ##KEY_NAME##_##ENVIRONMENT##.pem -out ##KEY_NAME##_##ENVIRONMENT##.p12