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

简介: 这篇文章介绍了如何在Supabase中使用Github授权登录并实现用户身份验证。文章首先说明了Supabase采用postgresql的Row Level Security(RLS)机制来控制不同用户对数据表访问权限的重要性,然后详细介绍了配置Github OAuth Apps的过程,包括创建新的OAuth应用、填写项目信息、设置回调URL等步骤。接着,文章展示了在Nuxt3中实现登录界面的代码示例,最后总结了通过本教程可以学习到的技能,并预告了下一篇文章将介绍如何在Nuxt3中创建RESTful风格API并结合Supabase数据库完成CURD操作。

前言

Supabase 使用的是 postgresqlRow Level Security (RLS),可以限制不同用户对同一张表的不同数据行的访问权限。这种安全机制可以确保只有授权用户才能访问其所需要的数据行,保护敏感数据免受未授权的访问和操作。

Auth Providers

打开 Supabase Providers 页面,这里我们可以看到 Supabase 提供了 20 多种验证方式:

769valdrmyzvrrjvs8ryhy547v2gmo4q.png

我们可以根据自己项目的实际情况选择适合的第三方登录,这里我们以 Github 为例。

配置 Github OAuth Apps

  1. 打开 OAuth Apps 页面,点击 New Oauth App
    kybgh4krmvmt47o8ncwcdgeeqb10ykfw.png

  2. 填入项目的信息,这里的 Homepage URL 我们可以先填本地开发的地址,等部署上线再改成线上地址,Authorization callback URL 填入 Supabase 提供的 Callback URL (for OAuth),然后点击 Register Application
    r1gg4ms18v5p817q458x0uaz1pi7h7ej.png

  3. 打开刚创建的 Oauth App,这里可以根据需要设置 Oauth App 信息,点击 Generate a new client secret 复制密钥
    v3w8mpgtl8xqaas2w5zuamed6fguzs0u.png

  4. 打开 Supabase Providers 页面,找到 Github,将 Client IDClient Secret 分别填入,点击 Save
    ecefyrlhij3c72ho0f63ksjss71gxwun.png

Nuxt3 登录鉴权

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

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

    <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 文件:

    <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>
    

最终效果

xhcb3wi5lfqoggl36wt82h045635wxsm.gif

总结

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

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

相关文章
|
2月前
|
开发工具 数据安全/隐私保护 git
Github新的认证方式
Github新的认证方式
104 0
|
2月前
|
消息中间件 安全 druid
GitHub昙花一现!《Spring Boot趣味实战课》神作开源几分钟被下架
今天给大家分享好书了:刘水镜老师的 《Spring Boot趣味实战课》,网上依旧是没有开源版本!小编会在文末附电子版免费下载方式。 刘水镜是谁? 十余年持续技术文章输出,CSDN博客专家。2020年《 Spring Boot趣味私房课》专栏上线,凭借风趣幽默、深入浅出的写作风格深受读者好评。 《Spring Boot趣味实战课》 内容丰富、趣味实战是本书的两大特色 涵盖 Spring MVC、MyBatis Plus、Spring DaJPA、Spring Security、Quartz等主流框架 整合MySQL. Druid、Redis、 RabbitMQ、Elastics
65 0
爆赞!GitHub首本Python开发实战背记手册,标星果然百万名不虚传
Python (发音:[ 'paiθ(ə) n; (US) 'paiθɔn ] n. 蟒蛇,巨蛇 ),是一种面向对象的解释性的计算机程序设计语言,也是一种功能强大而完善的通用型语言,已经具有十多年的发展历史,成熟且稳定。Python 具有脚本语言中最丰富和强大的类库,足以支持绝大多数日常应用。 Python 语言的特点:
|
1月前
|
开发者 Python
GitHub飙升!京东认证的“Python编程入门三剑客”究竟好在哪?
Python凭借着简单易学、功能强大,已经跃居TIOB编程语言榜首,并且已经开始了它的霸榜之旅。如何选择一套适合自己的Python学习教程,是每个Python爱好者面临的首要问题。
|
1月前
|
JSON 数据挖掘 API
数据分析实战丨基于pygal与requests分析GitHub最受欢迎的Python库
数据分析实战丨基于pygal与requests分析GitHub最受欢迎的Python库
28 2
|
1月前
|
开发者 Python
GitHub飙升!京东认证的“Python编程入门三剑客”究竟好在哪?
Python凭借着简单易学、功能强大,已经跃居TIOB编程语言榜首,并且已经开始了它的霸榜之旅。如何选择一套适合自己的Python学习教程,是每个Python爱好者面临的首要问题。 今天给小伙伴们带来的是图灵&京东认证的“Python编程入门三剑客”,先看《Python编程从入门到实践》,打好Python入门的底子;再看《Python编程快速上手》,增强用Python处理工作中实际问题的能力;最后看《Python极客项目编程》,用充满想象力的实战案例,充分理解Python编程的奥秘,完成从小白到大神的进化。
|
21天前
|
数据采集 搜索推荐 JavaScript
GitHub星标3500的Python爬虫实战入门教程,限时开源!
爬虫的全称为网络爬虫,简称爬虫,别名有网络机器人,网络蜘蛛等等。 网络爬虫是一种自动获取网页内容的程序,为搜索引擎提供了重要的数据支撑。搜索引擎通过网络爬虫技术,将互联网中丰富的网页信息保存到本地,形成镜像备份。我们熟悉的谷歌、百度本质上也可理解为一种爬虫。 如果形象地理解,爬虫就如同一只机器蜘蛛,它的基本操作就是模拟人的行为去各个网站抓取数据或返回数据。
|
2月前
|
SQL Oracle 前端开发
Oracle效率分析,Github标星25K+超火的前端实战项目
Oracle效率分析,Github标星25K+超火的前端实战项目
|
2月前
|
安全 数据安全/隐私保护
【GitHub】2FA认证(双重身份验证)
【GitHub】2FA认证(双重身份验证)
116 6
|
2月前
|
缓存 运维 监控
GitHub现新霸主!「Java并发编程实战攻略」竟是阿里内部顶级机密
随着经济环境下行,大厂降本增效、筛除了一部分冗余岗位,原本荒蛮的 IT 行业发展正在逐步进入正轨中。虽说依旧算是不温不火,但在今年的技术招聘市场上,Java 依旧是当仁不让的霸主!
64 1