🔧 阿川の電商水電行

Shopify 顧問、維護與客製化

💡

小任務 / 單次支援方案

單次處理 Shopify 修正／微調

⭐️

維護方案

每月 Shopify 技術支援 + 小修改 + 諮詢

🚀

專案建置

Shopify 功能導入、培訓 + 分階段交付

👉 瞭解詳情 / 免費諮詢

站長阿川 · 12月07日

實驗一下非嵌入式 shopify app 的串接流程

說真的實在有點複雜我都眼花撩亂了

我完全不覺得 junior developer 有辦法搞清楚

實驗串接一下看看

1) 建立 custom app

這次嘗試非 embed app

app url: https://demo-connect.turn.tw/

allowed redirect url: https://demo-connect.turn.tw/redirect

取得 client id 與 secret -> 這兩個會用到

我有順便設定 distribution 為 custom 並指定給我 store domain -> 這步驟可能是必要

2) 點擊 install app

https://admin.shopify.com/?
organization_id=162618756&
no_redirect=true&
redirect=/oauth/redirect_from_developer_dashboard?
client_id%3D6b7001530576df226f1e8d6773eea438

出現我的商店選擇頁面

3) 點擊要安裝的商店

https://admin.shopify.com/store/akawaselect/oauth/redirect_from_developer_dashboard?client_id=6b7001530576df226f1e8d6773eea438

會跳轉到

https://demo-connect.turn.tw/?
hmac=cb294704a853ae327be712bb86c236098e3fb168732dd6a58a8988256d14a94c&
host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvYWthd2FzZWxlY3Q&
shop=akawaselect.myshopify.com&
timestamp=1765090150

會拿到 hmc, host, shop, timestamp

但我 server 只需要 shop 與 client id

hmac（可驗證 request，但 non-embedded 可不驗）
host（admin panel return 用）

4) 由我 server 把用戶 301 redirect 到

https://admin.shopify.com/store/akawaselect/oauth/authorize?
client_id=6b7001530576df226f1e8d6773eea438&
scope=read_products&
redirect_uri=https%3A%2F%2Fdemo-connect.turn.tw%2Fredirect

5) 會進到 admin panel 的 app install 授權頁面

https://admin.shopify.com/store/akawaselect/app/grant?
access_change_uuid=89f3b459-88cf-479f-a91f-d6f7abc95f3d&
client_id=6b7001530576df226f1e8d6773eea438

6) 點擊安裝後會 redirect 回我的 redirect uri

然後又會被我跳轉回到首頁

https://demo-connect.turn.tw/?shop=akawaselect.myshopify.com

7) 下次從 admin panel 查看 app

會發現旁邊有開新視窗的 icon

點擊之後會進到我的首頁

https://demo-connect.turn.tw/?
hmac=405d7c89fe4ad7365b28d472b707321a98d18597a56b9c11fc882ca8db64ef6b&
host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvYWthd2FzZWxlY3Q&
session=b1d035e5ae88e096d0f9bb3f908c368964134cbf7340e475ed2e5d087c600ac8&
shop=akawaselect.myshopify.com&
timestamp=1765091558

會多了 hmac, host, session, timestamp

因為是 non-embedded，沒有 app bridge -> 不需要驗證 host，也不需要 session token。

繼續找 chatgpt 研究

hmac = HMAC_SHA256(商家 request 的其他參數，使用 API Secret)

host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvYWthd2FzZWxlY3Q
這是一段 base64 encoded 字串。
解碼後是：
admin.shopify.com/store/akawaselect
Embedded App 打開後，需要用 host 來回到 Shopify Admin。

session — 用來與 Shopify Admin 的 Session Token Flow 互動
搭配 App Bridge 的 "Authenticated Fetch"，用 session token 替代神聖不可外露的 access_token。

Parameter	Embedded App	Non-Embedded App
hmac	✔ 必須驗證	❌ 完全可忽略
host	✔ 必須使用（App Bridge）	❌ 可忽略
session	✔ 必須使用（session token flow）	❌ 可忽略

說起來 none embed app 整合方式

會像這樣

https://www.youtube.com/watch?v=dPjeydiD6ro

要求客戶先登入你的系統

然後去 shopify 安裝 app

安裝完 redirect 回自家網站時因為已有 session 所以直接紀錄綁定即可

啊如果商家北七還沒登入系統就先安裝 shopify app 勒

你的 redirect URI 沒有 session → 你不知道他是誰

→ 這時你不能綁定
→ 因為你不知道是哪一個帳號
→ 最佳解（Best Practice）叫做 Deferred Binding（延後綁定）

反正我就是提供完整上架審核協助也就是協助填完一個超大的表單

成果會像這樣

https://apps.shopify.com/jenjan-fulfillment?locale=zh-TW

提供我文案與媒體素材就可以

結論

各個廠商有的 django 有的 rails 有的 nodejs

以後找我合作

我就通通用 linode + laravel 無資料庫無 session

拿到 store domain + access token 後面沒我的事

我在面對未來所有廠商

我就說找我合作只要知道5件事

1) 接收 store domain + access token 的 http post 網址

我會這樣丟過去

{
  "shop": "xxx.myshopify.com",
  "access_token": "shpat_xxxx"
}

2) 要求對方限定 allow my linode ip -> 以免被別人亂丟

3) 告訴我 token bind 完要 redirect 到哪 -> target url 是否已登入不關我的事

http 302 redirect → https://vendor.com/shopify/success?shop=xxx.myshopify.com

4) 因為權限超大我會提供 linode 完整 ssh 權限可以上去看程式碼完全無 session 與 database

5) 注意分成商家先登入/未登入兩種情境要給我一組測試帳號密碼我開發過程要用上架時審核員也會需要

站長阿川

每週二 YT 直播 Q&A（可 Discord Call-in）
YT：https://www.youtube.com/@codelove_tw
DC：https://discord.gg/fvCF2whZ9D

⭐️ Shopify 技術教練（給工程師）
https://job.turn.tw/developer-coaching

⭐️ Shopify 接案服務（給品牌）
https://job.turn.tw/shopify-services

⭐️ 台灣 Shopify 開發者 LINE 群（非官方）
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA

1個讚 1留言 51瀏覽

按讚的人：

共有 1 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

站長阿川 6小時前

找 AI 寫的最簡單串接

不確定流程是否為 best practice

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class ShopifyController extends Controller
{
    public function index(Request $request)
    {
        // Shopify 必定傳入 shop=xxxxx.myshopify.com
        $shop = $request->query('shop');

        if (!$shop) {
            return 'Missing ?shop=xxxxx.myshopify.com';
        }

        // 從 DB 找現有 token （POC 用 session 模擬）
        $token = session("token_{$shop}");

        // 已安裝 → 直接進入 app 面板
        if ($token) {
            return "已安裝 App，商店 {$shop} 的 Token 是：<br>".$token;
        }

        // 尚未安裝 → 跳 OAuth Flow
        $clientId = '6b7001530576df226f1e8d6773eea438';

        $scopes = 'read_products';
        // $redirectUri = route('shopify.redirect');
        $redirectUri = 'https://demo-connect.turn.tw/redirect';

        $authorizeUrl = "https://{$shop}/admin/oauth/authorize?".http_build_query([
            'client_id' => $clientId,
            'scope' => $scopes,
            'redirect_uri' => $redirectUri,
        ]);

        return redirect($authorizeUrl);
    }

    public function redirect(Request $request)
    {
        $shop = $request->get('shop');
        $code = $request->get('code');

        if (!$shop || !$code) {
            return 'Missing shop or code.';
        }

        $clientId = '6b7001530576df226f1e8d6773eea438';
        $clientSecret = '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';

        // 呼叫 Shopify 換永久 access token
        $response = Http::post("https://{$shop}/admin/oauth/access_token", [
            'client_id' => $clientId,
            'client_secret' => $clientSecret,
            'code' => $code,
        ]);

        if ($response->failed()) {
            return 'Token exchange failed: '.$response->body();
        }

        $accessToken = $response->json('access_token');

        // POC → 先存在 Session
        session(["token_{$shop}" => $accessToken]);

        return redirect('/?shop='.$shop);
    }
}

1個讚回覆

按讚的人：

留言......

站長阿川

🏆 本月排行榜

🥇

站長阿川

📝16 💬4 ❤️4

362

🥈

我愛JS

📝1 💬5 ❤️2

評分標準：發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10

本數據每小時更新一次

🔧 阿川の電商水電行

Shopify 顧問、維護與客製化

💡

小任務 / 單次支援方案

單次處理 Shopify 修正／微調

⭐️

維護方案

每月 Shopify 技術支援 + 小修改 + 諮詢

🚀

專案建置

Shopify 功能導入、培訓 + 分階段交付

👉 瞭解詳情 / 免費諮詢