Supabase的JavaScript Client Library串接實作

鼻爾蓋茲

發佈於即時、安全、強大：探索 Supabase 的無限可能

2023/08/09閱讀時間約 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。