Electron应用代码签名及打包

Electron应用内更新
本文参考:
electron-builder
https://segmentfault.com/a/1190000012902525
https://kilianvalkhof.com/2019/electron/notarizing-your-electron-application/

项目中引入electron-builder

  • 在package.json添加build块
  "build": {
    "productName": "啥㕣啥",
    "appId": "org.dignyue.write_helper_mazimao",
    "directories": {
      "output": "build"
    },
    "publish": [
      {
        "provider": "generic",
        "url": "https://shashasha.com/download/"
      }
    ],
    "files": [
      "dist/electron/**/*"
    ],
    "electronDownload":{
        // 解决第一次打包慢,或被download electron卡住
        "mirror":"https://npm.taobao.org/mirrors/electron/"
    },
    "dmg": {
      "background": "build/icons/background.png",    // dmg安装时的背景
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns",
      "artifactName": "${productName}_mac_${version}.${ext}",
      "target": [
        "dmg",
        "zip"
      ]
    },
    "win": {
      "icon": "build/icons/icon.ico",
      "artifactName": "${productName}_windows_${version}.${ext}",
      "target": [
        "nsis"
      ]
    },
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "runAfterFinish": true,
      "deleteAppDataOnUninstall": true,
      "installerIcon": "build/icons/icon.ico",
      "uninstallerIcon": "build/icons/icon.ico"
    }
  },

此时mac打包会出现以下提示


MAS构建需要签名

signing is required for mas builds. Provide the osx-sign option, or manually sign the app later.
MAS构建需要签名。提供OSX签名选项,或稍后手动签名应用程序。

kipped macOS application code signing reason=cannot find valid "Developer ID Application" identity or custom non-Apple code signing certificate
跳过的MacOS应用程序代码签名 原因=找不到有效的“Developer ID Application”标识或自定义非Apple代码签名证书

代码签名

1. 使用X-code进行mac版本上代码签名

使用X-code进行mac版本上代码签名
如果没有登录的话,先登录Apple ID,注意一定要登录开发者账号
创建Developer ID Application证书,并添加到钥匙串中
在钥匙串中可以看到刚添加的证书

2. 根据证书生成密钥到本地

生成密钥到本地
保存到本地
设置密钥的密码

3. 设置全局变量

sudo vim ~/.bash_profile
export CSC_LINK=/Users/.../cat.p12  // 那会密钥保存的位置
export CSC_KEY_PASSWORD=xxxx  // 那会设置的密钥密码
source ~/.bash_profile
env
> // 输入本地所有环境变量,看到有CSC_LINK和CSC_KEY_PASSWORD就设置成功

4. 打包

打包成功

看到以上文字,说明打包成功

可能会出现的问题

  • 反复弹出 “"Mac OS X"想要进行更改。键入管理员的名称和密码以允许执行此操作("Mac OS X"想使用系统钥匙串)”
    处理
  • 打包出现
Error: Command failed: codesign --sign 8xxxxxxxxxxxxxxxxxxxxxxxxxxxx2 --force --keychain /private/var/folders/m_/.../Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework
/Users/.../Frameworks/Electron Framework.framework/Versions/A/Electron Framework: signature too large to embed (size limitation of on-disk representation)

签名太大而无法嵌入,与系统和xcode版本有关。修改electron-osx-sign/sign.js文件

    var args = [
        '--sign', opts.identity.hash || opts.identity.name,
        // '--timestamp=none',  // 尽量不使用此项,因为在这种情况下,当证书过期时,应用程序将无效, by dpy
        '--signature-size=9216',   // 我们的证书大小为4k多, by dpy
        '--force'
    ]
  • 如果都配置好了,还是提示找不到证书,可能是vscode有缓存,重启vscode即可(有时需要重启电脑)

  • 有了密钥,第二个设备再使用,只需要把 .p12的密钥导入第二个设备的钥匙串中,并设置全局变量即可

  • 如果项目有其它功能(如自更新,基于electron-updater)还需要使用密钥,需要
    a. 把 .p12打进项目里,最好不要放入asar里,因为脱离了election内部的环境会找不到
    b. 设置临时全局变量,process.env.CSC_LINKprocess.env.CSC_KEY_PASSWORD,为了保证安全,最好用的时候再设置,用完再删除

打win包(兼容32位)

项目中引入 electron-packager

Windows(win32对于x86,x86_64和arm64体系结构,也称为)
macOS(也称为darwin)/ Mac App Store(也称为mas
Linux(用于x86,x86_64,armv7l,arm64和mips64el体系结构)

  • 添加 build.config.js
const path = require('path')
module.exports = {
  arch: 'x64',
  asar: true,
  dir: path.join(__dirname, '../'),
  icon: path.join(__dirname, '../build/icons/icon'),
  ignore: /(^\/(src|test|\.[a-z]+|README|yarn|static|dist\/web))|\.gitkeep/,
  out: path.join(__dirname, '../build'),
  overwrite: true,
  platform: process.env.BUILD_TARGET || 'all'
}
  • 在 /.electron-vue/build.js 中
const packager = require('electron-packager')
const buildConfig = require('./build.config')
...
  m.on('success', () => {
    process.stdout.write('\x1B[2J\x1B[0f')
    console.log(`\n\n${results}`)
    console.log(`${okayLog}take it away ${chalk.yellow('`electron-builder`')}\n`)
    // process.exit() 注释掉这一行
  })
...
// 添加 bundleApp 方法
function bundleApp () {
  packager(buildConfig, (err, appPaths) => {
    if (err) {
      console.log(`\n${errorLog}${chalk.yellow('`electron-packager`')} says...\n`)
      console.log(err + '\n')
    } else {
      console.log(`\n${doneLog}\n`)
    }
  })
}

.
.

WIN签名参考、mac公证
Electron应用内更新

你可能感兴趣的:(Electron应用代码签名及打包)