Supabase的身份認證和會員管理

更新 發佈閱讀 5 分鐘
raw-image

Supabase裡的每個專案都自帶一組開箱即用的會員系統和身份認證系統,只需要使用Supabase提供的SDK,不管是身份認證、登入、登出、會員管理,處理TOKEN等功能都包在裡面處理到好,相當實用。

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

身份認證介面

身份驗證的頁面和上篇文章的頁籤相同,這個頁面裡的Users即是指目前在這個APP中已經註冊的人是哪些人。

Supabase的Row Level Security(資料列安全原則)
raw-image

目前右邊應該是空空如也,一個人也沒有,因為這個專案還沒有任何一個人註冊。

Providers頁面

Supabase預設提供用戶email和密碼、magic link的登入方式,,也有提供多種第三方登入選項可以給管理員選擇是否開啟,其中包含也最多人使用的Facebook、Google登入方式,如果專案是專門給開發者使用可以考慮使用Github登入。

以臺灣來說只差在沒有提供Line登入的選項,其餘的都相當實用,手機門號的登入僅限特定區域可使用就暫時不考慮。

raw-image

串接的方式也相對簡單,較困難的地方大概只有去平台申請第三方登入需要填很多資料,申請完成後拿到對應的Client ID和Client Secret,按照頁面裡指定的欄位填入,並且把返回的URL設定成後台指定的位置即可,實際的設定之後實作環節再詳細檢視。

Email Templates頁面

raw-image

Email Templates頁面可以設定要寄送給用的email長什麼樣,在這裡可以自訂mail的格式,當然如果不想設定也沒關係,Supabase就有提供每種情境的預設模板,如果有自己修改就會看起來更加客製化。

URL Configuration頁面

raw-image

這頁面就是設定主要客戶端的URL位置,還有允許的返回URL。

其中返回URL是第三方登入使用的地方,只有在列表裡面的白名單url才會正確返回頁面,否則登入就算成功也會被導回首頁。

新增首位使用者

為專案新增首位使用者吧!這方法也是手動新增使用者的方式。

raw-image

回到Users頁籤點擊右上角的Add user,可以看到兩種選擇,上面的是發送magic link給用戶,下面的則是走比較正式的email和密碼的登入方式,這裡示範就直接用magic link的方式登入吧。

raw-image

直接填入自己的email後按發送,就會送出邀請email。

raw-image

使用者資料位置

使用Supabase時,操作使用者登入、登出、第三方登入、email登入這些事情都完全交給Supabase的SDK去操作即可,如果在資料庫中需要判斷使用者資訊則使用每個使用者的UID作為判斷就好。

查詢的位置可以在原本的Users頁面直接看,或是回到Table Editor頁面,schema選到auth後,下方選擇users表格即可一覽所有使用者資料,如同下圖中位置。

raw-image

但要注意原則上不會手動去操做public以外的表格或欄位,如果要為每個使用者建立自己的表格用來紀錄使用者資訊,則可以使用Triggers的功能,詳細的整個範例可以直接使用參考Supabase提供的整個模板。

raw-image

如果有使用的話可以看到supabase提供完整sql模板,並且使用Triggers的功能,在使用者被新建的時候觸發,並把使用者的資料塞入表格指定欄位裡面,如果是實作第三方登入的話還會把頭圖給存進資料庫內。

總結

Supabase提供的會員管理系統功能相當完整,能夠提供開發者更安心的去開發產品,若日後APP成長到需要客製的程度也能提供完整幫助,當然現在講很多好處可能沒那麼有同感,要等到之後篇章實際串接起來以後才知道開發的舒適程度。

有興趣的內容

留言
avatar-img
鼻爾蓋茲筆一下
6會員
28內容數
沙龍新手
鼻爾蓋茲筆一下的其他內容
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
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
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是什麼、基本功能應用,
Thumbnail
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。 Supabase的資料庫基底是PostgreSQL,在PostgreSQL中又是有著各種表格,以及各種欄位所構成,接下來搭配介面介紹。如果想要對Post
Thumbnail
嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supabase的進階功能應用。 Supabase的資料庫基底是PostgreSQL,在PostgreSQL中又是有著各種表格,以及各種欄位所構成,接下來搭配介面介紹。如果想要對Post
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News