[Electron] How to codesign your Mac app

Image Credit

codesign

Introduction

Recently, Electron desktop application gets hot and popular among developers. It’s easy for developers to quickly mockup a desktop application and distribute it to three different platform with zero efforts ! (This is really a lie after I made another popular open source project called Kaku with the same tech.)

Ok back to topic, for companies who want to distribute their desktop apps to the world, they must codesign the application first ! The reason why this is important is because if you don’t do so, if the user enable gatekeeper by default, the application will be blocked due to unidentified developer and users will not be able to open it !

unidentified_developers

security_preferences_options

So in this article, I’ll try to share some my experiences about how to do the codesign for Mac app and what’s going on behind the problems.

TL;DR

Thanks to Marco Pracucci who wrote some useful details in his post, you can just follow these simple steps to do codesign :

  1. Get a Developer ID certificate from Apple and install it into your Mac’s Keychain
  2. Sign your application bundle codesign --deep --force --verbose --sign "<identity>" Application.app
  3. Verify the signature codesign --verify -vvvv Application.app and spctl -a -vvvv Application.app

Note: The identify here is the id wrapped inside the parentheses that you can get from keychain like the screenshot below:

keychain

But … the world sucks

The first problem I have encountered is version problem.

After codesign the app on my laptop (running 10.11.4) and share this app to my team members to test with, for those who are using 10.10.x, they will not be able to use the app and the gatekeeper’ll keep complaining something like the image below : 

vectr_damaged

But for the others who are using 10.11.4, the app is working well on their laptops (WTF???)

After googling a while, I finally found a discussion thread here on GitHub talking about this ! If you codesign your application on 10.11.4 , you’ll successfully get it codesigned and usable BUT for users who are using 10.10.x (to be specific those who use laptops <10.11.3) will have problems when opening that app.

From the discussion thread, we can learn that there are something changed from 10.11.3 to 10.11.4. If you want to hack that around by yourself, you’ll need to follow the steps here. But for me, I use electron-packager, so if you are using that too, you can just upgrade to 6.0.0+ because they already handle that for you on that version with zero efforts !

How to verify your app

  • codesign
    • This tool is not only for doing the codesign, but also you can use it to verify whether it’s well signed or not. After running it, you can get things like this :

https://gist.github.com/EragonJ/cc16613280384b0bf4bda36f1e761171

  • spctl
    • For this tool, this is mainly used to see whether your codesigned application will be blocked by gatekeeper or not, if you didn’t get anything wording like accepted, your application will always be blocked or treated as damaged by gatekeeper, so it’s really important to use this tool to do the check every time when you create the new application.
    • Note: If you are using Apple Developer ID certificate to build you application and be distributed by yourself, Remember to change your [System] > [Privacy] to “Mac App Store and Identified developers. Otherwise, you will keep getting rejected information.

https://gist.github.com/EragonJ/36f31b2b1f0659e95ef4fdab6b2e9a02

How to test

You can check details here from Apple’s documentations, but I’ll still copy some here.

  1. To disable Gatekeeper using the spctl command
    • $ sudo spctl --master-disable
  2. To confirm that Gatekeeper is enabled using the spctl command
    • $ spctl --status
      • If enabled, you will get assessments enabled
      • If disabled, you will get assessments disabled
  3. To test your Developer ID-signed app
    1. Make sure your gatekeeper is enabled by follow above ways.
    2. Email your Developer ID–signed app to yourself and use the copy that Mail downloads to trigger the dialog.
    3. Host your Developer ID–signed app on your own local or remote server and use the copy that Safari downloads to trigger the dialog.
    4. By doing so, your gatekeeper will be triggered correctly !

Troubleshooting

A) My certificate on keychain keeps showing expired

This problem is critical and annoys developers who are not familiar with Apple certificate things (like me !) When working on the codesign feature, I noticed that no matter how hard I re-install the certificate that I download from Apple, it will keep showing expired with no reason !

After trying and discussing this with one of my iOS friend, we finally realized it’s related to this notice ! For someone (not sure who, but including me), the Apple Worldwide Developer Relations Certification Intermediate Certificate is going to expire on Feb 14, 2016 which will cause the problem to make your certificate keeps expired.

What you need to take action here is to renew the this core certificate and try to re-install (or re-create) your developer certificate again and things will be solved … WTF !!

B) Where to find my certificate ?

For most of people, if you are writing desktop application by Electron, normally you’ll distribute your application by yourself (like us). But, I noticed that it’s really frustrating to figure out how to get that Developer ID Certificate !!

I have tried several times from https://developer.apple.com, but there is nothing related to Developer ID Certificate (or maybe it’s mainly because I am using different role, so it’s not showing up ?) ! After reading tons of articles, I finally realized that it’s inside Xcode !! You can check the screenshot below :

issue_certificate

But you can notice that the buttons are grey and is not clickable. That’s mainly because the role is wrong !! Even if you are admin role, you still can’t generate that ! Only Team Agent can do that ! So if you are developer or admin, Go ask your leader for that and tell him/her to press the button above to create the certificate for you.

After getting the certificate (it will be name like this xxxxxxx.p12), you can just double-click the file and install into your keychain. Remember, always keep them private 🙂

Note: Only the first one who made the certificate and uploaded to Apple Developer can have this .p12 file. This will only exist on his own keychain and you can’t even get it from Apple Developer. So remember to ask him to export that p12 file and share with the whole team ! Remember, if you lost this .p12 file, no one can save you and you need to regenerate another certificate again.

Last few words

It’s really a hard time to fight with codesign stuffs especially there are less resources talking about this. But whatever, I wrote them down already !! If this article does help you, please feel free to share !

And also, if there is anything wrong or missing in the article, feel free to tell me and I’ll update it ! See you guys next time 🙂

Reference

  1. https://pracucci.com/atom-electron-signing-mac-app.html
  2. https://github.com/electron/electron/issues/4899
  3. https://goo.gl/ZgKXr1
  4. https://developer.apple.com/support/certificates/expiration/

[Hack] We are Atraci

Image Credit

Check the repository here

Stories

Few months ago, on HackerNews, I noticed there is one news talking about a desktop application called HipHop. I was curious what it was at the first glimpse, but just after using it, I was becoming one of the maintainers. As you may see, it is an music application written based on node-webkit and can be used on Windows, Linux and Mac OSX.

But sadly, because at the first, HipHop would hide the video and it would break Youtube’s ToS. In this way, HipHop was forced (?) to be taken down. And then after a while, another maintainer helped to move the code out and show the video on the application to avoid breaking ToS, and this brand-new application is called – Atraci.

So yeah, this is just a basic story about Atraci and I am currently active on this project and try to make it better to use. Hope one day this application can compete with the other applications like Spotify.

What I Learned

  1. You have to spread your investments out. Remember to share your resources with the others because you may get absent one day with any reason.
  2. It takes a lot of efforts to co-work with others.
  3. If you want to make your application cross platforms based on node-webkit, you have to make sure you have enough platforms to test with your application.

For note one, you would never know what would happen tomorrow especially in open source. For example, one of our core maintainer has to join the military services for some reasons accidentally and He is the only one who controls the domain name, s3 server and has privileges to add others into Slack. So, after he went to the army, no one can control all of them and the only way to fix this is to make a new one. This would definitely hurt experiences for users and I can’t do anything on this. All I can do is trying to transfer all of them back to Github gh-pages and maintain there. So if possible, please make sure there is always another one who can do the same thing like you.

For note two, because it’s an open source community, you can’t control too much on the skills and their habits. So its takes time to co-work with them. All you can do is trying to make some principles and tools for you like linters or something else. You need machines to help you control these stuffs because you would never know what you missed when writing codes.

For note three, this is kinda annoying too. In order to cross platforms, you rely on node-webkit to help you overcome this shit. But, sadly, there is always some fucking weird problems that you would never know and would happen only on specific platform. Because I only use Mac, so I can’t make sure the application would work on Linux and Windows, this is really scary if you are going to release builds that you have never tested on.

So after a while, I found another maintainer who can take care of Windows and Linux and I would focus on Mac and Linux. This decision really helps and makes the program better.

Some words

Except above notes, there is one more thing I need to share. Always respond quickly and don’t be afraid to make mistakes. In Atraci, there are always bugs coming up and need people to fix. All I can do is respond quickly to make them feel they are noticed, and trust me, this definitely works all the time.

Hope this helps for you guys. Stay tuned with my next post 🙂