网站LOGO
白雾茫茫丶
页面加载中
7月21日
网站LOGO 白雾茫茫丶
记录学习、生活和有趣的事
菜单
  • 白雾茫茫丶
    记录学习、生活和有趣的事
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    Nuxt3 实战 (九):使用 Supabase 实现 Github 认证鉴权
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    • 复制图片
    • 复制图片地址
    • 百度识图
    按住ctrl可打开默认菜单

    Nuxt3 实战 (九):使用 Supabase 实现 Github 认证鉴权

    谢明伟 · 原创 ·
    前端开发Nuxt3 实战 · VueNuxt
    共 3543 字 · 约 1 分钟 · 500

    前言

    Supabase 使用的是 postgresqlRow 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 复制密钥
    1. 打开 Supabase Providers 页面,找到 Github,将 Client IDClient Secret 分别填入,点击 Save

    Nuxt3 登录鉴权

    Nuxt3 中集成了 @nuxtjs/supabase,我们只需要准备两个文件即可:login.vueconfirm.vue

    1. 新建 /pages/login/index.vue 文件:

      html 代码:
        <script setup lang="ts">
       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 文件:

      html 代码:
        <script setup lang="ts">
       const user = useSupabaseUser()
      
       watch(
      user,
      () => {
       if (user.value) {
         return navigateTo('/')
       }
      },
      { immediate: true }
       )
       </script>
      
       <template>
      <div>
       <p class="u-text-black">正在登录...</p>
      </div>
       </template>

    最终效果

    总结

    通过本篇文章你可以学到如何在 Supabase 中使用 Github 授权登录,通过身份认证后我们就可以在 Supabase 中进行数据库相应操作。

    下篇文章我们将学习如何在 Nuxt3 中创建 RESTful 风格 API,并结合 Supabase 数据库完成网站分类的 CURD 操作。

    声明:本文由 谢明伟(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    我要发表评论 我要发表评论
    博客logo 白雾茫茫丶 记录学习、生活和有趣的事 51统计 百度统计
    MOEICP 萌ICP备20236860号 ICP 粤ICP备2023007649号 ICP 粤公网安备44030402006402号

    💻️ 谢明伟 一天前 在线

    🕛

    本站已运行 2 年 202 天 4 小时 43 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    白雾茫茫丶. © 2022 ~ 2024.
    网站logo

    白雾茫茫丶 记录学习、生活和有趣的事