--- theme: orange highlight: a11y-light --- ## 前言 [Supabase](https://supabase.com/) 使用的是 [postgresql](https://www.postgresql.org/) 的 [Row Level Security (RLS)](https://www.postgresql.org/docs/current/ddl-rowsecurity.html)，可以限制不同用户对同一张表的不同数据行的访问权限。这种安全机制可以确保只有授权用户才能访问其所需要的数据行，保护敏感数据免受未授权的访问和操作。 ## Auth Providers 打开 [Supabase Providers](https://supabase.com/dashboard/project/athbiwlqrieaoetfapxd/auth/providers) 页面，这里我们可以看到 [Supabase](https://supabase.com/) 提供了 `20` 多种验证方式： ![769valdrmyzvrrjvs8ryhy547v2gmo4q.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4333b75c82a54691b449e6a7ad176565~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920&h=911&s=37974&e=png&b=f9f9f9) 我们可以根据自己项目的实际情况选择适合的第三方登录，这里我们以 `Github` 为例。 ## 配置 Github OAuth Apps 1. 打开 [OAuth Apps](https://github.com/settings/developers) 页面，点击 `New Oauth App` ![kybgh4krmvmt47o8ncwcdgeeqb10ykfw.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c8946024b6c47e9bc801a2099b48db0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1357&h=469&s=12997&e=png&b=ffffff) 2. 填入项目的信息，这里的 `Homepage URL` 我们可以先填本地开发的地址，等部署上线再改成线上地址，`Authorization callback URL` 填入 [Supabase](https://supabase.com/) 提供的 `Callback URL (for OAuth)`，然后点击 `Register Application` ![r1gg4ms18v5p817q458x0uaz1pi7h7ej.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/08be938f627f4b0090d0fb50f2cc2114~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1113&h=911&s=20072&e=png&b=ffffff) 3. 打开刚创建的 `Oauth App`，这里可以根据需要设置 `Oauth App` 信息，点击 `Generate a new client secret` 复制密钥 ![v3w8mpgtl8xqaas2w5zuamed6fguzs0u.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d6e3bdfdb2914cc098e6ec338775aec9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1218&h=911&s=23311&e=png&b=ffffff) 4. 打开 [Supabase Providers](https://supabase.com/dashboard/project/athbiwlqrieaoetfapxd/auth/providers) 页面，找到 `Github`，将 `Client ID` 和 `Client Secret` 分别填入，点击 `Save`。 ![ecefyrlhij3c72ho0f63ksjss71gxwun.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d0095b1f9f84a15928b8476be19df6e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=867&h=585&s=13311&e=png&b=f9f9f9) ## Nuxt3 登录鉴权 [Nuxt3](https://nuxt.com/) 中集成了 [@nuxtjs/supabase](https://supabase.nuxtjs.org/)，我们只需要准备两个文件即可：`login.vue`、`confirm.vue`。 1. 新建 `/pages/login/index.vue` 文件： ```html ``` 2. 新建 `/pages/confirm/index.vue` 文件： ```html ``` ## 最终效果 ![xhcb3wi5lfqoggl36wt82h045635wxsm.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5b00a6388ff40cd8633bc0d62d8fff2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920&h=911&s=183073&e=gif&f=87&b=fefefe) ## 总结通过本篇文章你可以学到如何在 [Supabase](https://supabase.com/) 中使用 [Github](https://github.com/) 授权登录，通过身份认证后我们就可以在 [Supabase](https://supabase.com/) 中进行数据库相应操作。下篇文章我们将学习如何在 [Nuxt3](https://nuxt.com/) 中创建 [RESTful 风格 API](https://blog.csdn.net/huxiaodong1994/article/details/84784861)，并结合 [Supabase](https://supabase.com/) 数据库完成网站分类的 [CURD](https://baike.baidu.com/item/CURD/3031761?fr=ge_ala) 操作。

登录您的账户