使用 Supabase 實現 Github 認證鑑權

前言

Supabase 使用的是 postgresql 的 Row Level Security (RLS)，可以限制不同使用者對同一張表的不同資料行的訪問許可權。這種安全機制可以確保只有授權使用者才能訪問其所需要的資料行，保護敏感資料免受未授權的訪問和操作。

Auth Providers

開啟 Supabase Providers 頁面，這裏我們可以看到 Supabase 提供了 20 多種驗證方式：

我們可以根據自己專案的實際情況選擇適合的第三方登入，這裏我們以 Github 為例。

配置 Github OAuth Apps

1. 開啟 OAuth Apps 頁面，點選 New Oauth App

2. 填入專案的資訊，這裏的 Homepage URL 我們可以先填本地開發的地址，等部署上線再改成線上地址，Authorization callback URL 填入 Supabase 提供的 Callback URL (for OAuth)，然後點選 Register Application

3. 開啟剛建立的 Oauth App，這裏可以根據需要設定 Oauth App 資訊，點選 Generate a new client secret 複製金鑰

4. 開啟 Supabase Providers 頁面，找到 Github，將 Client ID 和 Client Secret 分別填入，點選 Save。

Nuxt3 登入鑑權

Nuxt3 中整合了 @nuxtjs/supabase，我們只需要準備兩個檔案即可：login.vue、confirm.vue。

1. 新建 /pages/login/index.vue 檔案：

  <script setup>
 const colorMode = useColorMode()
 const user = useSupabaseUser()
 const { auth } = useSupabaseClient()

 const redirectTo = `${useRuntimeConfig().public.baseUrl}/confirm`

 watchEffect(() => {
   if (user.value) {
     navigateTo('/')
   }
 })
 </script>

 <template>
   <div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">
     <h2 class="my-6 text-center text-3xl font-extrabold u-text-white">登入您的賬戶</h2>
     <el-card class="sm:mx-auto sm:w-full sm:max-w-md">
       <el-divider>請選擇</el-divider>
       <el-button
         type="primary"
         size="large"
         :dark="colorMode.value === 'dark'"
         class="w-full"
         @click="auth.signInWithOAuth({ provider: 'github', options: { redirectTo } })"
       >
         <Icon name="i-simple-icons-github" class="h-5 w-5 mr-2" />
         Github
       </el-button>
     </el-card>
   </div>
 </template>

2. 新建 /pages/confirm/index.vue 檔案：

  <script setup>
 const user = useSupabaseUser()

 watch(
   user,
   () => {
     if (user.value) {
       return navigateTo('/')
     }
   },
   { immediate: true }
 )
 </script>

 <template>
   <div>
     <p>正在登入...</p>
   </div>
 </template>

最終效果

總結

透過本篇文章你可以學到如何在 Supabase 中使用 Github 授權登入，透過身份認證後我們就可以在 Supabase 中進行資料庫相應操作。