Supabase的JavaScript Client Library串接實作
閱讀時間約 5 分鐘
Supabase的串接方式很多元，其中在網頁前端中使用起來最簡單也最推薦的方式就是使用官方提供的supabase-js套件，該套件已經把所有REST和REALTIME的API功能包好，可以方便的在網頁中提取使用。
嗨歡迎閱讀我的文章！這是關於Supabase的系列文章，內容包含介紹Supabase是什麼、基本功能應用，深入了解Supabase的進階功能應用。
supabase-js優點
supabase-js是一個直接支援es6的官方套件，簡潔直觀的API，可以使用鏈式語法.的方式把DB操作、過濾、排除、分頁等功能串接一起使用；其中也包裝好所有會員管理系統、實時訂閱有關的操作，相當方便上手或維護。
專案開始前準備
取得supabase金鑰
連接supabase需要取得以下兩樣東西。
- Project URL
- Public anon token
開啟專案的後台頁面選擇Project Setting的頁籤，並且選擇API的目錄即可看到以下畫面。
上方的URL就是我們要的Project URL，下方寫著anon public的就是Public anon token，直接複製使用即可，在使用supabase-js套件的時候會用到。
service token
在supabase中使用的token都可以直接在客戶端使用，前提是需要為表格設定好完整的RLS政策，才能確保資料的安全性。
而service_role這個token是提供後端伺服器端直接訪問supabase專用的token，訪問的權限會是最高級，高於表格設定的RLS政策，算是超級管理員的存在，如果專案大小有需要使用後端訪問的話要小心使用。
開啟supabase專案開發
直接開起一個專案起來模擬一下客戶端吧，使用任意前端框架開發並不影響supabase-js套件的使用，至於我經常使用Vue框架開發，所以這裡就用Vue作為開發範例。
如果你也想要練習但缺乏一些ui，我這裡提供一個我的Github Repository模板，直接點擊supabase-starter專案右上角Use this template即可使用初始模板。
套件使用
套件安裝
使用套件首要條件就是要先安裝在專案裡面，使用以下指令安裝在專案內。
npm install @supabase/supabase-js
設定環境變數
把剛剛記錄下來的Project URL和Public anon token先設定在環境變數中，名稱就自己對應一下。
VITE_SUPABASE_URL=<SUPABASE_URL>
VITE_SUPABASE_ANON_KEY=<SUPABASE_ANON_KEY>
初始化套件
接下來在馬上在專案裡面初始化使用，在根目錄的src目錄底下新建一個supabase.js，在裡面新增以下內容。
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY
const supabase = createClient(supabaseUrl, supabaseKey)
export default supabase這麼一來專案與supabase的串接已經大功告成。
測試是否成功
有沒有串接成功還是要來測試一下才能安心，這裡就用已經有資料的使用者登入來做個簡單測試。
在前幾篇文章中測試新增使用者的時候使用magic link做登入時是沒設定密碼的，所以我有預先去後台發送重設密碼的email做設定，如遇到困難可以重新建立一個使用者使用email和密碼登入即可。
使用者登入
使用者登入使supabase提供最基本的會員管理系統功能，不需要在表格裡面新增假資料就可以使用，當然前提是要先去後台手動新增幾個使用者。
在使用者登入的地方測試一下剛剛的初始化使否有成功，還有是否真的能登入成功。
登入主要使用的是signInWithPassword這個函式，簡單的功能如下所示。
const login = async ({ email, password }) => {
const { data, error } = await supabase.auth.signInWithPassword({
email: email,
password: password
})
console.log(data)
}在功能寫好以後就在畫面上測試一下，這個畫面是我的supabase-starter模板專案。
在對應的欄位填好資料後按登入後，即可在console面板裡面看到我的登入資訊，使用的token，還有夾帶我的使用者資訊給我。
有看到這些正確的回應就代表已經串接成功，可以開始在前端專心開發你的APP。
總結
總的來說，supabase完美支援客戶端的套件supabase-js是相當好上手，而且官方有提供相當完整的文件，可以直接在上面查詢一些額外的參數如何攜帶等資訊。
有興趣的內容
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
你有聽過Solana上新推出的超強功能 「Token Extension」嗎？有了Token Extension，工程師能夠更快速的在Solana上建立專案，並且大幅增強了各個專案之間融合的便利性。如果你還不知道什麼是Token Extension，這篇文章你必須看完！
Sui Network宣布推出了其Permanen tTestnet，与之前的Testnet Waves 1和2不同，PermanentTestnet将在主网上线后继续运行，并且不会在每次软件更新后被...
🚀 币安 - 全球最大加密货币交易所
💥 独家优惠 💥 💰 注册即享 20% 手
上一篇提到要在Solana上鑄造新的token需要使用到token program，功能較為陽春。隨著各種新需求的增加同時兼顧安全性的目的，一個新的token program - token 2022 （另名token extension）被開發出來，發佈在一個新的地址上。
Token 2022在
簡介如何使用Solana Pay API整合商店頁面進行支付
※ 什麼是Web API
API 就是後端開出來讓前端來用的介面，讓前端與後端可以溝通。
API流程：
終端使用者用任何一種裝置進入瀏覽器。
瀏覽器透過 API 向後端發出請求，請求查詢或修改資料。
後端透過 API 收到前端的請求後，取得資料並回應給前端。
前端渲染畫面，終端使用者
在串接第三方 API時，需要定期刷新 token，那有沒有辦法針對 request 和 response 做配置，在 token 過期時先做刷新、再做請求呢？本文要介紹利用 axios 套件提供的攔截器刷新 token 的作法。
在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料，由於資料結構較為複雜，筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中，需要使用 defineProps 來撰寫型別定義，結果⋯⋯
※ 什麼是 RESTful API？
這種運用 HTTP 來表達語義的路由設計風格稱為 RESTful API，它描述了如何實現 Web API 的架構。所謂的 API 是應用程式介面 (application programming interface)，網址也是一種應用程式的「介面」，故稱為
在開發前後端分離架構時，使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大，揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢，但application/json會觸發預檢請求，需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
你有聽過Solana上新推出的超強功能 「Token Extension」嗎？有了Token Extension，工程師能夠更快速的在Solana上建立專案，並且大幅增強了各個專案之間融合的便利性。如果你還不知道什麼是Token Extension，這篇文章你必須看完！
Sui Network宣布推出了其Permanen tTestnet，与之前的Testnet Waves 1和2不同，PermanentTestnet将在主网上线后继续运行，并且不会在每次软件更新后被...
🚀 币安 - 全球最大加密货币交易所
💥 独家优惠 💥 💰 注册即享 20% 手
上一篇提到要在Solana上鑄造新的token需要使用到token program，功能較為陽春。隨著各種新需求的增加同時兼顧安全性的目的，一個新的token program - token 2022 （另名token extension）被開發出來，發佈在一個新的地址上。
Token 2022在
簡介如何使用Solana Pay API整合商店頁面進行支付
※ 什麼是Web API
API 就是後端開出來讓前端來用的介面，讓前端與後端可以溝通。
API流程：
終端使用者用任何一種裝置進入瀏覽器。
瀏覽器透過 API 向後端發出請求，請求查詢或修改資料。
後端透過 API 收到前端的請求後，取得資料並回應給前端。
前端渲染畫面，終端使用者
在串接第三方 API時，需要定期刷新 token，那有沒有辦法針對 request 和 response 做配置，在 token 過期時先做刷新、再做請求呢？本文要介紹利用 axios 套件提供的攔截器刷新 token 的作法。
在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料，由於資料結構較為複雜，筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中，需要使用 defineProps 來撰寫型別定義，結果⋯⋯
※ 什麼是 RESTful API？
這種運用 HTTP 來表達語義的路由設計風格稱為 RESTful API，它描述了如何實現 Web API 的架構。所謂的 API 是應用程式介面 (application programming interface)，網址也是一種應用程式的「介面」，故稱為
在開發前後端分離架構時，使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大，揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢，但application/json會觸發預檢請求，需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。