tldr; skip to the end for the step-by-step instructions.
I made my first desktop app, using Electron (and Vue).
[And if you don't want to start from scratch, you can use Vue, and the amazing electron vue-cli builder plugin (https://nklayman.github.io/vue-cli-plugin-electron-builder/), which is what I did because I am lazy]
Well, no. You've made the electron app and now you have to code-sign it, unless you don't mind that your users are getting security warnings.
I'm on a mac. The actual code-signing was a pretty easy process once I managed to find the relevant links. With adequate google-fu, you'll find out how to do it without too much fuss. I'll skip past code-signing mac apps, because other folks can tell you how to do that ok.
Trying to code-sign the Windows build of your application from a Mac is dark magic, it turns out, or at least that's the way it seems to be described; lot's of "brew install" this and "source compile" that. You'll find plenty of articles on it. Do they work? Who knows? None of them seem to be saying the same thing, and if they are, I'm certainly not proficient enough to figure out what they're trying to get me to do. And when I do follow those old instructions, it turns out something else breaks or doesn't work. This is rough going. There has to be an easier way, right?
It turns out there are different plugins you can use to compile your source into a nice build. The one that was chosen for me by the Vue Cli was
They have some decent documentation, but as of 2019, some of it gets really confusing really fast. I'm not going to link to the documentation in question, because I'm sure at one point, it was working great. Just like this will probably work great for you in 2019 and maybe not so much in 2023, etc etc.
Here are the steps I took to code-sign a Windows app from a Mac in 2019
- Make a CSR (certificate signing request) using Keychain Access (a program on your mac). Use "Certificate Assistant" from the menu.
- Make sure to select "Save to Disk" for the CSR
- Buy a code signing cert from a cert authority (https://docs.microsoft.com/en-us/windows-hardware/drivers/dashboard/get-a-code-signing-certificate). Use the CSR you generated earlier when it asks you for it.
- Download that cert. Install it in your keychain. (using Keychain Access)
- In Keychain Access, find the cert, and export it as a
- On export, notice that you have an option to supply a password for the cert. You can if you want to, but you can also just hit 'enter' and provide NO password.
- When you build your electron app for windows, specify the path to the
WIN_CSC_LINK=/path/to/your/cert.p12 yarn electron:build --win
Note: in Step 6, you do not need to add a password, but if you do, then in Step 7, you need to also add in the ENV variable of
WIN_CSC_KEY_PASSWORD=YourPassword as well to that command line in order for it to be able to parse the certificate properly.
You should be able to see by looking at the build log that the certificate is signed.
Microsoft Smartscreen doesn't just care that your app is code-signed properly; it's also looking at your reputation. And thus, if your app is new, then your users will likely get a warning screen from Microsoft SmartScreen until your app has proven itself to not be some kind of password-stealing ransomware sleeper agent. The cert is published though, and so this should be the only warning, if any, that you get.