If you are receiving errors regarding an incorrect key hash when attempting to configure your PhoneGap application for use with the native Facebook Connect plugin (com.phonegap.plugins.facebookconnect) then we hope this guide will help you. Although aimed at PhoneGap applications in particular, the use of keystores and key hashes extends outward to all applications, whether written natively or not.

Any line breaks within the following commands should be ignored and are included for presentation purposes only.


Prerequisites

  • OpenSSL (download here for Windows) (pre-packaged with OS X) – if you are running a 64-bit machine, make sure to grab the 64-bit binaries (x64).
  • keytool – this is packaged as part of Java (download here)
  • PhoneGap Facebook Connect plugin is configured correctly within your app’s codebase. This includes: adding the plugin to your local plugins repository, configuring the plugin with the necessary App ID and App Name values within config.xml, invoking somewhere the Facebook Login prompt from within your app by calling facebookConnectPlugin#login, and declaring the facebookConnectPlugin.js file as a script within index.html.

Generating a Keystore

keytool -genkey -v -keystore <KEYSTORE_NAME>
-alias <ALIAS_NAME> -keyalg RSA -keysize 2048
-validity 10000

Where:

<KEYSTORE_NAME> = the name of the keystore file to be generated
<ALIAS_NAME> = the alias of the keystore file

Prompts:

  1. Enter a password for the keystore.
  2. You will be asked for details such as your first and last name, the name of your organisation, etc. These details are not mandatory and can be left as ‘Unknown’, the default value assigned on pressing enter without input.
  3. Enter a password with which to protect the key. Press enter without input to assign the password used for the keystore.

The keystore file <KEYSTORE_NAME> will be saved to the local directory unless you explicitly specified a different location.


Retrieving Key Hash from a Keystore

keytool -exportcert -alias &lt;ALIAS_NAME&gt;
-keystore &lt;KEYSTORE_NAME&gt; | openssl sha1
-binary | openssl base64

This command will yield a 28 character hash. Use this in your Facebook app’s Settings page, as seen below:


Submitting Key Hash to a Facebook App

Copy and paste the hash that was generated from the last command and place it within the Key Hashes input:

fb hash


Submit Keystore to PhoneGap

To add a keystore to your PhoneGap account follow these steps:

  • Log in to PhoneGap at build.phonegap.com
  • Go to build.phonegap.com/people/edit
  • Click on the Signing Keys tab
  • Under the relevant device select ‘add a key…’
  • Give the key a title (this can be anything)
  • Input the alias of the keystore as defined by the <ALIAS_NAME> parameter in the above commands
  • Choose the file from your filesystem and press ‘submit key’

Add a Keystore to an App

To connect a keystore to a particular PhoneGap app follow these steps:

Firstly, ‘unlock’ the keystore you want to use:

  • Go to build.phonegap.com/people/edit
  • Click on the Signing Keys tab
  • On the right of the keystore press the yellow padlock
  • Enter the certificate password
  • Enter the keystore password
  • Press ‘submit key

Secondly, add this key to the app:

  • Go to build.phonegap.com/apps and select an app by clicking its name
  • Select a keystore from the dropdown menu next the Android icon (as in the image below)
  • Press Rebuild to compile your app using the new keystore

phonegap keystore

– Sam

If you found this helpful and are interested to find out more about the projects we work on, look at joining our team or just want a cup of tea, leave a comment or email us, we’d love to talk to you.

Hiring: we are looking for experienced developers