Electron MacOs 打包簽名公證（保姆級別）

前述1

MacOS 10.15 之前，應用如果沒有進行簽名，首次打開的時候就會出現“惡意軟件”提示。
首先你要有一個蘋果開發者賬號交完年費的那種
arm64（M系列芯片）架構打包需要增加兼容 x86 處理
開發者證書慎重申請，Developer ID Application 這個證書申請一個就夠了，其他證書可以刪除這個得發郵件給蘋果刪除

前述2 證書介紹

　　登錄蘋果開發者中心（https://developer.apple.com）Account首頁，即有Certificates、Identifiers & Profiles項，管理蘋果開發者賬號的相關證書。進入頁面後，左側功能樹共分爲5組：Certificates、Keys、Identifiers、Devices、Provisioning Profiles。

Certificates：管理Development、Distribution、Push Development、Push Services證書，證書均以.cer結尾，創建後可以download，雙擊直接安裝到鑰匙串即可使用。（這個是最重要的）Tips：開發證書、發佈證書生成數量有限（申請一個就夠了刪除困難需要發郵件給蘋果來申請刪除），如需多人使用，建議由一人生成一組證書，然後導出.p12文件給其他成員使用即可，避免證書太多，管理混亂造成xcode配置方面的問題。若出現Maximum number of certificates generated的提示，revoke掉無用的證書。

Identifiers：主要是添加應用的 AppId

Devices：管理調試設備的udid，一個賬號可以添加100臺設備，可以使用（www.pgyer.com/udid）來獲取udid或使用iTunes來獲取udid，設備別名儘量寫清楚哪臺機器，以備以後刪除。

Provisioning Profiles：描述文件的作用是描述了可由哪臺電腦，把哪個APP安裝到哪臺手機上面。一個描述文件包含App ID、Devices、Certificates，類型分Development、Distribution兩種。

一、申請證書

證書多且重要且容易混亂，所以，找一個位置，新建一個文件夾來存放這些證書吧！比如新建一個名爲 cerCenter 的文件夾。

申請一個本地證書

訪達-其他-鑰匙串訪問選擇從證書助理-從證書頒發機構請求證書...

第一欄寫可用的電子郵箱（我的開發者賬號就是郵箱）；第二欄寫名稱方便後期分辨這個證書；第三欄 CA 不用寫；第四欄選擇存到硬盤；

下一步成功後，將證書保存到新建的證書文件夾 cerCenter

下面我們會用到這個證書，來從 https://developer.apple.com/account/resources/certificates/list 申請下來重要的證書

打開 https://developer.apple.com/account/resources/certificates/list 左側菜單欄切換到 Certificates

點擊加號，選擇 Developer ID Application 增加一個證書

點擊 Choose File 來添加我們在步驟1申請的本地證書，之後我們所有的證書都要用到本地證書申請。

成功之後就可以下載證書了，把這個證書也存放到新建的證書存放文件夾吧！（黃色箭頭提示這個版本之後需要公證，紅箭頭點擊下載）

把證書添加到鑰匙串：鑰匙串左側先選擇登錄；雙擊剛剛下載的證書，即可添加到鑰匙串；右擊選擇顯示簡介-信任-始終信任；

導出簽名/公證需要的 p12 證書：右擊鑰匙串中的證書 - 導出....... - （存儲爲<自定義個名字比如 myP12Cer >；文件格式：個人信息交換(.p12)）,存放位置還是選擇我們新建的證書文件夾 cerCenter ；之後配置環境變量會用到它的路徑！自此證書申請完畢，下面開始 Identifiers（填寫一個 AppId） Devices（配置本機信息）

Identifiers 配置 AppId

再打開蘋果開發者中心，證書&描述，選擇左側菜單 Identifiers，點擊加號 - 選擇 App IDs

應用描述隨便寫一個，Bundle ID （Explicit）就是 AppId ，自定義一個 AppId -- 下一步 Continue

Devices 把下圖中三個對勾的寫入第一個選擇 macOS 第二個取一個名稱第三個在關於本機系統信息中找；

自此所需要的資源準備完畢！下面開始本地配置信息

二、本地配置證書信息

輸入 sudo vim ~/.bash_profile 來打開配置文件
按 i 進入編輯狀態
輸入變量：CSC_KEY_PASSWORD 密碼沒有設置可以不填寫

export CSC_LINK=/Users/xxx/cerCenter/xxx.p12 export CSC_KEY_PASSWORD=xxx

按 ESC 退出編輯；按 :wq 保存退出
刷新環境變量：source ~/.bash_profile
輸入 env 查看環境變量配置結果

三、Electron 簽名公證使用 electron-notarize

1、安裝 npm i electron-notarize --save-dev

2、使用hardened runtime構建App 在 electron-builder mac配置選項中設置 hardenedRuntime: true； dmg 下的 "sign": false（不對 dmg 文件簽名）

3、禁用完整性檢查 gatekeeperAssess: false (electron-builder使用的簽名工具(electronic -osx-sign)會進行完整性檢查以驗證簽名是否成功，MacOS 10.14.5 之前簽名成功後返回 ture，但在 MacOS 10.14.5 之後簽名完還有公證，會返回 false)

4、新建一個 scripts/notarize.js 文件。內容如下：

const { notarize } = require('electron-notarize'); exports.default = async function notarizing(context) { const { electronPlatformName, appOutDir } = context; if (electronPlatformName !== 'darwin') { return; } const appName = context.packager.appInfo.productFilename; return await notarize({ appBundleId: 'com.xxx.xxxxx', // AppId appPath: `${appOutDir}/${appName}.app`, // 不用改 appleId: '[email protected]', // 開發者登錄賬號 appleIdPassword: 'grmz-asdf-fffaw-twoq', // App 專屬密碼 }); }

關於 App 專屬密碼：

https://appleid.apple.com/ 登錄後選擇【App 專用密碼】 --- 點擊加號增加一個，輸入一個自定義名稱下一步即可得到一個蘋果給的隨機生成的專屬密碼（這個密碼其實可以理解爲 App 開發者賬戶登錄密碼，只是它的權限更加專一，目前知道的僅在公證時使用到）

四、兼容配置

本人使用的 M1 芯片屬於 arm64 架構，所以在出包時配置打出的包爲 x86 也就是 x64 的：

mac: { hardenedRuntime: true, gatekeeperAssess: false, icon: 'build/electron-icon/icon.icns', category: 'public.app-category.utilities', target: { target: 'dmg', arch: 'x64' // x86 架構 } },

五、arm64 系列芯片打包對 sqllit3 以及其他的 X86 兼容

package.json -- scripts 下的 rebuild 命令增加環境變量 --arch=x64 指定 x86 架構

"rebuild": "electron-rebuild -f -w better-sqlite3 --arch=x64",

六、其他（公證查詢等）

xcrun altool --notarization-history 0 --username "[email protected]" --password "dfw-ffsap-rtyi-poiu"

七、vue.config.js 文件

const {
  defineConfig
} = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

const Icons = require('unplugin-icons/webpack')
const IconsResolver = require('unplugin-icons/resolver')

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  outputDir: "dist/web",
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin(),
      AutoImport({
        resolvers: [
          // 自動導入element-plus組件
          ElementPlusResolver(),
          // 自動導入圖標組件
          IconsResolver({
            prefix: 'Icon'
        })
        ],
      }),
      Components({
        resolvers: [
          // 自動導入element-plus組件
          ElementPlusResolver(),
          // 自動導入圖標組件
          IconsResolver({
            prefix: false,
            enabledCollections: ['ep']
          })
        ],
      }),
      // 自動導入圖標組件
      Icons({
        autoInstall: true,
      })
    ]
  },
  pluginOptions: {

    // vue-cli-plugin-electron-builder配置
    electronBuilder: {
      nodeIntegration: true,
      "buildDependenciesFromSource": true,
      "nodeGypRebuild": false,
      "npmRebuild": false,
      // externals: ['usb'],
      customFileProtocol: './',
      externals: ['better-sqlite3'],
      builderOptions: {
        // productName: 'xender_electron.exe',
        artifactName: "${productName}_${version}.${ext}",
        appId: "com.andou.musixmeta",
        afterSign: "scripts/notarize.js",
        publish: [{
          "provider": "generic",
          "channel": "latest",
          "url": ""
          //"url": "https://test-file.xendercdn.com/pcd/"
          //"url": "https://xendergif.web.app/",
        }],
        win: {
          requestedExecutionLevel: "requireAdministrator",
          icon: "build/electron-icon/icon.ico",
          // 圖標路徑 windows系統中icon需要256*256的ico格式圖片，更換應用圖標亦在此處
          target: [{
            // 打包成一個獨立的 exe 安裝程序
            target: "nsis",
            // target: "msi",
            // 這個意思是打出來32 bit + 64 bit的包，但是要注意：這樣打包出來的安裝包體積比較大，所以建議直接打32的安裝包。
            arch: [
              "x64"
            //  'ia32'
            ],
          }, ],
        },
        linux: {
          icon: "build/electron-icon/icon.png",
          target: "AppImage",
        },
        "dmg": {
          "sign": false,
          "contents": [
            {
              "x": 410,
              "y": 150,
              "type": "link",
              "path": "/Applications"
            },
            {
              "x": 130,
              "y": 150,
              "type": "file"
            }
          ]
        },
        mac: {
          hardenedRuntime: true,
          gatekeeperAssess: false,
          // entitlements: "entitlements.mac.plist",
          // entitlementsInherit: "entitlements.mac.plist",
          icon: 'build/electron-icon/icon.icns',
          category: 'public.app-category.utilities',
          // target: ['dmg', 'zip', 'pkg'],
          // arch: [
          //   "arm64"
          // ],
          target: {
            target: 'dmg',
            arch: 'x64'
          }
        },
        files: ["**/*"],
        asar: true,
        nsis: {
          // 是否一鍵安裝，建議爲 false，可以讓用戶點擊下一步、下一步、下一步的形式安裝程序，如果爲true，當用戶雙擊構建好的程序，自動安裝程序並打開，即：一鍵安裝（one-click installer）
          oneClick: true,
          // 允許請求提升。 如果爲false，則用戶必須使用提升的權限重新啓動安裝程序。
         allowElevation: true,
          // 允許修改安裝目錄，建議爲 true，是否允許用戶改變安裝目錄，默認是不允許
          //allowToChangeInstallationDirectory: true,
          // 安裝圖標
          installerIcon: "build/electron-icon/icon.ico",
          // 卸載圖標
          uninstallerIcon: "build/electron-icon/icon.ico",
          // 安裝時頭部圖標
          installerHeaderIcon: "build/electron-icon/icon.ico",
          // 創建桌面圖標
          createDesktopShortcut: true,
          // 創建開始菜單圖標
          createStartMenuShortcut: true,
        },
    
        msi:{
          oneClick: false,            
        },
        extraResources: {
          from: 'icons/',
          to: 'icons/'
        }
      },
      chainWebpackMainProcess: (config) => {
        config.plugin("define").tap((args) => {
          args[0]["IS_ELECTRON"] = true;
          return args;
        });
      },
      chainWebpackRendererProcess: (config) => {
        config.plugin("define").tap((args) => {
          args[0]["IS_ELECTRON"] = true;
          return args;
        });
      },
      outputDir: "./dist/electron",
      mainProcessFile: "src/main/background.js",
      mainProcessWatch: ["src/main"],
    },
  },
})

參考鏈接

https://cloud.tencent.com/developer/article/1765152 Electron升級構建適配M1芯片Mac指南

https://juejin.cn/post/7182497884204433467 查看公證結果

https://www.npmjs.com/package/sqlite3 sqlite3 Format 多種編譯配置（Format: napi-v{napi_build_version}-{platform}-{libc}-{arch}）

https://juejin.cn/post/6844903954527027207 sqlite3 多種編譯配置 –arch是cpu的位數

Electron MacOs 打包簽名公證（保姆級別）

爲什麼要⽤ Foundry

【筆記】動手學深度學習-預備知識

py發送email

MySQL 分庫分表方案，總結太全了。。

Qt/C++音視頻開發71-指定mjpeg/h264格式採集本地攝像頭/存儲文件到mp4/設備推流/採集推流

WPF開源輕便、快速的桌面啓動器

公司來了個新同事，把 DDD 運用得爐火純青！

Node JS 多進程

Electron MacOs 打包簽名公證（保姆級別）

MacOs 高版本安裝 python 2.7 ； Python 版本管理解決 Mac 高版本打包 Electron 錯誤問題

Mac 12.5.1 系統安裝 nrm cli.js第9行報錯 open require錯誤

css主題切換

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Electron MacOs 打包 簽名 公證（保姆級別）

Electron MacOs 打包簽名公證（保姆級別）