请求大神指导Click Up sync如何使用，一点进去出现502 Bad Gateway

516360230 · 2024 年6 月 19 日 02:49

516360230 · 2024 年6 月 19 日 02:50

516360230 · 2024 年6 月 19 日 02:50

516360230 · 2024 年6 月 19 日 02:51

Probe · 2024 年6 月 19 日 10:41

我也不太懂, 感觉是个 oauth 失败的问题

简单调查了一下, 插件叫 hokim-m/click-up-x-obsidian: Plugin to synchronize ClickUp in Obsidian notes
且作者写明了 Note: Plugin in beta stage, and being updated regularly!
所以楼主要对插件功能有个基本的心理准备

插件做的事就是 oauth 成功之后, 拿 http API 调 ClickUp 数据

几个关键是:

1
插件提供了一个取名为 “Obsidian Sync” 的 app 见截图里粗体字, 然后鉴权后重定向到 https://apps.oceanbatt.cloud/obsidian ? 这网站我没查到是啥

代码见

github.com/hokim-m/click-up-x-obsidian

src/signIn.ts

b3cf1083f


      
          		title.textContent = "Click Up sync";
          		description.textContent =
          			"We need to retreive authroized token from ClickUp to start syncronizing your tasks from Obsidian notes";
          		button.textContent = "Sign In";
          		button.classList.add("signBtn");
          		button.addEventListener("click", async () => {
          			const inputValue = input.element.value;
          
          			if (!inputValue) {
          				window.open(
          					"https://app.clickup.com/api?client_id=TGKZSPVNT4Z5VWFN4PG5YC8WK9BCJ5YX&redirect_uri=https://apps.oceanbatt.cloud/obsidian",
          					"_blank"
          				);
          			}
          
          			let token;
          
          			if (inputValue) {
          				button.disabled = true;
          				button.textContent = "Loading...";
          				button.classList.add("renderAuthrizationBtn");

2
插件在使用时, getToken() 这里, 似乎应该提供该 app (app 指在 ClickUp 指引下创建的应用) 的 CLICK_UP_SECRET 见

github.com/hokim-m/click-up-x-obsidian

src/api.ts

b3cf1083f


      
          		},
          		method: options.method,
          		body: options.body as string,
          	});
          	return request;
          };
          
          export const getToken = async (code: string) => {
          	if (!code) return "MISSING_CODE";
          	const CLICK_UP_CLIENT = process.env.CLICK_UP_CLIENT ?? "";
          	const CLICK_UP_SECRET = process.env.CLICK_UP_SECRET ?? "";
          	const query = new URLSearchParams({
          		client_id: CLICK_UP_CLIENT,
          		client_secret: CLICK_UP_SECRET,
          		code: code,
          	}).toString();
          
          	try {
          		const resp = await fetcher(`oauth/token?${query}`, {
          			method: "POST",
          		});

显然我们不可能知道作者 app 的 CLICK_UP_SECRET, 只能知道他 CLICK_UP_CLIENT 是 TGKZ....J5YX

3
插件最终需要弄到一个 click_up_token 存到 localStorage 里, 拿着发 http request 用

PS. 我对这些其实也不太懂, 如果理解不对的, 希望大家指出

在知道了以上行为之后, 做如下调整

1
首先自己造个 ClickUp 应用, 见 Create your own app with the ClickUp API – ClickUp Help 跟着指导做就行, 为了最后弄到自己的 CLICK_UP_ID, CLICK_UP_SECRET

2
把自己的 CLICK_UP_ID, CLICK_UP_SECRET 填到插件的代码里

按理说 const CLICK_UP_SECRET = process.env.CLICK_UP_SECRET ?? ""; 是可以通过 env 直接传进来的, 不会弄, 我是直接改 main.js 写死

注意 main.js 下面这句也别忘了改

"https://app.clickup.com/api?client_id=TGKZSPVNT4Z5VWFN4PG5YC8WK9BCJ5YX&redirect_uri=https://apps.oceanbatt.cloud/obsidian"
// 此句里 client_id 改成自己的, 
// redirect_uri 也改成自己的, 我是 http://localhost/callback 注意跟自己创建 ClickUp 应用里的一致

完后按照他文档的操作步骤授权, 这样, app 是你自己的, 最后也 redirect 到由自己控制的地址 http://localhost/callback?code=L777......U371 从网址里抄下来这段 code 备用

最后填写 code, 鉴权成功, 该插件的界面也变成了这样子

试了一下, 能同步数据到本地 note, 但我对 ClickUp 了解不多, 不知道细节做的如何

注意:

过程中可能有别的坑我没想到
估计作者开发完善插件后, 这些额外步骤都会好转
不太确定作者这条路线是否安全, apps.oceanbatt.cloud 这个域名有何意义, 不明白