Supabase的JavaScript Client Library串接實作

supabase-js優點

專案開始前準備

取得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模板，直接點擊專案右上角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是相當好上手，而且官方有提供相當完整的文件，可以直接在上面查詢一些額外的參數如何攜帶等資訊。 Supabase Javascript Client — Introduction 有興趣的內容 Zeabur：一個讓您的服務部署變得輕而易舉的平台，無論您使用何種程式語言或開發框架，都能快速上手，釋放您的創造力！ 六角學院的Vue直播班課程：掌握Vue 3的神秘面紗，透過專業指導和實戰練習，打造屬於您的獨特網站作品，讓您在前端開發的道路上一馬當先！