Implement Push Notifications for android and iOS (phonegap) – part 2

In the 1st Part we prepared required key for android. In this we’ll start adding for ios . This tutorial is only for those using mac or hackintosh OS.

Open Keychain Access. Then go to Keychain Access > Certificate Assistant > Request a Certificate From a Certificate Authority.

keychain access

keychain access

Enter certificate information on following details, User Email Address, Common Name and  CA Email Address. Then click Continue.

certificate information

certificate information

Click Save.

CertificateSigningRequest

CertificateSigningRequest

Go to Keys category and select IonicPush private key. Right click and export the key.

export private key

export private key

Save as IonicPushKey.

export private key

export private key

Enter your password that will be used to protect the exported key. Click OK.

password p12 key

password p12 key

Enter your machine password and click Always Allow.

password p12 private key

password p12 private key

Firstly you need to have apple developer account for this tutorial. You can register here, https://developer.apple.com/register/index.action .It costs $99 per year.

register as apple developer

register as apple developer

After you registered, you may login into apple developer site, https://developer.apple.com/devcenter/ios/index.action .

iOS Dev Center

iOS Dev Center

Then go to member center page, https://developer.apple.com/membercenter . Choose Manage your certificates, App IDs, devices, and provisioning profiles.

Member Center

Member Center

Choose Certificate under iOS Apps.

Certificates, Identifiers & Profiles

Certificates, Identifiers & Profiles

Click Add icon on right top to create a new iOS certificate for iOS App Development.

iOS Certificates

iOS Certificates

Select iOS App Development and click Continue.

Add iOS Certificate

Add iOS Certificate

Click Continue.

create a CSR file

create a CSR file

Choose file.

upload a CSR file

upload a CSR file

Select CertificateSigningRequest.certSigningRequest file that you already generate it from previous step.

CertificateSigningRequest.certSigningRequest

CertificateSigningRequest.certSigningRequest

Then click Generate.

generate iOS certificate

generate iOS certificate

Click Download. Click ios_development.cer file and will show up inside your keychain access.

download iOS certificate

download iOS certificate

Go to Identifiers > App IDs. Click add icon to add identifier app id.

iOS App ID

iOS App ID

Enter App ID Description.

App ID Description

App ID Description

Scroll down and select Explicit App ID. Enter your bundle ID.

App ID Suffix

App ID Suffix

Scroll down and tick Push Notifications under App Services. Then click Continue.

App Services

App Services

Click Submit to confirm.

iOS App ID

iOS App ID

Click Done.

iOS App ID

iOS App ID

Then Add iOS certificate one more time. This time we create iOS certificate for Apple Push Notification service SSL (Sandbox). Select Apple Push Notification service SSL (Sandbox). Then click Continue.

Apple Push Notification service SSL (Sandbox)

Apple Push Notification service SSL (Sandbox)

Select com.revivalx.ionic.push and click Continue.

Add iOS Certificate

Add iOS Certificate

Click Continue.

About Creating a Certificate Signing Request (CSR)

About Creating a Certificate Signing Request (CSR)

Choose CertificateSigningRequest.certSigningRequest from previous step.

upload a CSR file

upload a CSR file

Click Generate.

generate iOS certificate

generate iOS certificate

Click Download and Done.

Apple Development iOS Push Services: com.revivalx.ionic

Apple Development iOS Push Services: com.revivalx.ionic

You will see your APNS certificate already there.

iOS Certificates

iOS Certificates

To make sure your app correctly configureable with APNS, go to Identifiers > App IDs and select IonicPush. You will see your Push Notifications (Development) is green light indicator. If yellow it means you incorrectly setup your APNS iOS certificate.

iOS App IDs

iOS App IDs

Then go to Devices > All to setup your device. Click Add icon to add your device.

iOS Devices

iOS Devices

Enter your device name and UDID. If you don’t know how to get your UDID number, you can refer to this website.

http://www.wikihow.com/Obtain-the-Identifier-Number-(UDID)-for-an-iPhone,-iPod-or-iPad

Click Done to finish.

Add iOS Devices

Add iOS Devices

Now you need Provisioning Profiles to make sure your app can be run on your device. Go to Provisioning Profiles > Development and click Add icon.

iOS Provisioning Profiles

iOS Provisioning Profiles

Select iOS App Development and click Continue.

Add iOS Provisioning Profile

Add iOS Provisioning Profile

Select com.revivalx.ionic.push and click Continue.

Add iOS Provisioning Profile

Add iOS Provisioning Profile

Select iOS Development certificate and click Continue.

Add iOS Provisioning Profile

Add iOS Provisioning Profile

Select your devices and click Continue.

Add iOS Provisioning Profile

Add iOS Provisioning Profile

Enter profile name and click Generate.

Add iOS Provisioning Profile

Add iOS Provisioning Profile

Click Download to get your provisioning profile. Click the provisioning profile to install. Then click Done.

Add iOS Provisioning Profile

Add iOS Provisioning Profile

Your provisioning profile.

iOS Provisioning Profiles

iOS Provisioning Profiles

Making a PEM file.

So now you have three files:

  1. The CSR
  2. The private key as a p12 file (IonicPushKey.p12)
  3. The SSL certificate, aps_development.cer

Open your terminal or command prompt. Convert the .cer file into a .pem file using this command.

openssl x509 -in aps_development.cer -inform der -out IonicPushCert.pem

Convert the private key’s .p12 file into a .pem file.

openssl pkcs12 -nocerts -out IonicPushKey.pem -in IonicPushKey.p12

Finally, combine the certificate and key into a single .pem file

cat IonicPushCert.pem IonicPushKey.pem > ck.pem
Making a PEM File

Making a PEM File

At this point it’s a good idea to test whether the certificate works. Execute the following command:

telnet gateway.sandbox.push.apple.com 2195

This tries to make a regular, unencrypted, connection to the APNS server. If you see the above response, then your Mac can reach APNS. Press Ctrl+C to close the connection. If you get an error message, then make sure your firewall allows outgoing connections on port 2195.

Let’s try connecting again, this time using our SSL certificate and private key to set up a secure connection:

openssl s_client -connect gateway.sandbox.push.apple.com:2195 
    -cert PushChatCert.pem -key PushChatKey.pem

You should see a whole bunch of output, which is openssl letting you know what is going on under the hood.
If the connection is successful, you should be able to type a few characters. When you press enter, the server should disconnect. If there was a problem establishing the connection, openssl will give you an error message but you may have to scroll up through the output to find it.

Next tutorial will be push notifications integration for android and iOS. http://blog.revivalx.com/2014/11/14/implement-push-notifications-for-android-and-ios-phonegap-part-3/

17 thoughts on “Implement Push Notifications for android and iOS (phonegap) – part 2

  1. HI thanks for those good tutorials,
    I have followed this tutorial about android GCM, and need the push notification integration tutorial part
    Best regards

  2. looks like the connection with SSL certificate and private key is not correct in the tutorial…
    it should be:

    openssl s_client -connect gateway.sandbox.push.apple.com:2195 -cert IonicPushCert.pem -key IonicPushKey.pem

  3. Hi All,
    I have run below command on Terminal.
    “openssl s_client -connect gateway.sandbox.push.apple.com:2195” and I got this out put : “CONNECTED(00000003)
    depth=1 /C=US/O=Entrust, Inc./OU=www.entrust.net/rpa is incorporated by reference/OU=(c) 2009 Entrust, Inc./CN=Entrust Certification Authority – L1C
    verify error:num=20:unable to get local issuer certificate
    verify return:0
    3667:error:14094410:SSL routines:SSL3_READ_BYTES:sslv3 alert handshake failure:/SourceCache/OpenSSL098/OpenSSL098-50/src/ssl/s3_pkt.c:1106:SSL alert number 40
    3667:error:140790E5:SSL routines:SSL23_WRITE:ssl handshake failure:/SourceCache/OpenSSL098/OpenSSL098-50/src/ssl/s23_lib.c:182:”

    but when I am running below command then I am getting this error

    “openssl s_client -cert IonicPushCert.pem -key pushtestkey.pem”
    Error : “connect: Connection refused
    connect:errno=612”

    Thanks and Regards
    Ashwin Bhayal

  4. Thanks for the great tutorial.

    I have Ionic installed, my app is running and everything is working fine. I am trying to implement Push Notifications as described here. But I don’t have an IonicPush private key in the keychain?!

    What have I missed?

    Thanks in advance!

  5. Sorry, please delete the last comment I’ve written. I am really stupid, I’ve used a different “CommonName”. 😉

  6. Hmm it looks like your site ate my first comment (it was super long) so I guess I’ll
    just sum it up what I submitted and say, I’m thoroughly enjoying your blog.
    I too am an aspiring blog writer but I’m still new to
    everything. Do you have any tips and hints for rookie blog writers?
    I’d genuinely appreciate it.

Leave a Reply

Your email address will not be published. Required fields are marked *