---
title: Apple login
createDate: 2025-03-10
updateDate: 2025-03-10
author: 徐牧之啊
img: [https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/sign-in-with-apple-1.webp]
excerpt: 使用 JS 在 WebPage 实现 Apple Login 
---

# Apple Login for JavaScript 

> 官方文档：https://developer.apple.com/documentation/signinwithapplejs

## 参数说明

### Response type

控制登录后返回的类型，可选是`code`,`id_token`等，如果是`id_token`,下面的`response_mode`则必须是`form_post`

### Response Mode

控制登录后`code/id_token`返回方式;

1. 如果`response_type`是`query`则会拼接在下面配置的`redirect_uri`的后面
2. 如果`response_type`是`id_token`,则需要配置`form_post`，则会以`post`方法请求`redirect_uri`

### Client Id

在Apple 开发者账户创建`Identifier`:

![新建证书](https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20250331001109445.png)

![选择Services ID](https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20250331001147980.png)

![填写Identifier](https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20250331001244812.png)

注册成功则`Identifier`则是`Client Id`;

### Redirect uri

1. 如果`response_type`是`query`则登录获取的`code`则会拼接在`url`后面
2. 如果`response_type`是`id_token`,则需要配置`form_post`，则会以`post`方法请求返回该`url`

![选择证书](https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20250331005422468.png)

![编辑](/Users/moki/Library/Application Support/typora-user-images/image-20250331005459622.png)

![配置url](https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20250331005602165.png)

### Scope

向Apple请求的用户信息, 比如`name email`使用空格分割



## JS使用Apple登录（前端部分）

### 使用url

可以使用拼接的url打开苹果登录页，文档: https://developer.apple.com/documentation/sign_in_with_apple/incorporating-sign-in-with-apple-into-other-platforms:

```typescript
const baseUrl = "https://appleid.apple.com/auth/authorize";
const url = new URL(baseUrl);

url.searchParams.append("response_type", "code"); 
url.searchParams.append("response_mode", "query");
url.searchParams.append("client_id", "xxx");
url.searchParams.append("nonce", "name email");
url.searchParams.append("redirect_uri", "https://xxx.com");

window.open(url.torString(), "_blank");
```

### 使用JS SDK

在`body`中引入js文件:

```html

<body>
        <script 
                type="text/javascript" 			   src="https://appleid.cdnapple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
        </script>
    </body>
```

初始化:

```js
// 参数值同上
AppleID.auth.init({
    clientId : '[CLIENT_ID]',
    scope : '[SCOPES]',
    redirectURI : '[REDIRECT_URI]',
    usePopup : true
});
```

主动调用登录：

```typescript
interface SignResponseType {
  authorization: {
    code: string;
    id_token: string;
    state: string;
  },
  user: {
       email: string,
       name: {
         firstName: string,
         lastName: string
       }
     }
}

const onCode = () => {
  try {
    // AppleID是根据上面 body 中导入的 js 挂载
  	window.AppleID.auth
      .signIn()
      .then((res: SignResponseType) => {
    			console.log("code: ", res?.authorization?.code)
      })
      .catch(console.log);
  }catch(err) {
    // TODO...
  }
}

onCode();
```

## 校验Apple Code （后端部分）

> 该部分以 Node 为例子，处理前端获取到`apple code`传递给后端进行校验

首选需要登录apple开发者账户创建一个`keys`:



![image-20250331010947545](https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20250331010947545.png)

需要勾选上`Sign in with Apple`:

![image-20250331011007371](https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20250331011007371.png)

记住 `key`的`id`和保存证书为`xx.p8`格式，该证书只能下载一次！

![image-20250331011349189](/Users/moki/Library/Application Support/typora-user-images/image-20250331011349189.png)



 使用 `apple-signin-auth`处理：

```typescript
import appleSignin from 'apple-signin-auth';


const clientSecret = appleSignin.getClientSecret({
    clientID: 'xxxx', // 与上面创建的 clientID 为同一个
    teamID: 'x x x x', // Appl 开发者账户的 唯一标识符
    privateKey: '', // 该值为上面导出的`xxx.p8`的证书的值，可用文本编辑器打开
  	// privateKeyPath: "", // 不想用 privateKey 可以用 该属性代替，表示 xxx.p8 证书的地址
    keyIdentifier: '', // 上面创建 key 的 key Id
    expAfter: 15777000, 
});
const options = {
    clientID: '', // Apple Client ID
    redirectUri: '', // use the same value which you passed to authorisation URL.
    clientSecret: clientSecret
};


// 测试前端的token是否有效
try {
    const tokenResponse = await appleSignin.getAuthorizationToken("x x x", options);

} catch (err) {
    console.error(err);
}
```



---
title: Components monorepo简单实践
createDate: 2024-11-04
updateDate: 2024-11-04
author: 徐牧之啊
img: https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/monorepo.png
---

# Components monorepo简单实践

> 前言： 为了在编写组件库的时候为了拆分组件在生产环境的使用，并且为了同步到组件库文档；

## 初始化项目

```shell
npm init -y
```

## 指定项目的`PakcageManager`和`workspace`文件夹

> 该问指定`pnpm`作为`package manager`,如果使用`yarn , npm`会有不同的配置

```shell
touch pnpm-workspace.yaml
mkdir packages apps
```

指定`workspace`的文件夹：

```yaml
packages:
  - 'packages/**'
  - 'apps/**'
```

## 目录说明

```markdown
Root
├── packages --- 用作组件库的文件夹
│   └── core --- 核心包
│   │ 	├── package.json
│   │ 	└── index.ts
├── apps --- 用作其他多个仓库的入口文件夹，例如放组件库文档或者其余项目
├── package.json
└── tsconfig.json
```

### Core结构说明

```json
{
  // ... 其他配置
  "name": "you package name",
  "version": "x.x.x",
  "main": "dist/index.cjs",
  "types": "dist/index.d.ts",
  "module": "dist/index.js",
  "umd": "dist/index.umd.js",
  // 主要需要定义默认的文件，默认的ts文件
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js",
      "require": "./dist/index.cjs"
    },
    "./index.css": {
      "import": "./dist/index.css",
      "require": "./dist/index.css"
    }
  },
  // 定义哪些文件会文件/文件夹push
  "files": [
    "dist",
    "./README.md"
  ],
}
```

### apps文件夹中的使用

在`apps`中其他项目需要使用`core`中的项目可以在`package.json`中这样定义，最后别忘了`npm install`：

```json
{
   "devDependencies": {
    "you package name": "workspace:*"
  }
}
```

## 动态监听修改

使用`nodemon`可以监听其他文件夹的修改以及实时使用`build`后的产物:

![WX20250204-170236@2x](https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/WX20250204-170236@2x.png)

## 实践项目

[ClearLuv editor](https://github.com/ClearLuvMoki/clearluv-editor)


---
title: Electron+Typeorm+Sqlite3实践
createDate: 2024-05-29
updateDate: 2024-05-29
author: 徐牧之啊
img: https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/electron-typeorm.png
excerpt: Typeorm + Sqlite3 实践
---

# Electron+Typeorm+Sqlite3实践

## 背景

Electron关于本地数据的存储一般分为以下几类:

+ `JSON`存储：推荐库[electron-store](https://github.com/sindresorhus/electron-store#readme)，支持`JS`中对象方式的访问，并且直接加密，但是有需求对于数据的频繁读写性能不是很好；
+ `localStorage`/`IndexedDB`存储：
	+ `localStorage`同步的操作，CURD方便，前端可以直接操作，但是容量有限，可以查看[MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7)了解相关API以及存储上限，并且提供了[测试](http://dev-test.nemikor.com/web-storage/support-test/)获取你当前浏览器的最高`localStorage`上限;
	+ `IndexedDB`全异步的操作，[MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API)上有很详细的操作，但是无法初始化数据库的值，如果使用前端框架推荐[dexie](https://dexie.org/)，支持`react`/`vue`等主流框架，操作简单；
+ 本地数据库: 比如`sqlite`，配置简单无需服务器，数据库直接访问单一文件即可，数据保存在本地以及能进行，但是数据库一般需要写`sql`，所以本文主要介绍在`electron`中链接`sqlite3`以及不需要`sql`的主流解决方案`orm`;

## Core NPM Packages
默认安装`electron`以及渲染进程需要的相关代码，还需要：
`npm install @electron/rebuild better-sqlite3 typeorm`

## Electron rebuild
该package主要是根据 Electron 项目所使用的 Node.js 版本重建原生 Node.js 模块，由于`better-sqlite3`内置的`node`版本可能跟项目本身使用的`node`版本不一样，所以需要`rebuild`，可以在`packages.json`中设置:
```json
{
	"scripts": {
		 "rebuild": "electron-rebuild -f -w better-sqlite3",
	}
}
```
⚠️: 每次`install`依赖后可能都需要`rebuild`一次！否则会导致后续数据库启动失败！

## Use sqlite3 & Typeorm
这里选择了`better-sqlite3`:
1. 新建文件夹`dataBase`以及文件`index.ts`:
```javascript
import {join} from "path";
import {DataSource} from "typeorm";
import {app} from "electron";

const dataBasePath = join(
    app.getPath("appData"),
    app.getName(),
    `./Your Dir/index.db`
);

console.log("DataBase init path: ", dataBasePath)
const DataBase = new DataSource({
    type: "better-sqlite3",
    entities: [], // 后续新建表的实体
    database: dataBasePath, // 数据库地址
    synchronize: true, // 自动同步表
    logging: ["error"],
    /* 
    	1. 这里是 better-sqlite3 的 二进制文件，在 rebuild 后生成，然后指向该文件；
    	2. 后续在打包也需要 copy 至打包后的文件夹中，并且路径访问需要跟以下一致
    */
    nativeBinding: join(__dirname, "./better_sqlite3.node")
})

export default DataBase;
```
2. 数据库初始化
```javascript
import DataBase from "@src/dataBase";

app.on('ready', async () => {
  if (!DataBase.isInitialized) {
      const [err] = await to(DataBase.initialize());
      if (err) {
          console.log("数据库已初始化失败!")
      } else {
          console.log("数据库已初始化成功!")
      }
  } else {
      console.log("数据库已初始化成功!")
  }
  // ... 初始化窗口等操作
});
```
3. 新建表实体
在`dataBase`中新建文件夹`entities`用来存储业务对应的表，一下是新建一个配置表`config.ts`:
```javascript
import {Entity, PrimaryGeneratedColumn, Column, CreateDateColumn} from "typeorm";

@Entity("config")
export class ConfigEntities {
		// 主键设置，无需手动生成，自动为uuid
    @PrimaryGeneratedColumn("uuid")
    id: string = "";

		// 注意sqlite3中文本的存储没有varchar等,这里可以选择text存储
    @Column({type: "text", default: ""})
    locale?: string | undefined = "";

		// default 设置默认值
    @Column({type: "text", default: "light"})
    theme?: string | undefined = "";

    @Column({type: "text", default: "magazine"})
    listMode?: string | undefined = "";
    
    // 创建数据条的时间，无需手动维护插入单条数据的时间
    @CreateDateColumn()
    createDate?: Date | undefined;
}
```
4. 在第一步的`dataBase`文件中修改`entities`字段注入实体:
```javascript
import {ConfigEntities} from "./entities/config.ts";
const DataBase = new DataSource({
  // 其他配置不变
  entities: [ConfigEntities]
})
```
5. 新建`service`文件夹处理不用表中的对应事务:
```javascript
import Database from "../dataBase";
import {ConfigEntities} from "../entities/config";

const getOSQueryBuilder = async () => {
    return Database.getRepository(ConfigEntities)
};

class OSService {
		// 根据ID查询操作
     static async getConfig(id: string) {
        return new Promise(async (resolve) => {
            const osQueryBuilder = await getOSQueryBuilder();
            const data = await osQueryBuilder.findOne({
                where: {
                    id
                }
            })
            resolve(data);
        })
    }
    
    // 插入数据操作
    static async updateConfig(config: ConfigEntities) {
        return new Promise(async (resolve) => {
            const osQueryBuilder = await getOSQueryBuilder();
            const existingOS = await osQueryBuilder.findOne({
                where: {
                    id: config.id,
                }
            });
            // 如果不存在导入，存在就直接返回
            if (!existingOS) {
                osQueryBuilder.save(config)
                    .then((saveRes) => {
                        console.log("导入OS成功: ", JSON.stringify(saveRes))
                        resolve(saveRes)
                    })
            } else {
                resolve(existingOS)
            }
        })
    }
    
    // 根据ID更新数据
    static async updateOS(data: {
        id: string;
        locale?: string;
    }) {
        const osQueryBuilder = await getOSQueryBuilder();
        const config = await osQueryBuilder.findOne({
            where: {
                id: data.id
            }
        });
        if (config?.id) {
            const item = await osQueryBuilder.save({
                id: config.id,
                title: data?.locale || "",
            })
            return item;
        } else {
            return null
        }
    }
    
    // 根据ID删除数据
    static async removeOS(id: string) {
        const osQueryBuilder = await getOSQueryBuilder();
        const deleteResult = await osQueryBuilder.delete(id);
        return deleteResult;
    }
}

export default OSService;
```
6. IPC调用事务，通过前端的IPC请求区分不同的事务:
```javascript
import {ipcMain} from "electron";
import OSService from "../dataBase/server/os";

ipcMain.handle("os:config", () => {
    return OSService.getConfig()
})
```
前端调用，比如`react`中：
```javascript
useEffect(() => {
	// 这里是需要在 electron 中 preload 中设置 contextBridge
	window.IPC.invoke("os:config")
		.then(console.log)
		.catch(console.err)
}, [])
```

## Example
[Moki RSS](https://github.com/ClearLuvMoki/Moki-RSS)

---
title: Electron 上架 Mac store
createDate: 2024-04-21
updateDate: 2024-04-21
author: 徐牧之啊
img: https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/electron-mac.png
excerpt: Electron上架Mac Store全流程
---
# Electron 上架 Mac store

> 开始前需要购买 Apple Developer 账号，¥688一年

## Core package version
+ `electron`: 30.0.8
+ `electron-builder`:  24.13.3

## Profiles
### 创建证书助理
将创建的`CertificateSigningRequest.certSigningRequest`的文件可以按照如下方式保存在本地，或者使用邮箱发送：
<div style="display: flex;flex-wrap: wrap;justify-content: space-around;width:100%">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822185425314.png" width="45%" alt="Create SigningRequest">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822185523593.png" width="45%" alt="Save SigningRequest">
</div>

## Certifications
+ 创建证书需要`Signing request file`即上面创建的`CertificateSigningRequest.certSigningRequest`文件，创建时候导入即可;
+ 根据[官方文档](https://www.electronjs.org/docs/latest/tutorial/mac-app-store-submission-guide#legacy-certificate-names)，至少需要两个证书，下载后双击导入**钥匙串**的**登录**中:
    + 3rd Party Mac Developer Application (Mac App Distribution)
    + 3rd Party Mac Developer Installer (Mac Installer Distribution)
<div style="display: flex;flex-wrap: wrap;justify-content: space-around;width:100%">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240821230928567.png" width="45%" alt="Apple Certifications"/>
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240821231731637.png"  width="45%" alt="钥匙串导入"/>
</div>

+ 检查上述证书中对应的*Relations证书*是否齐全，在钥匙串中双击对应证书查看*Relations证书*:
	+ 如果证书缺失可前往[苹果官网](https://www.apple.com/certificateauthority/)下载，双击导入**钥匙串**的**系统**中
	+ 可能存在`unable to build chain to self-signed root for signer`等报错，或者导入了Relations证书还是无法使用上述的证书，请尝试下载并在**钥匙串**的**系统**中导入下方   *图(Apple Root Certifications)* 中左侧蓝色区域的根证书
<div style="display: flex;flex-wrap: wrap;justify-content: space-around;width:100%">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822153924010.png" width="45%" alt="Apple Relations Certifications">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822154518157.png" width="45%" alt="Apple Root Certifications">
</div>

## Additional entitlements
对应三个权限文件，按照[Electron官网](https://www.electronjs.org/docs/latest/tutorial/mac-app-store-submission-guide#additional-entitlements)设置，如果没有特殊的权限设置，默认如下：
### 1. entitlements.mas.plist
```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
      <key>com.apple.security.app-sandbox</key>
        <true/>
      <key>com.apple.security.network.client</key>
        <true/>
      <key>com.apple.security.files.user-selected.read-write</key>
        <true/>
      <key>com.apple.security.files.user-selected.read-only</key>
        <true/>
      <key>com.apple.security.cs.allow-jit</key>
        <true/>
      <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
        <true/>
      <key>com.apple.security.cs.allow-dyld-environment-variables</key>
        <true/>
      <key>com.apple.security.cs.disable-library-validation</key>
        <true />
    </dict>
</plist>

```
### 2. entitlements.mas.inherit.plist
```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" 	"http://www.apple.com/DTDs/PropertyList-1.0.dtd">
  <plist version="1.0">
    <dict>
      <key>com.apple.security.app-sandbox</key><true/>
      <key>com.apple.security.inherit</key><true/>
    </dict>
  </plist>
```
### 3. entitlements.mas.loginhelper.plist
```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
   <key>com.apple.security.app-sandbox</key>
   <true/>
  </dict>
</plist>
```

## Register identifier
注册`AppId`是当作程序的唯一标识符，该`AppId`不能与其他App重复，否则在后续审核会导致不通过:

<div style="display: flex;flex-wrap: wrap;justify-content: space-around;width:100%">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822190244990.png" width="45%" alt="Identifier list">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822190314670.png" width="45%" alt="Select identifier type">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822190347066.png" width="45%" alt="Select identifier platform">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822190438785.png" width="45%" alt="identifier">
</div>


### Register a New Provisioning Profile
如图按照流程选择即可，但是在*图(Select certification)*请选择在上面*Certifications*中创建的*Mac App Distribution*证书:
<div style="display: flex;flex-wrap: wrap;justify-content: space-around;width:100%">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822190014178.png" width="45%" alt="Profile list">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822190045291.png" width="45%" alt="Select profile type">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822191608389.png" width="45%" alt="Select app-id">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822191659405.png" width="45%" alt="Select certification">
</div>

## Builder
`electron-build`打包的配置方式有很多，包括`.json`，`.js`等，这里使用了`.js`进行配置，并且放置在了项目根目录，最后在`package.json`中运行`electron-builder -c electron-builder.js`即可。
以下是全部代码：
```javascript
const {version} = require('./package.json')
const {resolve} = require("path")

const versionArr = version.split('-')
const bundleShortVersion = versionArr[0]
const bundleVersion = versionArr[1]

const config = {
    asar: true,
    productName: 'Your app anme',
    appId: 'Create AppID',
    directories: {
        output: 'dist'
    },
    icon: resolve(__dirname, "./icons/icon.icns"),
    asarUnpack: "**\\*.{node,dll}",
    files: [
        "./release/dist", // 这里build主进程和渲染进程的目录
        "node_modules",
        "package.json"
    ],
    mac: {
        icon: resolve(__dirname, "./icons/icon.icns"),
        target: [
            "mas" // 选择构建类型为: mas
        ],
        bundleVersion: bundleVersion,
        bundleShortVersion: bundleShortVersion,
        artifactName: '${productName}-${version}-${arch}.${ext}',
        extendInfo: {
            ElectronTeamID: 'Your Apple TeamId',
            ITSAppUsesNonExemptEncryption: 'NO'
        },
        asarUnpack: [
            '**/*.node',
        ],
    },
    mas: {
        hardenedRuntime: false,
        gatekeeperAssess: false,
        entitlements: 'mas/entitlements.mas.plist',
        entitlementsInherit: 'mas/entitlements.mas.inherit.plist',
        entitlementsLoginHelper: 'mas/entitlements.mas.loginhelper.plist',
        provisioningProfile: 'mas/provisioning.provisionprofile',
    },
    dmg: {
        sign: false
    }
}
module.exports = config
```

## Release
理论在运行`electron-builder -c electron-builder.js`的情况下，只会打包当前使用mac版本的对应的包，根据Apple的介绍，Apple的芯片可以部分运行Intel芯片打包的App，但是反之不行，如果需要在Intel芯片上和Apple芯片上运行有如下三个方式:
+  命令区分: 使用`Mac`打包使用如下参数: `electron-builder -c electron-builder.js --mac --x64 --arm64`,该命令可以打包出intel和apple芯片两个版本，打包时候`electron-builder`会去下载对应的依赖;
+ 硬件区分: 有条件的情况下可以单独在intel和apple芯片的两个`Mac`中使用`electron-builder -c electron-builder.js`单独打包，这样会自动构建系统对应的包;
+ package合并：可以使用`electron-builder -c electron-builder.js --universal`命令打包出intel和apple芯片合并的包，缺点就是包的体积可能是上述两个方法的两倍;


## Transport
+ 在Mac Store下载`Transporter`软件；
+ 登录创建`Certifications`的账号;
+ 上传刚才打包好的`.pkg`;
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822210833532.png" alt="Transporter">

## Distribution info
需要使用创建`Certifications`的账号登录到[App Store Connet](https://appstoreconnect.apple.com/apps),然后填写要上架的APP信息，等到审核通过即可;

## Example
[Moki RSS](https://github.com/ClearLuvMoki/Moki-RSS)


---
title: Electron Mac 公证
createDate: 2023-11-21
updateDate: 2023-11-21
author: 徐牧之啊
img: https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/electron-notarize.png
excerpt: Electron Mac 在 MAS 外的分发以及公证
---

# Electron Mac 公证

> 开始前需要购买 Apple Developer 账号，¥688一年

除了上架`Mac App Store(MAS)`一般使用分发`.dmg`文件供用户下载安装，过程远不如上架`MAS`繁琐，但是还是需要进行签名并且公证，否则用户会出现以下提示:
<div style="display: flex;flex-wrap: wrap;justify-content: space-around;width:100%">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822231345283.png" alt="No notarize note" width="100%"/>
</div>

## NPM Dependencies

`npm install @electron/notarize electron-builder`

## Profiles
### 创建证书助理
将创建的`CertificateSigningRequest.certSigningRequest`的文件可以按照如下方式保存在本地，或者使用邮箱发送：
<div style="display: flex;flex-wrap: wrap;justify-content: space-around;width:100%">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822185425314.png" width="45%" alt="Create SigningRequest">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822185523593.png" width="45%" alt="Save SigningRequest">
</div>

## Certifications
+ 创建证书需要`Signing request file`即上面创建的`CertificateSigningRequest.certSigningRequest`文件，创建时候导入即可;
+ 这里只是需要`DeveloperID Applaication`证书，下载后双击导入**钥匙串**的**登录**中
  + 注意该证书每个账号最多生成五个，生成完请妥善保存，并且该证书生成过后不可撤回或者删除!
<div style="display: flex;flex-wrap: wrap;justify-content: space-around;width:100%">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822232508616.png" width="45%" alt="Apple Certifications"/>
</div>

## App-specific password

使用`Apple Developer`账号登录[appleId](https://appleid.apple.com/account/manage)，按照如下生成专属密码；
<br/>
⚠️：专属密码只会生成一次，如果丢失需要重新生成，但是不会影响原本的APP；

<div style="display: flex;flex-wrap: wrap;justify-content: space-around;width:100%">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-20240822233339150.png" width="45%" alt="App-specific password"/>
</div>

## Config
先在`electron-builder`中配置，下面这个例子是在`pacakge.json`中配置:
```json
{
	"build": {
		"afterSign": "./config/notarize.js",
	}
}
```
新建`notarize.js`：
```javascript
const { notarize } = require('@electron/notarize');

exports.default = async function notarizing(context) {
  if (process.platform !== 'darwin') {
    return;
  }
  const filePath = context.outDir;
  const appName = context.packager.appInfo.productName;
  return notarize({
    appPath: `${filePath}/${appName}.app`, // 应用的路径 xxx.app 结尾的
    appBundleId: 'your appid', // appid
    appleId: 'Apple Developer account', // 苹果开发者账号
    appleIdPassword: 'xxxx-xxxx-xxxx-xxxx', // 应用专用密码
    teamId: 'Apple Developer id' // Apple Developer 账号自带的一个ID
  })
    .then((res) => {
      console.log('公证成功!');
    })
    .catch(console.log);
};
```



## Tips

上述中除了签名这一步是必须，并非是非要公证才能使用软件，可以在系统中如下设置依旧可以打开软件：

<div style="display: flex;flex-wrap: wrap;justify-content: space-around;width:100%">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/image-202408222333391509.png" width="45%" alt="Apple Certifications"/>
</div>

---
title: Simple git hook
createDate: 2021-5-15
updateDate: 2021-5-15
author: 徐牧之啊
img: https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/git.png
excerpt: Git 提交的简单规范化
---

# Simple git hook

> 前言: 为了同组内规范化`git`的提交记录，并且可以自定义一些`commit`内容，约束提交规范，以及自动生成一些 change log prefix;

## Packages

```shell
npm install cz-git commitizen simple-git-hooks @commitlint/cli @commitlint/config-conventional
```

## Introduce

### @commitlint/cli, @commitlint/config-conventional

[官网地址](https://commitlint.js.org/guides/local-setup.html)

为了提供一些`commit-msg`的规范，以及`prompt`,约束`git`提交的信息，比如约束提交前缀:

```js
[
  'build',
  'chore',
  'ci',
  'docs',
  'feat',
  'fix',
  'perf',
  'refactor',
  'revert',
  'style',
  'test'
];

```

### cz-git

[Github](https://cz-git.qbb.sh/zh/)

提供可视化的操作`git`提交的方式;

### simple-git-hooks

[Github](https://github.com/toplenboren/simple-git-hooks#readme)

比 [husky](https://typicode.github.io/husky/) 更加轻量级，简单的`git hook`管理包;

关于`git hook`的介绍请看官方文档[ -> Git ](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)

## Start

下载依赖并且写入配置:

```shell
npm install cz-git commitizen simple-git-hooks @commitlint/cli @commitlint/config-conventional;
npm pkg set scripts.prepare="npx simple-git-hooks"
npx simple-git-hooks
npm pkg set scripts.commitlint="commitlint --edit"
npm pkg set scripts.cz="git add . && git-cz"
```

其他配置:

```json
{
     // package.json
  	"scripts": {
      	"commitlint": "commitlint --edit",
        "cz": "git add . && git-cz",
        "prepare": "npx simple-git-hooks"
    },
    "simple-git-hooks": {
      	"pre-commit": "<pre-commit hook:做一些需要在commit前的操作，比如结合 biome/eslint 检查代码>",
        "commit-msg": "npx --no-install commitlint --edit ${1}",
        "preserveUnused": ["commit-msg"]
    },
    "config": {
      "commitizen": {
        // 指定cz-git为使用的适配器
        "path": "node_modules/cz-git"
      }
    }
}
```

然后复制至`commitlint.config.js`:

```js
/** @type {import('cz-git').UserConfig} */
module.exports = {
	extends: ["@commitlint/config-conventional"],
	prompt: {
		alias: {
			f: "docs: fix typos",
			r: "docs: update README",
			s: "style: update code format",
			b: "build: bump dependencies",
			c: "chore: update config",
		},
		messages: {
			type: "选择你要提交的类型 :",
			scope: "选择一个提交范围（可选）:",
			customScope: "请输入自定义的提交范围 :",
			subject: "填写简短精炼的变更描述 :\n",
			body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
			breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
			footerPrefixesSelect: "选择关联issue前缀（可选）:",
			customFooterPrefix: "输入自定义issue前缀 :",
			footer: "列举关联issue (可选) 例如: #31, #I3244 :\n",
			confirmCommit: "是否提交或修改commit ?",
		},
		types: [
			{
				value: "feat",
				name: "feat:      ✨  新增功能 | A new feature",
				emoji: "✨",
			},
			{ value: "fix", name: "fix:       🐞 修复缺陷 | A bug fix", emoji: "🐞" },
			{
				value: "docs",
				name: "docs:      📝 文档更新 | Documentation only changes",
				emoji: "📝",
			},
			{
				value: "style",
				name: "style:     💄 代码格式 | Changes that do not affect the meaning of the code",
				emoji: "💄",
			},
			{
				value: "refactor",
				name: "refactor:  ♻️ 代码重构 | A code change that neither fixes a bug nor adds a feature",
				emoji: "♻️",
			},
			{
				value: "perf",
				name: "perf:      ⚡️ 性能提升 | A code change that improves performance",
				emoji: "⚡️",
			},
			{
				value: "test",
				name: "test:      ✅  测试相关 | Adding missing tests or correcting existing tests",
				emoji: "✅",
			},
			{
				value: "build",
				name: "build:     📦️构建相关 | Changes that affect the build system or external dependencies",
				emoji: "📦️",
			},
			{
				value: "ci",
				name: "ci:        🎡 持续集成 | Changes to our CI configuration files and scripts",
				emoji: "🎡",
			},
			{
				value: "revert",
				name: "revert:    🔨 回退代码 | Revert to a commit",
				emoji: "🔨",
			},
			{
				value: "chore",
				name: "chore:     ⏪️ 其他修改 | Other changes that do not modify src or test files",
				emoji: "⏪️",
			},
		],
		useEmoji: true,
		emojiAlign: "center",
		useAI: false,
		aiNumber: 1,
		themeColorCode: "",
		scopes: [],
		allowCustomScopes: true,
		allowEmptyScopes: true,
		customScopesAlign: "bottom",
		customScopesAlias: "custom",
		emptyScopesAlias: "empty",
		upperCaseSubject: false,
		markBreakingChangeMode: false,
		allowBreakingChanges: ["feat", "fix"],
		breaklineNumber: 100,
		breaklineChar: "|",
		skipQuestions: [],
		issuePrefixes: [
			{ value: "closed", name: "closed:   ISSUES has been processed" },
		],
		customIssuePrefixAlign: "top",
		emptyIssuePrefixAlias: "skip",
		customIssuePrefixAlias: "custom",
		allowCustomIssuePrefix: true,
		allowEmptyIssuePrefix: true,
		confirmColorize: true,
		scopeOverrides: undefined,
		defaultBody: "",
		defaultIssues: "",
		defaultScope: "",
		defaultSubject: "",
	},
};

```

检查`git hooks path`：

```shell
git config core.hooksPath
```

如果hooks path不在 `.git/hooks`下，请依次执行如下命令:

```shell
git config core.hooksPath .git/hooks/
npx simple-git-hooks
```


---
title: MacBook Config
createDate: 2020-12-27
updateDate: 2024-11-20
author: 徐牧之啊
img: https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/macbook.png
excerpt: Macbook的简单配置
---

# 从0开始配置MacBook

## 科学上网

+ ~~ClashX~~
+ Verge
  + [Releases](https://github.com/zzzgydi/clash-verge/releases)

## Homebrew

+ [官网](https://brew.sh/)

```shell
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

### 默认安装图形化软件

```shell
brew install --cask google-chrome qq  wechat  neteasemusic  qqmusic  tencent-meeting  dingtalk  feishu  intellij-idea  visual-studio-code  typora  picgo  apifox 
```

> 如果不知道`brew`是否可以安装想要的软件，可以使用`brew search <app-name>`查找;
>
> 可以根据 `brew info <app-name>`查看想要的软件详情；

## Nvm

```shell
brew install nvm
```

配置环境变量:

```shell
mkdir ~/.nvm
vim ~/.zshrc
```

`.zshrc`:
```shell
export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion
```
重新加载`.zshrc`文件:

```shell
source ~/.zshrc
```

安装几个不同的版本（看个人需要）:

```shell
nvm install 16.15.0 
nvm install 18.12.0
nvm install node # 安装最新Node
```

配置代理:

> 配置的7890是因为我的第一步科学上网配置的端口是7890，根据自己情况配置

```shell
npm config set proxy "http://localhost:7890"
npm config set https-proxy "http://localhost:7890"
```

## Git

```shell
brew install git
git config --global user.name "Your Name"
git config --global user.email "you@your-domain.com"
```















---
title: Hexo部署至云服务器
createDate: 2020-02-23 23:24
updateDate: 2020-02-23 23:24
img: https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/hexo.png
excerpt: Hexo 部署至云服务的最简实践
---

# Hexo部署到阿里云服务器

在平时开发中需要个人的博客网站，不断的积累知识，于是找到了[Hexo](https://hexo.io/)，最开始学习了怎么部署到github上，但是由于其他原因访问速度很慢。

后面想着需要一个有域名的并且访问速度够快的个人博客网站，于是研究了怎么部署Hexo到服务器上。

`Hexo`部署到github上可以参考这里[哔哩哔哩羊叔](https://www.bilibili.com/video/BV1Yb411a7ty?from=search&seid=7896361255674325515)。

##  一、安装Node.js

我们在`/usr/local/`下面新建一个文件夹 :

``` shell
mkdir node
```

在[node.js](https://nodejs.org/dist/)官网中选择Linux版本需要安装的node版本， 接着在node文件夹中解压这个压缩包;
```shell
wget https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.xz    // 下载node压缩包 
tar -xvf node-v10.15.3-linux-x64.tar.xz   // 解压node压缩包
./node -v  // 查看node版本
./npm -v // 查看npm
```
接着就是最重要的设置软链接，可以在服务器上任何文件夹中使用node:
``` shell
ln -s /usr/local/node/bin/node /usr/bin/node  // 设置node的软链接
ln -s /usr/local/node/bin/npm /usr/bin/npm  //设置npm的软链接 
ln -s /usr/local/node/bin/npx /usr/bin/npx  //设置npx的软链接，以便后面需要
```

## 二、安装Git
安装Git可以链接到自己的博客仓库，并且后续还可以拉取Hexo的themes:
```shell
yum install -y git
```

## 三、安装Hexo
`Hexo`主要是博客的框架，在`/usr/local`中新建一个文件夹`Blog`作为博客的框架的存放位置，在文件夹中使用`node`下载`Hexo`脚手架：
```shell
mkdir Blog  // 	新建文件夹
npm install hexo-cli -g   // 安装Hexo
hexo init //  本地新建Hexo
npm install // 下载依赖
git init  //  安装git本地仓库
```
接着打开`_config.yml`文件，配置自己的代码仓库以及网页的icon和名称等信息，如果在 *图(Hexo config)* 还未设置主题直接设置默认主题即可:  
<div style="display: flex;flex-wrap: wrap;justify-content: space-around;width:100%">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/hexoconfig.png" alt="Hexo config"/>
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/hexoconfig2.png" alt="Hexo icon"/>
</div>

## 四、安装Nginx
在`etc`文件夹中使用命令安装`Nginx`:
```shell
yum install -y nginx  // 安装nginx
vim /etc/nginx/nginx.conf  // 打开nginx.conf
```
接着查看配置端口访问，在`sercer_name`中配置域名，在`root`中指向之前`hexo`的`public`目录，保证路径的正确，在`location`中设置访问`index.html`文件。
<div style="display: flex;flex-wrap: wrap;justify-content: space-around;width:100%">
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/nginx.png" alt="Hexo nginx config"/>
<img src="https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/hexoconfig2.png" alt="Hexo icon"/>
</div>

```shell
接着启动Nginx服务:
systemctl start nginx
systemctl enable nginx  // 开机启动nginx服务
```

## 五、运行Hexo
接着回到安装`hexo`的目录下，执行命令，启动服务:
```shell
hexo g
```

---
title: Welcome to 1921`
createDate: 2019-11-07
updateDate: 2019-11-07
author: 徐牧之啊
img: https://moki-blog.oss-cn-chengdu.aliyuncs.com/moki-note/home.png
excerpt: 来自1921的描述
---

# Always
🌈: 江南;

希望你也奇奇怪怪.


Moki

不如去西湖吹吹风吧