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是相當好上手,而且官方有提供相當完整的文件,可以直接在上面查詢一些額外的參數如何攜帶等資訊。

有興趣的內容

為什麼會看到廣告
6會員
23內容數
沙龍新手
留言0
查看全部
發表第一個留言支持創作者!
技術叢林 的其他內容
Supabase裡的每個專案都自帶一組開箱即用的會員系統和身份認證系統,只需要使用Supabase提供的SDK,不管是身份認證、登入、登出、會員管理,處理TOKEN等功能都包在裡面處理到好,相當實用。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功
是時候討論資料庫安全性的時候!還記得上一篇Supabase的資料庫和表格文章中,建立一個新的表格時有把一個RLS的按鈕打開,這篇文章就是簡單的說明一下RLS是什麼,以及RLS如何設定等等範例。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。 Supabase的資料庫基底是PostgreSQL,在PostgreSQL中又是有著各種表格,以及各種欄位所構成,接下來搭配介面介紹。如果想要對Post
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。 Supabase將為前端開發帶來創新、便利和效率。 什麼是Supabase? Supabase官網 Supabase是一個開源的後端服務平台,提供完全可
Supabase裡的每個專案都自帶一組開箱即用的會員系統和身份認證系統,只需要使用Supabase提供的SDK,不管是身份認證、登入、登出、會員管理,處理TOKEN等功能都包在裡面處理到好,相當實用。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功
是時候討論資料庫安全性的時候!還記得上一篇Supabase的資料庫和表格文章中,建立一個新的表格時有把一個RLS的按鈕打開,這篇文章就是簡單的說明一下RLS是什麼,以及RLS如何設定等等範例。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。 Supabase的資料庫基底是PostgreSQL,在PostgreSQL中又是有著各種表格,以及各種欄位所構成,接下來搭配介面介紹。如果想要對Post
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。 Supabase將為前端開發帶來創新、便利和效率。 什麼是Supabase? Supabase官網 Supabase是一個開源的後端服務平台,提供完全可
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
您是否尋找列用AI提升寫作效率的有效策略? 在當今AI時代,我們可能都對如何提升寫作效率感到困擾。你是否曾想過,AI工具或許可以提供絕佳的解決方案?在這篇文章中,我們將透過三個重要面向來探討:利用AI寫作工具、維持人類獨特性,以及實踐提升寫作效率的方法。 在寫作過程中,我們可以透過
Thumbnail
身心平衡是每個超過30歲的人必須要維護的。 透過閱讀與寫作的平衡,你可以鍛鍊你的心靈,練習更好的消化與吸收知識。 在這裡,我將分享我如何利用閱讀與寫作這兩種方式鍛鍊心靈的三大關鍵。 關鍵1 - 讀寫的平衡:就如同飲食與運動的平衡,閱讀讓我們吸收知識,而寫作則如同運動,將所學知識消化與吸收。如果只有吸
十七年,足夠這個世界及一個國際大都會作很多轉變⋯⋯
Thumbnail
工作中,你能決定哪些部分呢? 如果一個人在工作沒什麼自由度,沒有決策權,那麼很快就會職業枯竭,有能力做但沒興趣。 我從事的學術產業,就非常需要熱情,來避免職業枯竭。下面是我掌握工作自由度,抵抗職業枯竭的3個實踐策略: 策略1 - 善用自己的決策權,打破工作中的枯燥:你必須完成老闆交代的事情,但是「完
Thumbnail
台股量縮震盪,守在5日線上,走勢仍是攻擊型態! 櫃買留下墓碑線,但上影線是多方進攻的痕跡,加上實質走勢是日出走勢,多方將持續進攻! 陸股持續拉回,近期的觀盤重點,下檔支撐不能跌破!
Thumbnail
一開始我是最反對騎機車載妳的,不過就像其他事情一樣,如果很多事情都堅持意見的話,生活大概不會過的太平順,但至少希望可以好好的使用安全帽和安全帶,好好的小心道路狀況。 以往也曾聽聞父母親從小到大都不讓孩子騎機車的事例,當時並不覺得有這個必要,甚至覺得這些父母也太誇張了。現在倒是可以體會這些父母的用心
Thumbnail
飛機劃過長空,萬里無雲的晨光下,就是那個久別了的香港!飛機上幾排椅子都無人,作為全球最繁忙的航線,都因為警暴而嚇怕遊客,不敢再來香港玩了。冷冷清清的機場暢通無阻,輕鬆過關,提取行李,天爸終於回到香港了! 這幾個月改變了香港人,由以往只看實利、貪小便宜的香港人,變成舉世皆知的抗爭民族⋯⋯
Thumbnail
BBC中文網刊登了一篇報導關於一則對印度料理批評的推特所引起的種族歧視爭議(原文『美國移民:美食保衛戰引發種族歧視大辯論』),事件起於美國國際關係學教授湯姆·尼科爾斯在推特上了嫌棄印度料理後收到各方從尼科爾斯自身品味到種族歧視等批評與討論,事後尼科爾斯承認自己只吃過美國及英國當地印度餐廳裡的餐點、
Thumbnail
不管做任何事,熱情很重要,興趣很重要,但有實質的回饋可以走更遠,像是錢。用寫文章來賺錢的方式有很多種,在網站上放廣告、接業配、加入聯盟行銷等。
Thumbnail
說到寫文章,多數人第一個反應不出以下幾種,「我作文很爛欸,國高中作文很少及格」、「我文筆不好,寫出來的東西一點都不吸引人」、「我有想過寫部落格,但不知道要寫什麼」。這三種反應有點像考試遺毒還沒解:不必再接受考試摧殘了,卻也忘了將考試分數的枷鎖卸下來;好像不考作文了,就不會再書寫。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
您是否尋找列用AI提升寫作效率的有效策略? 在當今AI時代,我們可能都對如何提升寫作效率感到困擾。你是否曾想過,AI工具或許可以提供絕佳的解決方案?在這篇文章中,我們將透過三個重要面向來探討:利用AI寫作工具、維持人類獨特性,以及實踐提升寫作效率的方法。 在寫作過程中,我們可以透過
Thumbnail
身心平衡是每個超過30歲的人必須要維護的。 透過閱讀與寫作的平衡,你可以鍛鍊你的心靈,練習更好的消化與吸收知識。 在這裡,我將分享我如何利用閱讀與寫作這兩種方式鍛鍊心靈的三大關鍵。 關鍵1 - 讀寫的平衡:就如同飲食與運動的平衡,閱讀讓我們吸收知識,而寫作則如同運動,將所學知識消化與吸收。如果只有吸
十七年,足夠這個世界及一個國際大都會作很多轉變⋯⋯
Thumbnail
工作中,你能決定哪些部分呢? 如果一個人在工作沒什麼自由度,沒有決策權,那麼很快就會職業枯竭,有能力做但沒興趣。 我從事的學術產業,就非常需要熱情,來避免職業枯竭。下面是我掌握工作自由度,抵抗職業枯竭的3個實踐策略: 策略1 - 善用自己的決策權,打破工作中的枯燥:你必須完成老闆交代的事情,但是「完
Thumbnail
台股量縮震盪,守在5日線上,走勢仍是攻擊型態! 櫃買留下墓碑線,但上影線是多方進攻的痕跡,加上實質走勢是日出走勢,多方將持續進攻! 陸股持續拉回,近期的觀盤重點,下檔支撐不能跌破!
Thumbnail
一開始我是最反對騎機車載妳的,不過就像其他事情一樣,如果很多事情都堅持意見的話,生活大概不會過的太平順,但至少希望可以好好的使用安全帽和安全帶,好好的小心道路狀況。 以往也曾聽聞父母親從小到大都不讓孩子騎機車的事例,當時並不覺得有這個必要,甚至覺得這些父母也太誇張了。現在倒是可以體會這些父母的用心
Thumbnail
飛機劃過長空,萬里無雲的晨光下,就是那個久別了的香港!飛機上幾排椅子都無人,作為全球最繁忙的航線,都因為警暴而嚇怕遊客,不敢再來香港玩了。冷冷清清的機場暢通無阻,輕鬆過關,提取行李,天爸終於回到香港了! 這幾個月改變了香港人,由以往只看實利、貪小便宜的香港人,變成舉世皆知的抗爭民族⋯⋯
Thumbnail
BBC中文網刊登了一篇報導關於一則對印度料理批評的推特所引起的種族歧視爭議(原文『美國移民:美食保衛戰引發種族歧視大辯論』),事件起於美國國際關係學教授湯姆·尼科爾斯在推特上了嫌棄印度料理後收到各方從尼科爾斯自身品味到種族歧視等批評與討論,事後尼科爾斯承認自己只吃過美國及英國當地印度餐廳裡的餐點、
Thumbnail
不管做任何事,熱情很重要,興趣很重要,但有實質的回饋可以走更遠,像是錢。用寫文章來賺錢的方式有很多種,在網站上放廣告、接業配、加入聯盟行銷等。
Thumbnail
說到寫文章,多數人第一個反應不出以下幾種,「我作文很爛欸,國高中作文很少及格」、「我文筆不好,寫出來的東西一點都不吸引人」、「我有想過寫部落格,但不知道要寫什麼」。這三種反應有點像考試遺毒還沒解:不必再接受考試摧殘了,卻也忘了將考試分數的枷鎖卸下來;好像不考作文了,就不會再書寫。