ObsidianからDiscourseへの投稿、CORS問題

[simon]

Obsidian で執筆を始めたので、Discourse フォーラムに投稿するための Obsidian プラグインを作成しようと思いました。理論的には簡単なはずですが、最初の試みの結果は次のとおりでした。

app://obsidian.md からの http://localhost:4200/posts.json へのフェッチアクセスは、CORS ポリシーによってブロックされました。プリフライトリクエストへの応答がアクセス制御チェックに合格しませんでした。リクエストされたリソースに Access-Control-Allow-Origin ヘッダーが存在しません。不透明な応答でニーズが満たされる場合は、リクエストのモードを no-cors に設定して CORS を無効にしてリソースを取得してください。

リクエストはクライアントから行われますが、クライアントはユーザーのデバイスです。私の理解が正しければ、これは安全です。

import DiscoursePlugin from "./main";
import { TFile } from "obsidian";

export async function publishToDiscourse(
	plugin: DiscoursePlugin,
	activeFile: TFile
): Promise<{ message: string }> {
	try {
		const content = await plugin.app.vault.read(activeFile);
		const baseUrl = plugin.settings.baseUrl;
		const apiKey = plugin.settings.apiKey;

		const headers = new Headers({
			"Content-Type": "application/json",
			"Api-Key": apiKey,
			"Api-Username": "scossar", // これは設定にする必要があります
		});
		const body = JSON.stringify({
			title: activeFile.name,
			raw: content, // TODO: 内部リンクを修正するためにコンテンツを解析する
			category: 1, // これは設定にする必要があります
		});
		// TODO: ノートが既に公開されているかどうかを確認する
		const url = `${baseUrl}/posts.json`;

		const response = await fetch(url, { method: "POST", headers, body });

		if (!response.ok) {
			console.error("Discourse への公開中にエラーが発生しました:", response.status);
			return { message: "Discourse への公開中にエラーが発生しました" };
		}
        
		const jsonResponse = await response.json();
		// TODO: レスポンスを使用して discoursePostId ファイルプロパティを追加する
		console.log(`jsonResponse: ${JSON.stringify(jsonResponse, null, 2)}`);
		return { message: "success" };
	} catch (error) {
		console.error("Discourse への公開中にエラーが発生しました:", error);
		return { message: `エラー: ${error.message}` };
	}
}

おそらく、私が気づいていない明白な回避策があるかもしれません。もしなければ、Discourse はそれを機能させることを許可する何らかの方法がありますか？Obsidian Discourse プラグインは役立つ可能性があると思われます。（実際の実装は、上記で投稿したものよりも複雑になります。）

[pfaffman (Jay Pfaffman)]

@simon

リクエストはクライアントから行われますが、クライアントはユーザーのデバイスです。私の理解が正しければ、これは安全です。

最初は混乱しましたが、わかりました。あなたはあなた自身のObsidianアプリをあなたのキーで設定し、あなただけがそれにアクセスできます。これはブラウザで行われているわけではないので、インターネット上の人々はあなたのキーを持っていません。

私は任意のフォームを処理するDiscourseプラグイン（https://www.formhoster.com/ で使用できます）を持っています。フォームを処理しているサイトにログインしている場合、現在のユーザーとして機能できるようにしたかったのですが、おそらく同じCORS問題に遭遇し、すぐに諦めました。私の場合はObsidianのようなアプリではなくブラウザでしたが、問題は似ているかもしれません。

これらすべてを言ったのは、私には良いアイデアがないかもしれませんが、誰かが他に良いアイデアを持っていることを願っているからです。

[simon]

@pfaffman

最初は混乱しましたが、わかりました。あなたはあなた自身のObsidianアプリをあなたのキーで設定し、あなただけがそれにアクセスできるのですね。

はい、Obsidianはローカルで実行されるElectronアプリです。ローカルストレージを使用しているため、APIキーはユーザーのデバイスに残ります。

CORSの問題に対する解決策が見つかりました。今のところデスクトップコンピューターでしかテストしていません。また、Discourseは素晴らしいです！

Make HTTP requests from plugins

上記で投稿したコードは、次のように変更する必要がありました。

import DiscoursePlugin from "./main";
import { requestUrl, TFile } from "obsidian";

//...

		const response = await requestUrl({
			url: url,
			method: "POST",
			contentType: "application/json",
			body,
			headers,
		});
//...

次の質問は、ユーザーがアプリからUser APIキーをリクエストできるようにすることについてですが、それは別の問題です。

[maxtim (Tim Finley)]

これはあなたが作業中のプラグインですか？ ユーザー（私も含めて）がこれを使用できることを非常に喜んでいます。あなたがやったことを再現しようとすることができますが、もっと簡単な方法があれば…

[simon]

@maxtim

これはあなたが取り組んでいるプラグインですか？

それは何かの始まりでした。私自身の目的のためには、Obsidian VaultをDiscourseフォーラムと同期できるCLI（コマンドライン）アプリケーションに興味があります。CLIアプリを使用すると、Vault全体またはサブディレクトリの同期、Notes内の内部リンクの処理、アップロードの処理などが容易になります。CLIアプリのアプローチは、私が取り組んでいる他の作業にも適合しているため、そこから何か役立つことを学んでいます。

CLIアプリの大きな欠点は、それを使用するすべての人がコンピューターにRubyをインストールする必要があることです。また、デスクトップコンピューターでしか動作しません。Windowsコンピューターでの使用には、技術的な課題がいくつかあります。

準備ができたら、ここにアプリへのリンクを投稿します。

CLIアプリではなくObsidian Discourseプラグインが人々にとって関心のあるものであれば、将来的に再度検討します。誰かが私より先にそれに到達する可能性があります。上記のコード例以上に進めませんでした。

[maxtim (Tim Finley)]

@simon

誰かが私より先にそれにたどり着くかもしれません。私は、上記のコード例以上にそれを進めませんでした。

もしこれが現時点で全てだとしたら、かなりシンプルに見えます。現時点で画像がどのように扱われるか気になります。私が試してみてもいいです。Obsidianのプラグインを書いたことはありませんが、（他のプラグインをちらっと見て）それほど複雑ではなさそうです。

[simon]

ここから始めることができます: Build a plugin - Developer Documentation. 私がやったことへのリンクを貼りたいのですが、先週コンピューターのオペレーティングシステムを再インストールする前にGitHubにプッシュしなかった数少ない（うまくいけば唯一の）プロジェクトの1つです。

@maxtim

現時点で画像がどのように処理されるか疑問に思っています。

Nodeを使ってそれをどうやるか見つけなければなりません。ここによいRubyの例があります: discourse_api/examples/upload_file.rb at main · discourse/discourse_api · GitHub https://github.com/discourse/discourse_api/blob/main/lib/discourse_api/api/uploads.rb。

[maxtim (Tim Finley)]

@simon

import DiscoursePlugin from "./main";

これを共有してもらえますか？

[simon]

うーん、あのコードを失ったのはいくぶん無謀でしたね。記憶をたどると、main.ts で定義された DiscoursePlugin を this.addCommand への呼び出しを処理するファイルにインポートしていました。始めるにあたっては、main.ts で全てを行うことができます。例のプラグインで始めるためのガイドに従うだけです。まずはいじくり回してみて、何かを起こそうとしてみてください。私は自分のためにそのプラグインをテンプレートとして使いました。

ここにもいくつか良い例があります: obsidian-wordpress/src at main · devbean/obsidian-wordpress · GitHub

[maxtim (Tim Finley)]

とりあえず、この件は保留にします。かなり進歩しましたが、気に入らない点がいくつかあります。

• APIキーがプレーンテキストで保存されている（非常に悪い）
• 画像がアップロードされない。まだ調査していない設定がいくつかありますが、AWS S3バケットの設定は好きではありません。後で調べます。
• スタイルの選択肢はもっと良いものにできるかもしれませんが、機能的なものを求めていました。
• READMEを更新する必要があります。しかし、これもまた、機能的なものを投稿したかっただけです。

GitHub - maxtimbo/discourse-sync

[simon]

@maxtim

APIキーがプレーンテキストとして保存されている（非常に悪い）

それを回避する方法があるかどうか疑問に思っています。CLIアプリでは、パスワードで暗号化しています。ユーザーはAPIキーを使用する操作の前にパスワードを提供する必要があります。