[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/

[Mac] How to change background images in Terminal.app in Leopard

我前幾天被這個問題所困,讓我花了將近3天的時間一直Google一直找資料,最後皇天不負苦心人,終於讓我找到解法了。

之所以會有這個問題是因為在MAC OS X > 10.4之後的版本,也就是在Tiger後這個功能就被Apple拿掉了,雖然我查了很久但還是不知道為什麼他們要把這個功能拿掉。好啦,廢話不多說,開工的時候到囉。

我們現在要做的事情就是先利用10.4 Tiger時的.term的格式來設定我們的Terminal Appearance,直接參考我找到的設定檔如下:

Continue reading “[Mac] How to change background images in Terminal.app in Leopard”

[Mac] Irssi and Terminal.app problems

最近無聊,所以想說來用一下IRC(Internet Relay Chat)來上一些社群的討論室,結果卻發現了一些問題,就在Google一陣子之後就OK了,所以就把這些可能會遇到的問題記錄一下。

一開始的問題是我不知道為什麼一直連不上irc.freenode.net的Server,一查之下才發現TANet有鎖6667,所以沒有辦法和該Port做連結,所以如果是學術網路的使用者,要記得找一下其他可用的Port來連,才不會一直出現Timeout的情況。

另外一個問題就是,當我在使用Irssi之類的程式時,我沒有辦法用 [fn]+[up] or [fn] + [down] 來控制訊息的呈現,反而會直接捲動整個Terminal.app。這是因為兩個Terminal.app和Irssi各有各自的Buffer,所以我們在做 PageDown or PageUp 的時候會混亂,因此我們可以用預設的Key Mapping:「 [shift] + [fn] + [up] 」 or 「 [shift] + [fn] + [down] 」,如果要改變原本的Mapping方式,就打開偏好設定,修改下圖的地方就可以啦。



大概就是這樣啦,我們下次見。

[Mac] How to enable GD lib ?

意外找到這個開發者寫的pkg檔,真的是一裝就Happy Ending了,省下不少時間,

以下是該pkg檔的特色,記下來給以後有需要的人!!

連結

  • the MySQL and PostgreSQL databases
  • the cURL library for various communications protocols
  • the GD image creation library (with PNG, JPEG, PostScript Type 1 and TrueType font options).
  • the expat XML parser and WDDX support
  • XSLT transformations
  • LDAP access
  • the IMAP client library
  • mcrypt encryption functions
  • GNU gettext

[Mac] dock crash

之前一直常出現一種狀況,就是有時候整個電腦會停住的感覺,不能用cmd+tab去切分頁、dock整個都不會動。

去查了一下原來是Dock crash的問題,在這邊可以利用ps or top command 搭配上 kill去把該process刪掉,而Dock就會自動重啟了。

http://gist.github.com/277106.js?file=gistfile1.sh

因為我是直接grep出來,所以自己的terminal也會被grep到正在做grep Dock的動作,因此只要挑長的像System/Library/CoreServices/Dock.app/Contents/MacOS/Dock -psn_0_4047836的pid就可以了

最後就 kill pid 啦。

2010/01/17✙補充Money說的以process為parameter的另一個指令killall,使用方法如下
http://gist.github.com/279304.js?file=gistfile1.sh

[MAC] vi setting , ls color and alias

今天一個下午都一直在練習用command line的方式去設定一些東西,現在來報告一下今天研究的結果:

1. vi setting:
因為之前一直看到很多人在用vi/vim來開發程式,所以一定要來學一下,因為他有很多很方便的功能可以讓我們輕易上手,提供我們更高的便利性去design a program。因為MAC是based on Darwin 而且有部分的東西是從FreeBSD來的,所以設定的方法和他們一樣。

因為我不想要去動到core的資料,所以從flexibility的角度來說,我希望每個設定是獨立且不會受到影響的,而前輩們早就想到這些東西,就提供了一個方法,可以在不同user的家目錄下這個指令:


vi .vimrc

去設定vi提供的一個user defined的檔案,在這個檔案內做設定,像我就設定成這樣:


syntax on
hi Comment ctermfg = Green
set hlsearch
set expandtab
set shiftwidth=2
set softtabstop=2
set tabstop=2
set cindent
set autoindent
set number

主要是要開啟syntax color,因為打開才看的下去,要不然他原本都是白色的字,看了很難過…我是看不下去啦= =” 所以就改下去了,而hlsearch是對search的結果做highlight的動作,而set number則是顯示行號,其他的就是一些tab寬度、縮排的設定,有需要再自己去找一下相關的設定。

2,3 alias and ls color
alias 在 Yahoo Dictionary 的意思就是:

n. (名詞 noun)
化名;別名
ad. (副詞 adverb)
別名叫;化名為

所以就是可以把已知指令用更簡單的方式來表示,所以我們可以在家目錄找到.profile,就vi它吧!

vi .profile


alias ll="ls -al"
export CLICOLOR=1
export LSCOLORS=dxfxcxdxbxegedabagacad

這邊要注意的就是ailas的等號旁邊是不能有space的,有的話會出問題。而根據FreeBSD `ls’: Colour-coded directory/file listing(s)這篇文章所講的,只要用export CLICOLOR=1,這樣就可以開啟顏色的功能,不過也是可以用 alias ls=”ls -G”,同樣可以達到我們要的效果

The color designators are as follows:
a black
b red
c green
d brown
e blue
f magenta
g cyan
h light grey
A bold black, usually shows up as dark grey
B bold red
C bold green
D bold brown, usually shows up as yellow
E bold blue
F bold magenta
G bold cyan
H bold light grey; looks like bright white
x default foreground or background
Note that the above are standard ANSI colors. The actual display may differ depending
on the color capabilities of the terminal in use.

The order of the attributes are as follows:

1. directory
2. symbolic link
3. socket
4. pipe
5. executable
6. block special
7. character special
8. executable with setuid bit set
9. executable with setgid bit set
10. directory writable to others, with sticky bit
11. directory writable to others, without sticky bit

The default is “exfxcxdxbxegedabagacad”,
for regular directories, black foreground and red background for setuid executables,
etc.

大概就是這樣,看還有想到什麼再來補上!

δ 最新的文章,有為MAC OSX 設計的LS color Picker,有興趣的朋友可以用用看並給我一些建議:P~

[MAC] 建立工作環境

剛上網看了一下文章 , 發現 Leopard 10.5.6 有內建 apache 和 php , 整個就是超合我的工作環境的呀 , 就差要怎麼把他們給用出來啦

第一步要先來到這邊:

sudo vi /etc/apache2/httpd.conf

然後把PHP打開

LoadModule php_module

再來就Restart apache , 就可以寫PHP了!

再回到

/etc

把default的php.ini.default 複製一分出去 , 這樣舊的就可以當備分用

sudo cp php.ini.dafault php.ini

最後再打開網頁共享

系統偏好設定/共享/網頁共享

就可以用上面的路徑去讀我們的網頁啦~

BTW , 我們的網頁存放的資料夾是在

/Users/你的家目錄名稱/sites