分享功能｜多內容好友分享 Flex 功能製作
關於分享給好友的訊息功能需要設定兩個地方：
👉 GOSU BAR
另外 LINE Developers 需要先完成 LINE LOGIN API 與 GOSU BAR 的串接。
STEP 1 LINE LOGIN 設定
於 LINE LOGIN 的 LIFF 頁面按下 Add 新增
STEP 2 新增 LIFF app
STEP 3 拉流程
先拖拉出節點，如果找不到執行程式碼節點＆回應請求節點，請勾選進階功能
點擊起始點｜自訂事件的節點
事件類型選擇自訂事件(開放對外API)，設定 API 路徑，並將檢查登入狀態打勾
＊需注意 API 路徑須為英文，不可為中文
STEP 4 設定 LINE app Endpoint URL
依序複製機器人編號與 LIFF ID ，並依照下面範例修改
https://機器人編號.api.gosu.bar/liff?id=XXXXXXXX
例如：機器人編號為3333，LIFF ID 為 1657292654-aaaaaaaa
則修改為 https://3333.api.gosu.bar/liff?id=1657292654-aaaaaaaa
點擊剛剛新增的 LIFF app，編輯 LIFF detail
點擊 Endpoint URL 的 Edit
貼上剛剛複製好的 https://機器人編號.api.gosu.bar/liff?id=XXXXXXXX
STEP 5 設定決策點（下方）
將條件類型改為程式碼，並貼上以下內容
[使用的程式碼]
request.get.fromId=="X"
紅色部分先分別設定 1 和 2
後續在設定執行程式碼節點時會使用到，以便對應到不同的 Flex 內容
STEP 6 設定執行程式碼節點（上方）
[使用的程式碼]
tmp.liffId = "XXXXXXXX";
tmp.sharecode = `https://liff.line.me/${tmp.liffId}?redirectUrl=/customize/XXX%3FfromId=X`;
紅字請依照前面設定的 LINE LIFF ID、API 路徑進行變更
例如：LIFF ID 為 1657292654-aaaaaaaa，API 路徑為 wurl
則修改為
tmp.liffId = "1657292654-aaaaaaaa";
tmp.sharecode = `https://liff.line.me/${tmp.liffId}?redirectUrl=/customize/wurl%3FfromId=1`;
＊ 補充說明 ＊
網址內的 wurl 是對應前面 STEP 3 自訂 API 路徑，需跟前面一樣
數字的部分是對應前面 STEP 5 會給哪一個版本的內容
在決策點1後面的執行程式碼節點設定完成後
決策點2後面的執行程式碼也要修改，tmp.sharecode 後面的數字部分須調整為 2
STEP 7 設定執行程式碼節點（下方）
[使用的程式碼]
tmp.liffId = "XXXXXXXX";
tmp.shareHref = `https://liff.line.me/${tmp.liffId}?redirectUrl=/customize/XXX%3FfromId=${request.get.fromId}`;
紅字請依照前面設定的 LINE LIFF ID、API 路徑進行變更
例如：LIFF ID 為 1657292654-aaaaaaaa，API 路徑為 wurl
則修改為
tmp.liffId = "1657292654-aaaaaaaa";
tmp.shareHref = `https://liff.line.me/${tmp.liffId}?redirectUrl=/customize/wurl%3FfromId=${request.get.fromId}`;
＊ 補充說明 ＊
網址內的 wurl 是對應前面 STEP 3 自訂 API 路徑，需跟前面一樣
STEP 8 編輯 Flex 訊息
Flex 編輯完成後，需要調整分享給別人的按鈕網址
[使用的網址]
https://liff.line.me/XXXXXXXX?redirectUrl=%2Fcustomize%2FXXX%3FfromId%3DX
例如：https://liff.line.me/1657292654-aaaaaaaa?redirectUrl=%2Fcustomize%2Fwurl%3FfromId%3D1
紅色對應 LIFF ID
綠色對應 自訂 API 路徑
黃色對應 決策點的數字
需要自行依照設定變更後貼入網址部分
STEP 9 複製 JSON
點擊檢視 JSON
複製 JSON
STEP 10 編輯程式碼節點（下方）
點擊程式碼節點，並先將以下程式碼鍵入
[使用的程式碼]
tmp.data = [
（STEP 9 的複製內容）
]
貼入完成後需將分享好友的網址修改為 tmp.shareHref
[使用的程式碼]
tmp.shareHref
STEP 11 設定回應請求節點
將回應狀態選擇為 200 - 請求成功 OK，並貼上以下程式碼
[使用的程式碼]
<!DOCTYPE html>
<html lang="en">
<head> <meta charset=UTF-8> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=viewport content="width=device-width, initial-scale=1.0"> <title>分享訊息</title></head>
<body></body>
</html>
<script src=https://static.line-scdn.net/liff/edge/2/sdk.js></script>
<script> const url = new URL(location.href); const liffId = "${tmp.liffId}"; localStorage.setItem("GOSU_STORE:" + liffId + ":redirectUrl", url);
async function run() { window.liff = liff;
if (!liff.isInClient()) { location.href = "https://liff.line.me/" + liffId; setTimeout(() => { liff.closeWindow(); }, 100); }
if (!liff.isLoggedIn()) { await liff.login(); } if (liff.isApiAvailable('shareTargetPicker')) { await liff.shareTargetPicker(${JSON.stringify(tmp.data)}); liff.closeWindow() } else { console.log("不支援 shareTargetPicker"); } }
async function main() { await loadDebugTools(); await liff.init({ liffId }); const isLoggedIn = liff.isLoggedIn(); await run(); }
async function loadDebugTools() { if (url.searchParams.get('debug') != null) { const vConsoleScript = document.createElement('script'); vConsoleScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/vConsole/3.4.1/vconsole.min.js'; await new Promise((resolve, reject) => { vConsoleScript.onload = resolve; vConsoleScript.onerror = reject; document.head.appendChild(vConsoleScript); }); const vConsole = new VConsole(); window.debug = true; } }
document.body.onload = function() { main().catch(error => console.error(error)); };</script>
STEP 12 群發訊息（如有需要將內容推播給使用者）
複製 STEP 9 編輯完成的 JSON 後
在群發訊息的編輯中點選與原本設定一樣的 Flex 版型，
點擊檢視 JSON 後將複製 STEP 9 編輯完成的 JSON 取代原有內容，就可以進行推播。
＊ 補充說明 ＊
上方流程的決策點為觸發哪一個 Flex，可以依據活動調整觸發關鍵字