ブログ運営 on kenji.blog

如何使用 Slack App + OAuth2 發送訊息到 Slack

Wed, 16 Jul 2025 23:36:27 +0900

✅ 使用存取權杖的發文方法（Slack Web API）

Slack 的「OAuth Token（例如 xoxb-… 等）」是用來透過 Slack 的 Web API 發文的密鑰。在這種情況下，與 Webhook 不同，你需要向 Slack API 端點 進行帶有 Authorization: Bearer 標頭的 POST 請求。

🔑 必要前提

你必須在 Slack 應用程式的 OAuth 範圍內包含 chat:write ：

設定步驟

前往 https://api.slack.com/apps
建立應用程式或選擇現有應用程式
在「OAuth & Permissions」 > Scopes 中 → 新增 chat:write
點擊「Install to Workspace」或「Reinstall」以獲取 Access Token（例如：xoxb-xxxxxxxxxx）

💻 C++ 程式碼（使用 WinHTTP 向 Slack API 發送請求）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72


#include <windows.h>
#include <winhttp.h>
#include <iostream>

#pragma comment(lib, "winhttp.lib")

bool PostSlackMessage(const std::wstring& accessToken, const std::string& channel, const std::string& text) {
 const wchar_t* host = L"slack.com";
 const wchar_t* path = L"/api/chat.postMessage";

 HINTERNET hSession = WinHttpOpen(L"SlackPoster/1.0",
 WINHTTP_ACCESS_TYPE_DEFAULT_PROXY,
 WINHTTP_NO_PROXY_NAME,
 WINHTTP_NO_PROXY_BYPASS, 0);
 if (!hSession) return false;

 HINTERNET hConnect = WinHttpConnect(hSession, host, INTERNET_DEFAULT_HTTPS_PORT, 0);
 if (!hConnect) return false;

 HINTERNET hRequest = WinHttpOpenRequest(hConnect, L"POST", path,
 NULL, WINHTTP_NO_REFERER,
 WINHTTP_DEFAULT_ACCEPT_TYPES,
 WINHTTP_FLAG_SECURE);

 // Authorization 標頭與 Content-Type
 std::wstring headers = L"Content-Type: application/json\r\n";
 headers += L"Authorization: Bearer " + accessToken + L"\r\n";

 // JSON 內容
 std::string body = R"({"channel":")" + channel + R"(","text":")" + text + R"("})";

 BOOL result = WinHttpSendRequest(hRequest,
 headers.c_str(),
 (DWORD)-1,
 (LPVOID)body.c_str(),
 body.length(),
 body.length(),
 0);

 if (!result || !WinHttpReceiveResponse(hRequest, NULL)) {
 std::cerr << "發送錯誤\n";
 return false;
 }

 // 確認狀態碼
 DWORD statusCode = 0;
 DWORD size = sizeof(statusCode);
 WinHttpQueryHeaders(hRequest,
 WINHTTP_QUERY_STATUS_CODE | WINHTTP_QUERY_FLAG_NUMBER,
 WINHTTP_HEADER_NAME_BY_INDEX,
 &statusCode, &size, WINHTTP_NO_HEADER_INDEX);

 WinHttpCloseHandle(hRequest);
 WinHttpCloseHandle(hConnect);
 WinHttpCloseHandle(hSession);

 return (statusCode == 200);
}

int main() {
 std::wstring token = L"xoxb-你的存取權杖"; // 存取權杖
 std::string channel = "頻道ID或者#general"; // 範例: "#general" 或 "C0123456789"
 std::string message = "嘗試從 C++ 發送訊息到 Slack！";

 if (PostSlackMessage(token, channel, message)) {
 std::cout << "發文成功！\n";
 } else {
 std::cerr << "發文失敗。\n";
 }

 return 0;
}

📌 如何獲取頻道 ID

僅使用頻道名稱（例如：#general）可能會導致錯誤。最可靠的方法是使用 Slack 頻道頁面 URL 中的 ID。

1
2


https://app.slack.com/client/Txxxxx/C0123456789
 ↑這部分就是頻道 ID

✅ 關於權杖類型（補充）

權杖格式	用途	範例
`xoxb-...`	Bot Token（推薦）	發文、編輯、刪除
`xoxp-...`	User Token（不推薦）	非 Bot 相關操作
Refresh Token	用於長期權杖更新	通常不使用

📝 總結

要從 C++ 發文到 Slack，使用 Slack Web API + Bearer Token 方式最為可靠
使用 HTTPS POST 發送至 chat.postMessage 端點
必須透過 Bearer 標頭發送權杖
確保 指定頻道 ID 以確保準確性

更改 PaperMod 中的圖片佈局

Sun, 11 Sep 2022 18:50:40 +0900

預設的佈局是將圖片置中且寬度為 100%，但因為有時覺得有點大，所以我嘗試讓圖片環繞在標題下方，並將寬度更改為約 150px。

檔案的變更如下。

blank.css

為了更改邊距、圖片大小和文字顯示行數，在 blank.css 中加入以下描述。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


.entry-content {
 -webkit-line-clamp: 4;
}

.entry-footer {
 text-align: right;
}

.entry-cover {
 margin-bottom: initial;
 text-align: center;
}

.entry-cover img {
 border-radius: 4px;
 display: inline;
 max-width: 100%;
}

.post-meta {
 display: block;
 text-align: right;
}

post-entry.css

由於無法在 blank.css 端刪除定義，因此在 post-entry.css 中刪除以下位置的 1 行。

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← 刪除此行
 height: auto;
}

list.html

為了更改圖片佈局，我修改了 list.html 中的以下位置。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<article class="{{ $class }}">
 <!-- {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }} --><!-- 移至下方 -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- 移至下方 -->
 <header class="entry-header">
 <h2>
 {{- .Title }}
 {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
 </h2>
 </header>
 <div style="display:flex;"><!-- 新增 -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- 新增 -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- 從上方移來 -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- 從上方移來 -->
 </div><!-- 新增 -->
 <div style="width:100%;"><!-- 新增 -->
 {{- if (ne (.Param "hideSummary") true) }}
 <div class="entry-content">
 <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
 </div>
 {{- end }}
 {{- if not (.Param "hideMeta") }}
 <footer class="entry-footer">
 {{- partial "post_meta.html" . -}}
 </footer>
 {{- end }}
 <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
 </div><!-- 新增 -->
 </div><!-- 新增 -->
</article>

似乎有不少類似的要求。

https://github.com/adityatelange/hugo-PaperMod/discussions/159#discussioncomment-247844

如果官方也能支援就太好了。

如何在 PaperMod 中設定 Twitter Card

Sat, 10 Sep 2022 18:41:22 +0900

簡介

PaperMod 主題支援 Twitter Card。但是，Twitter Card 的設定必須寫在 config.toml 或每篇文章的 *.md 的標頭資訊中。如果您在每篇文章和 config.toml 中都進行了設定，則每篇文章的標頭資訊將優先。

設定方法

config.toml

在 config.toml 中，於 [params] 下方新增一個名為 images 的項目。在 images 中，描述要在 Twitter Card 顯示的圖片路徑。如果您將圖片放在 static 資料夾中，只需指定檔案名稱即可。

1
2


[params]
 images = ["twitter_card.jpg"]

資料夾結構

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (寫在這裡)
├─content
│ └─posts
│ └─文章資料夾
│ │ index.md (寫在這裡)
│ └─images
│ cover.png (放在這裡)
└─static
 twitter_card.jpg (放在這裡)

每篇文章的標頭資訊

在每篇文章的標頭資訊中，於 cover 下方新增一個名為 image 的項目。如果將 relative 設定為 true，您可以透過文章的 *.md 的相對路徑來指定。

1
2
3


cover:
 image: "images/cover.jpg"
 relative: true

如果不想顯示在文章頂部

如果您不想在文章頂部顯示封面圖片，請在 cover 下方新增一個名為 hidden 的項目，並將其設定為 true。

1
2
3
4


cover:
 image: "images/cover.jpg"
 relative: true
 hidden: true

關於圖片大小

在 PaperMod 目前的規格中，Twitter Card 的大小似乎只支援 summary_large_image。對於 summary_large_image 的合適大小（解析度）有各種說法，但大約 800 x 418（圖片比例 1.91:1）似乎不錯。

參考網站 1 參考網站 2

如果可能的話，建議在發布前調整圖片大小。

如何檢查設定

要檢查 Twitter Card 的設定，請使用 Twitter Card Validator。但是，由於預覽在我的環境中無法正確顯示，如果無法顯示預覽，我建議您在發布前使用私人帳號等檢查一次。