Supabase的用戶管理系統by API

更新於 發佈於 閱讀時間約 8 分鐘
raw-image

在上篇文章中我們實際安裝並且使用了supabase-js連接我們的supabase資料庫,並且已經測試成功。

Supabase的身份認證和會員管理

本篇文章就來導覽一下supabase-js的文件,還有在頁面裡面示範會員管理系統的登入和登出,以及在客戶端的操作。

嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。

supabase-js文件

在每個supabase專案裡面都有一份快速上手的文件,而且這份文件是自動生成出來的文件,這個意思是說只要這個專案裡面資料庫的表格有任何新增,這份文件就有對應的文件可以查詢,如果對於API有更多選項想要查詢的話可以另外在官網的地方查詢詳細文件。

快速上手文件

快速上手文件的位置就在每個supabase專案裡面,一樣進入專案後台以後,進入API Docs的頁籤。

raw-image

在這裡就有寫基本supabase-js的安裝和初始化的方式,這些方式在上篇文章中都有提到所以先跳過,在下面User Management的頁面裡面就有寫所有關於會員管理系統的內容。

會員管理系統的說明文件

會員管理系統的說明文件

在Tables and Views的頁面裡面就是對應supabase的資料庫表格和欄位,裡面有寫基本的查詢表格內容該如何撰寫、插入資料與刪除資料,或是直接在查詢的時候過濾資料也有詳細介紹,有需要的時候記得來這個頁面裡面查看一下。

完整文件

這個supabase-js套件本身已經包含所有REST API,只需要按照使用情境調用符合的功能即可;除了最一開始的初始化和安裝,套件還分成4大部分,DATABASE(DB操作)、AUTH(會員管理)、REALTIME(實時更新)、STORAGE(儲存庫操作)等區塊,這些區塊都可以在文件的左方直接找到,或是直接在搜尋欄位內直接搜尋。

當然如果有需要安裝與初始化可以參考我的上篇文章。

AUTH(會員管理)實作

會員管理就是註冊登入登出等功能串接,馬上先去文件裡面查查有關的內容。

會員說明文件中有關註冊會員與登入會員的部分

會員說明文件中有關註冊會員與登入會員的部分

註冊實作

預計在註冊的頁面裡面使用上面的signup這個函式,點擊註冊的時候把email和密碼送出。

在前端頁面中嘗試會員登入

在前端頁面中嘗試會員登入

上方圖是我的註冊畫面,在頁面裡面就使用兩個變數分別紀錄用戶輸入的email和密碼,點擊註冊按鈕的時候就把email和密碼帶入doSignUp裡面,用一個loading記錄是否正在等待,等待註冊結束以後把loading狀態取消,程式碼大概是長得像下面這樣。

const loading = ref(false)
const doSignUp = async ({ email, password }) => {
loading.value = true
const { data, error } = await supabase.auth.signUp({
email: email,
password: password
})
loading.value = false
}

登入實作

raw-image

登入大概跟註冊長得90%相似,頁面如上圖所示,一樣會準備兩個變數記錄用戶輸入的email和密碼,loading變數記錄是否正在等待,點擊登入按鈕執行doLogin,程式碼大概長得跟下方一樣。

const loading = ref(false)
const doLogin = async ({ email, password }) => {
loading.value = true
const { data, error } = await supabase.auth.signInWithPassword({
email: email,
password: password
})
loading.value = false
}

session介紹

用戶成功登入或註冊成功以後,supabase-js就會自動幫我們把登入狀態session處理好了,在session有效的期間發送的request都有夾帶用來辨別身份的資訊在headers裡面,完全不用自己動手處理用戶登入狀態等問題。

當然如果要記錄用戶的識別ID可以從剛剛註冊和登入成功的返回資訊裡面找到,或是使用supabase.auth.getUser()或supabase.auth.getSession()重新取得用戶資訊。

登出實作

登出和註冊和登入一樣都有專屬的函式可以調用,這個登出就是把儲存在用戶端的session給註銷掉。

raw-image

登出在我的畫面上是放在Header上面,有登入的狀態才會顯示登出兩字,點擊會執行登出。

raw-image

而這段程式碼也更簡短一點,需要注意的是如果本身在APP有紀錄用戶ID和email的地方也要一起清除,大概長得像下面這樣。

const logout = async () => {
const { error } = await supabase.auth.signOut()
store.id = ''
store.email = ''
}

維持登入狀態

在用戶已登入的狀態下,用戶再度開啟APP頁面或是用戶重新整理頁面,正常前端需要把儲存的登入狀態session拿出來檢查,用來復原用戶的登入狀態,而這件事情supabase-js也已經幫我們做好了,只需要調用用戶狀態變更事件就可以接收到用戶的登入狀態session,範例程式碼如下方。

<script setup>
import { useUserStore } from './stores/user'
import supabase from './supabase'
import { onMounted } from 'vue'


const store = useUserStore()
onMounted(async () => {
supabase.auth.onAuthStateChange((_, session) => {
if (session === null) return
store.id = session.user.id
store.email = session.user.email
})
})

</script>

第一個參數是事件名稱,有多個相對應的事件可以處理,建議直接參考onauthstatechange文件,第二個參數則是重要的登入狀態session,當然如果原本用戶就沒有登入的話會是null,拿到session後就可以決定要讓用戶重回登入還是去別的地方。

總結

supabase-js的函式庫中,註冊、登入和登出都相當簡短易讀,而且把常用的功能都準備好給開發者直接調用,這樣在開發APP的時候就免於撰寫常用的登入登出邏輯,以及減少人為的疏失,讓開發者能更專注於APP全新功能上。

有興趣的內容

留言
avatar-img
留言分享你的想法!
avatar-img
技術叢林
6會員
23內容數
沙龍新手
技術叢林的其他內容
2023/10/05
前面文章有說明過訂閱資料庫的更新事件,讓前端畫面能夠收到更新資訊即時反應在用戶面前,那接下來要介紹Supabase的Webhooks則是能讓其他server端收到資料庫事件的通知。 這裡簡單說明一下Webhooks,一般來說是由前端主動呼叫後端API,取回資料,Webhooks則是由後端伺服器觸發某
Thumbnail
2023/10/05
前面文章有說明過訂閱資料庫的更新事件,讓前端畫面能夠收到更新資訊即時反應在用戶面前,那接下來要介紹Supabase的Webhooks則是能讓其他server端收到資料庫事件的通知。 這裡簡單說明一下Webhooks,一般來說是由前端主動呼叫後端API,取回資料,Webhooks則是由後端伺服器觸發某
Thumbnail
2023/09/28
本篇文章又要介紹Supabase好用的實時更新功能,叫做Presence。Presence是 Supabase 提供的一項實時更新功能,讓開發者能夠輕鬆實現用戶之間的實 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supa
Thumbnail
2023/09/28
本篇文章又要介紹Supabase好用的實時更新功能,叫做Presence。Presence是 Supabase 提供的一項實時更新功能,讓開發者能夠輕鬆實現用戶之間的實 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supa
Thumbnail
2023/09/15
Supabase是使用PostgreSQL作為資料庫,所以當然也具有Storage的功能,能夠儲存用戶的圖片或是檔案,一樣可以設定讀取權限相當方便,一起瞭解如何操作。 從後台的大頁籤就可以進去Storage頁面,頁面和資料庫表格有點類似,如果有新增任何buckets就會顯示在All buckets的
Thumbnail
2023/09/15
Supabase是使用PostgreSQL作為資料庫,所以當然也具有Storage的功能,能夠儲存用戶的圖片或是檔案,一樣可以設定讀取權限相當方便,一起瞭解如何操作。 從後台的大頁籤就可以進去Storage頁面,頁面和資料庫表格有點類似,如果有新增任何buckets就會顯示在All buckets的
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
前面文章有說明過訂閱資料庫的更新事件,讓前端畫面能夠收到更新資訊即時反應在用戶面前,那接下來要介紹Supabase的Webhooks則是能讓其他server端收到資料庫事件的通知。 這裡簡單說明一下Webhooks,一般來說是由前端主動呼叫後端API,取回資料,Webhooks則是由後端伺服器觸發某
Thumbnail
前面文章有說明過訂閱資料庫的更新事件,讓前端畫面能夠收到更新資訊即時反應在用戶面前,那接下來要介紹Supabase的Webhooks則是能讓其他server端收到資料庫事件的通知。 這裡簡單說明一下Webhooks,一般來說是由前端主動呼叫後端API,取回資料,Webhooks則是由後端伺服器觸發某
Thumbnail
Supabase是使用PostgreSQL作為資料庫,所以當然也具有Storage的功能,能夠儲存用戶的圖片或是檔案,一樣可以設定讀取權限相當方便,一起瞭解如何操作。 從後台的大頁籤就可以進去Storage頁面,頁面和資料庫表格有點類似,如果有新增任何buckets就會顯示在All buckets的
Thumbnail
Supabase是使用PostgreSQL作為資料庫,所以當然也具有Storage的功能,能夠儲存用戶的圖片或是檔案,一樣可以設定讀取權限相當方便,一起瞭解如何操作。 從後台的大頁籤就可以進去Storage頁面,頁面和資料庫表格有點類似,如果有新增任何buckets就會顯示在All buckets的
Thumbnail
本篇文章主要介紹Supabase裡的Trigger的功能,詳細說明什麼是Trigger和使用時機,以及如何在後台瀏覽和設定Trigger,此外,文章中會提供一個常用的Trigger功能範例。 善用觸發器(Trigger)的話,能夠幫助開發者減少重複執行的工作,提高資料庫效能和安全性,可以說是一個強大
Thumbnail
本篇文章主要介紹Supabase裡的Trigger的功能,詳細說明什麼是Trigger和使用時機,以及如何在後台瀏覽和設定Trigger,此外,文章中會提供一個常用的Trigger功能範例。 善用觸發器(Trigger)的話,能夠幫助開發者減少重複執行的工作,提高資料庫效能和安全性,可以說是一個強大
Thumbnail
這篇要介紹的是Supabase裡的Functions,我不知道有沒有官方的中文譯名,我都直接稱呼為函式或程式。Functions就是和任何程式語言裡面所認識的函式一樣,只差在這個Functions是在PostgreSQL裡面執行,沒有聽錯是在資料庫裡面執行的函式,文章會介紹新增的方式和做一個範例。
Thumbnail
這篇要介紹的是Supabase裡的Functions,我不知道有沒有官方的中文譯名,我都直接稱呼為函式或程式。Functions就是和任何程式語言裡面所認識的函式一樣,只差在這個Functions是在PostgreSQL裡面執行,沒有聽錯是在資料庫裡面執行的函式,文章會介紹新增的方式和做一個範例。
Thumbnail
在supabase裡可以直接從客戶端讀取資料庫中的資料,在設定好RLS的前提之下,更可以對資料庫直接進行新增、修改、刪除等操作。 先進到後台選擇SQL Editor,可以來到SQL編輯器的頁面,如果是本身會寫資料庫相關的SQL內容可以直接點擊上方的New query按鈕,可以開啟一個空白頁面開始編輯
Thumbnail
在supabase裡可以直接從客戶端讀取資料庫中的資料,在設定好RLS的前提之下,更可以對資料庫直接進行新增、修改、刪除等操作。 先進到後台選擇SQL Editor,可以來到SQL編輯器的頁面,如果是本身會寫資料庫相關的SQL內容可以直接點擊上方的New query按鈕,可以開啟一個空白頁面開始編輯
Thumbnail
在上篇文章中Supabase的JavaScript Client Library串接實作我們實際安裝並且使用了supabase-js連接我們的supabase資料庫,並且已經測試成功。本篇文章就來導覽一下supabase-js的文件,還有在頁面裡面示範會員管理系統的登入和登出,以及在客戶端的操作。嗨
Thumbnail
在上篇文章中Supabase的JavaScript Client Library串接實作我們實際安裝並且使用了supabase-js連接我們的supabase資料庫,並且已經測試成功。本篇文章就來導覽一下supabase-js的文件,還有在頁面裡面示範會員管理系統的登入和登出,以及在客戶端的操作。嗨
Thumbnail
Supabase的串接方式很多元,其中在網頁前端中使用起來最簡單也最推薦的方式就是使用官方提供的supabase-js套件,該套件已經把所有REST和REALTIME的API功能包好,可以方便的在網頁中提取使用。嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什
Thumbnail
Supabase的串接方式很多元,其中在網頁前端中使用起來最簡單也最推薦的方式就是使用官方提供的supabase-js套件,該套件已經把所有REST和REALTIME的API功能包好,可以方便的在網頁中提取使用。嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什
Thumbnail
Supabase裡的每個專案都自帶一組開箱即用的會員系統和身份認證系統,只需要使用Supabase提供的SDK,不管是身份認證、登入、登出、會員管理,處理TOKEN等功能都包在裡面處理到好,相當實用。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功
Thumbnail
Supabase裡的每個專案都自帶一組開箱即用的會員系統和身份認證系統,只需要使用Supabase提供的SDK,不管是身份認證、登入、登出、會員管理,處理TOKEN等功能都包在裡面處理到好,相當實用。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功
Thumbnail
是時候討論資料庫安全性的時候!還記得上一篇Supabase的資料庫和表格文章中,建立一個新的表格時有把一個RLS的按鈕打開,這篇文章就是簡單的說明一下RLS是什麼,以及RLS如何設定等等範例。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,
Thumbnail
是時候討論資料庫安全性的時候!還記得上一篇Supabase的資料庫和表格文章中,建立一個新的表格時有把一個RLS的按鈕打開,這篇文章就是簡單的說明一下RLS是什麼,以及RLS如何設定等等範例。 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News