How To Sign PhoneGap Build Apps

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial, we will take a look at how you can sign your app with the PhoneGap build service. We will create a signing key and use the PhoneGap build service to sign our app. The apps built by default by the PhoneGap build service are in debug mode, such apps are not allowed to be uploaded to any app store. To upload your app to any app store you will need to create the release version of your application. This can be done by signing your app.

This tutorial is a part of my Free PhoneGap Build Tutorial Course here.

What Does Signing An App Mean?

Before we dive any deep into signing our app let’s first talk about what signing an app means. Signing an app means exactly what signing a document means, it means that you are authorizing/approving the contents of the document and also that you are the owner of the document. Similarly, when you sign an app you are essentially proving the ownership of the app. So we will take the -debug app file and sign it, this will create a -release app file.

What Does A Digital Signature Mean?

As I mentioned the similarities between physical signature on a paper and a digital signature, but what does a digital signature actually mean. Well, basically you are encrypting your digital goods in this case our application. The way encryption works is that there are two keys. One key is called a private key and another one is called the public key. A special encryption algorithm is used to generate these keys and they are linked to one another in such a way that the value encrypted by private key can only be decrypted by the public key. You can read more about it by searching for public – private key encryption.

Creating A Signing Key For PhoneGap

For signing our application we will need to create a signing key. The signing key is at times is referred to as key certificate or signing certificate. One thing to note here is each platform has different ways of creating a signing key for their app, so we will need to create the signing key for Android, iOS and Windows by their respective methods. Fortunately for us, PhoneGap Build makes it easy for us to sign our app using the PhoneGap Build Dashboard. But we will need to create the three signing keys for the three platforms.

Note: You will need platform specific tools to create signing keys for different platforms. Until now we have been building apps using the PhoneGap Build service which has all the build tools for us, but for creating s signing key you will need to install some tools on your computer.

Creating A Signing key For Android And Signing Android App

Creating A Signing key

Step-1

To create signing keys for Android you will need to have JDK. Installed and it’s path properly configured on your computer.

 

Step-2

Open command prompt in the directory where you want to create the signing key. Then type the following command.

Here the [keystore_name] will be the name of the key file that will be generated so name it something meaningful e.g myApp_key.keystore. Also, make sure you change the [alias_name] to something which is relevant to your app. You can read in detail what each value means from the Android docs here.

After running the above command you will be prompted to set a password.

phonegap sigin app 1

Make sure you write the password down and do not lose the password. If you loose your password you will have trouble in signing you app as well as updating your app in the future.

 

Step-3

Enter all the details that you are prompted for by the keytool next one by one as shown below

phonegap sigining 2

The keytool will ask you for an alias password , hit enter if you want it to be the same as you keystore password. If you choose a different password make sure to note it down as you will need it in the future.

After that, you will have a signing key created with a file extension of .keystore inside the folder in which you have opened the command prompt .

 

Signing Android App

Step-4

Now it’s time for us to submit the key to the PhoneGap Build service. So login to you PhoneGap Build dashboard and go to edit account>signing keys

phonegap signing 3

 

Step-5

Now that you are in the Signing keys section you will have the opportunity to upload keys for different platforms. You can upload the signing key by clicking the add a key button under each platform.  A thing to note here is that the keys that you upload here will be uploaded under your account, meaning that the keys will be available across all apps and won’t be available for just one app.

phonegap build 4

Now we will click on add a key under Android as we will be uploading a key for android.Phonegap signing 5

The Title can be anything you want, make sure you add a descriptive title as this title will be displayed when you choose a key. The alias has to be the same which you entered whlie running the keytool command in step-2.

 

Step-6

Once the signing key is uploaded it will be locked you will need to unlock it, so click on the locked padlock icon.

phonegap signing 7

Here the certificate password is the alias password that you entered in step-3 and the keystore password  is what you entered in step-2. After entering the passwords click on submit key.

This will unlock you signing key for 1 hour, you can now signing apps using this key for the next hour.

 

Step-7

After unlocking the signing key we can now proceed to the actual signing of our app. Go to the apps section and select the app that you wish to sign. Under the build section, you can choose the signing key that you uploaded. After selecting a key PhoneGap build will automatically Rebuild your app for you. After the build process is complete you can download the app by clicking the apk button.

phonegap signing 8

The file downloaded will be signed and be the release version of your app which can be uploaded to any app store.

 

Creating A Signing key For iOS And Signing iOS App

Creating A Signing key

You can read more about creating signing keys for iOSin the cordova platform guide here.

Signing iOS  App

The process of signing iOS apps using PhoneGap build will be the same as that of Android as show above.

 

Creating A Signing key For Windows And Signing Windows App

Creating A Signing key

You can read more about creating signing keys for windows apps in the cordova platform guide here.

Signing Windows App

The process of signing Windows apps using PhoneGap build will be the same as that of Android as show above.

 

Important Tips

Before I conclude this post I want to give you guys a few important tips that I personally use.

  • Make sure to save all the passwords mentioned in this tutorial in a safe place. Signing your app is not a regular thing and chances are that you will forget your password if you have to sign your app again to push an updated version of your app
  • Don’t Lose your signing key. Save your signing key on multiple places and even in the cloud such as dropbox or google drive. If you lose your signing key you won’t be able to update your app
  • Make sure to create a text file when you creating a signing key, in this text file save all the information that you entered in step-3 just in case you need it again.

 

Conclusion

Creating signing key for different platforms requires you to install the development tools and in some cases have a developer account and create a publisher ID. But PhoneGap build makes it easy for us to actually go through with the signing process. As you saw in the tutorial signing an app is a matter of choosing the signing key from the drop down menu and Phonegap build takes care of the signing process for you.

Watch Video Tutorial Here:

 

Full Course Curriculum : Click here

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

  • Pingback: Phonegap Build Beginner Course - pointDeveloper.com()

  • Michael Bilbrough

    Thanks for your informative tutorial, Prantik. You haven’t mentioned offline use of the App. What needs to be done to ensure the App will work offline?

    • The app will work offline without any special code. But it really depends on what you are trying to do with the app, if you have an app that requires to get data from a back-end API then you need the whitelist plugin, which I have shown in another post in the course.

      All in all there is so special code required to create an offline app. You however will need to add plugins to use camera and other offlice features

      The purpose of the entire course is to make learners familiar with the “Build Process” using the phonegap build service.

      -regards

  • Michael Bilbrough

    So if I link to the jQuery library (an Internet source). How will my app subsequently work offline?

    • You app will load in “web-view”..This web-view is responsible for running you html,JS and rendering CSS..This is like running your app in a browser..A web-view nothing but a “view that displays web pages”. This web-view is available in all devices.

      So Your app will run fine offline up to this point.

      But if you decide to use “Native” device features such as camera, Social-Sharing, contacts, etc. The web-view is useless as it’s job is to display web-content. That’s where cordova/phonegap comes in. It provides your web-view handles that it needs to make the device features work.

      Again still you app will work offline even if you are using any device features. But as soon as you decide to make use of the web for whatever reason. Then your app will break.

      When PhoneGap loads the app in a web-view it is not “serving” the app as web server. It is just loading your app inside the web-view as you would load and html,css and js locally by just opening the HTML file and it loads up in the browser.

      Video: https://www.youtube.com/watch?v=8NH0n_k_ymY#t=59

  • Kids Edu

    Hi,

    Can you please let me know how to get “Debug signing certificate SHA-1” or “SHA-1” info for Phonegap Build App, I need this to integrate Firebase.

    Looking forward for your information.

    Regards,
    KD

    • Sure,
      You need to use keytool.exe which will be installed with JDK, Usually it’s found under the C:Program FilesJavajdkbin.

      You can use the following command
      keytool -exportcert -list -v -alias -keystore

      This will prompt you for your keystore passowd after which it will generate SHA-1 and SHA-256 fingerprints that you can use with firebase.

      See guide here https://developers.google.com/android/guides/client-auth

      Hope it helped.

      -Prantik

      • Kids Edu

        Hi Prantik,

        Thanks for your time and reply. I really appreciate your effort and time spent by you to reply my question.

        People like you who dont mind to spend their valuable time to help/educate other user are extremely valuable for internet community.

        I was able to get SHA-1 key using OpenSSL Tool in Window.. I have given details on how I got that, so that it would be useful for other users.

        This is how I Obtained sha1 & sha256 info using OpenSSLTool in Windows (http://slproweb.com/products/Win32OpenSSL.html)

        *** open cmd as adminstrator**

        cd /
        [hit enter]

        cd OpenSSL-Win64
        [hit enter]

        cd bin
        [hit enter]

        openssl
        [hit enter]

        Above steps will make path in CMD like OpenSSL>

        [type]
        dgst -sha1 ______.keystore

        [Note: before this step ______.keystore was placed in this path “C:OpenSSL-Win64bin”]

        [type]
        dgst -sha256 ______.keystore

        [Note: before this step ______.keystore was placed in this path “C:OpenSSL-Win64bin”]

        Right click and click mark > hit enter to copy code
        or
        Click CMD title and click edit to copy code

        -Regards,
        Venky

        • Thanks for the kind words. Good to know that the effort I put is being appreciated. 🙂

%d bloggers like this: