在Supabase创建用户登录并获取token的操作实践

前言

网站是我今年加点儿比较重的技能，另一项是物理机与云主机，既要接网线做系统换硬盘，又要对比多个运营商买点互联网基础服务，反正截止到现在来看今年过的有些不一样，小游戏的兴起预示着前端快速出demo的时代到来，看看市场上对游戏后端的招聘的寥寥岗位，或许服务器开发正在迎来冰点，今天不聊游戏，我们来看看网站开发的相关内容。

说起网站开发，这算是大学软件工程里专业里比较拿的出手的产品了，毕竟真的可以从头做一个网站，虽然简陋但五脏俱全，是一项真真正正的计算机技能，从最原始的html，到ASP、jSP，我那时都是有所涉猎的，毕业之后便从事了游戏开发，网站这条路也就放下了。

到后来写博客，自己折腾hexo静态站，github pages等等，又接触了图床、云主机、域名、SSL证书、网站备案等等，虽然学的不是主流开发技术，但是一直和网站是有点联系的，在我看来静态网站是比较好弄的，大多数是将创作内容编译成html文件，放到互联网上供人们访问就好了，即使样式做出花来，也缺乏交互的部分，比如静态站的聊天一定得引入第三方插件来维护才行，要想做动态站一定得引入后端，引入一个非html语言来写后端的逻辑，最常见的就是访问数据库、登录验证等等，说到网站后端我除了用ASP、JSP写过，也就是C#和Java，后来还用C语言、Python、Golang、JavaScript写过，我的思维还一直停留在这。

初识Supabase

当我接触了supabase以后我发现一切都变了，使用它根本就不需要网站后端来编写什么查询数据和登录鉴权的逻辑，这些操作都可以由前端完成，这是把网站后端吃饭的碗给砸了呀，说到supabase就不得不提到Vercel以及Nextjs，最近几年Nodejs大火，大有统一前后端铸就全栈之势，Vercel和Nextjs就是在Nodejs上发展起来的，起初我以为Nextjs和Hexo类似，都是生成的一些静态站点页面的，但随着学习的深入它这是把前后端的开发都包了呀，编写好的页面可以根据需要选择在服务器执行还是客户端执行，有一段时间我觉得它和Gin等go语言的web框架很像，由go语言完成后端逻辑和前端页面的编写，但仔细对比下来还是不同的，go语言编写的网站总的来说都运行在服务端，前端表现有些弱，而Nodejs这一套写下来完成分不出来哪是前端，哪是后端，放在哪运行完全看你的需要，想要交互多一点就放前端，想要安全认证多一些就放后端。

虽然Nodejs的框架Nextjs有后端的概念，但是如果引入了supabase作为项目后端的存储，那么像登录鉴权这些通用需求完全不用编写后端的逻辑，supabase自带的，你敢相信？

supabase自带文件存储和数据库，虽然Vercel本身也带这些，但是supabase更胜一筹，它提出实现了 RLS（Row-Level Security）规则，这是Supabase中的一种安全机制，用于限制特定用户对数据库表中行的访问权限。

在Supabase中，可以使用RLS规则来定义哪些用户可以访问或修改特定的数据行。这些规则可以基于用户的标识符、角色或其他属性进行设置。通过定义RLS规则，您可以确保只有符合规则的用户才能访问或修改相应的数据行，从而保护数据的隐私和完整性。

例如，你可以创建一个RLS规则，只允许管理员访问某个表的所有数据，而普通用户只能访问他们自己的数据行。这样，你可以根据不同的用户角色和需求来定制数据库的访问权限。这样说有些懵，可以举个具体的例子，比如网站上你的个性签名存放在一个Table表里，这个表允许所有注册的用户来插入，每个人插入自己的个性签名这没有问题，当要修改签名时你只能修改归属于你这个用户的行，这样就保证了数据的安全性，并且这些插入和更新的操作都可以在前端的代码里来写，而不用像以往的网站开发那样，将数据表单发送到后端在通过后端更新数据库。

使用Supabase

接下来通过一个实例感受一下，这些内容官方文档大部分都有，感兴趣的可以取翻一翻，我一般使用python写工具，下面主要用python的API来举例，比如说注册用户:

import os
from supabase import create_client, Client

url: str = "https://vtarqsksexgmfbotqnve.supabase.co"
key: str = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InZ0YXJxc2tzZXhnbWZib3RxbmN3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjA2ODIxODcsImV4cCI6MjAzNjI1ODE4N30.72bccRrlebY8rDTbVjYX5hlzhvU1llO96JDhLNZvN88"
supabase: Client = create_client(url, key)

response = supabase.auth.sign_up(
    credentials={"email": "myname@qq.com", "password": "my-pwd"}
)
print(response)

这段代码就完成了用户注册的逻辑，前端就能完成，url是supabase提供的项目地址，key是这个项目的anon key，这个key是public的可以放在前端页面里用于验证项目信息，当然很多网站不用python来写，使用js同样可以轻松完成这项任务

import { createClient } from '@supabase/supabase-js'

// Create a single supabase client for interacting with your database
const supabase = createClient('https://vtarqsksexgmfbotqnve.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InZ0YXJxc2tzZXhnbWZib3RxbmN3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjA2ODIxODcsImV4cCI6MjAzNjI1ODE4N30.72bccRrlebY8rDTbVjYX5hlzhvU1llO96JDhLNZvN88')

const { data, error } = await supabase.auth.signUp({
  email: 'myname@qq.com',
  password: 'my-pwd',
})

以上是注册部分，使用 anon key 就可以完成，但是当你需要插入数据或更新数据时，假如数据要求认证用户才能操作，这就需要你获取一个证明你身份的token，看起来就像JWT，代码如下：

import os
from supabase import create_client, Client

url: str = "https://vtarqsksexgmfbotqnve.supabase.co"
key: str = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InZ0YXJxc2tzZXhnbWZib3RxbmN3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjA2ODIxODcsImV4cCI6MjAzNjI1ODE4N30.72bccRrlebY8rDTbVjYX5hlzhvU1llO96JDhLNZvN88"
supabase: Client = create_client(url, key)

data = supabase.auth.sign_in_with_password({"email": "myname@qq.com", "password": "my-pwd"})
print(data)

JavaScript版本如下：

import { createClient } from '@supabase/supabase-js'

// Create a single supabase client for interacting with your database
const supabase = createClient('https://vtarqsksexgmfbotqnve.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InZ0YXJxc2tzZXhnbWZib3RxbmN3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjA2ODIxODcsImV4cCI6MjAzNjI1ODE4N30.72bccRrlebY8rDTbVjYX5hlzhvU1llO96JDhLNZvN88')

const { data, error } = await supabase.auth.signInWithPassword({
  email: 'myname@qq.com',
  password: 'my-pwd',
})

有些情况下使用Restful API更方便

curl -X POST 'https://vtarqsksexgmfbotqnve.supabase.co/auth/v1/token?grant_type=password' \
-H "apikey: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InZ0YXJxc2tzZXhnbWZib3RxbmN3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjA2ODIxODcsImV4cCI6MjAzNjI1ODE4N30.72bccRrlebY8rDTbVjYX5hlzhvU1llO96JDhLNZvN88" \
-H "Content-Type: application/json" \
-d '{
  "email": "myname@qq.com",
  "password": "my-pwd",
}'

tokne默认3600，我没找到自定义有效时间的方式，但是找到了刷新token的方式，可以按照下面的格式刷新token，这样你可以获得新的token

curl -X POST 'https://vtarqsksexgmfbotqnve.supabase.co/auth/v1/token?grant_type=refresh_token' \
-H "apikey: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InZ0YXJxc2tzZXhnbWZib3RxbmN3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjA2ODIxODcsImV4cCI6MjAzNjI1ODE4N30.72bccRrlebY8rDTbVjYX5hlzhvU1llO96JDhLNZvN88" \
-H "Content-Type: application/json" \
-d '{
  "refresh_token": "6wFEh3rwgRzdM_VGHK3OJg"
}'

有了登录的token就可以调用supabase的各种接口来操作数据啦，比如创建一个桶，上传一个文档，获取某个表的全部数据等等，supabase的接口客户端支持多种语言，但是Restful API就不太全，不知道什么原因，可能是我没有找对地方。

Supabase经验之谈

我是一个supabase新手，在使用过程中积累了一点点经验，有些东西是网上查来的，有些是官网文档里看来的，不得不说这官方文档写的是真棒，但有些东西查文档很难定位，还是需要实际操作，比如怎样修改Project API keys，在后台 Project API keys 这个区域并没有修改和重新生成的按钮，通过时间发现，重新生成一个JWT secret 后， anon key 和 service_role key 就都跟着变了，看官方操作提示：

Confirm to generate a new JWT secret

This will invalidate all existing API keys

Generating a new JWT secret will invalidate all of your API keys, including your service_role and anon keys. Your project will also be restarted during this process, which will terminate any existing connections. You may receive API errors for up to 2 minutes while the new secret is deployed.

This action cannot be undone and the old JWT secret will be lost. All existing API keys will be invalidated, and any open connections will be terminated.

而关于anon key 和 service_role key使用注意事项，其实一直都在这两个 key 的旁边写着，我还到处查资料，甚至做了很多实验来验证，虽然多花了些时间，但记忆更深一些：

anon public

This key is safe to use in a browser if you have enabled Row Level Security for your tables and configured policies.

service_role secret

This key has the ability to bypass Row Level Security. Never share it publicly.

总结来说 anon key 能放在浏览器不用担心泄露，可以查询符合RLS规则的数据，而 service_role key 一定要保管好，它可以绕过RLS规则，或者数据的完全控制权限。

总结

• 不管是游戏行业还是网站开发，单纯的后端开发人员正在慢慢缩减走向淘汰，可以转前端也可以走全栈
• supabase的使用可以一定程度上去掉单独的后端逻辑，鉴权和数据获取完全交给前端和supabase配合
• 使用supabase需要用到Project API keys，这包括anon key 和 service_role key
• anon key 可以暴露给任何人，所以放到前端页面中下载到用户浏览器也没有关系
• service_role key 一定要保管好，它拥有着对整个项目的控制权，完全不遵守 RLS 规则
• RLS（Row-Level Security）规则是Supabase中的一种安全机制，用于限制特定用户对数据库表中行的访问权限

---

==>> 反爬链接，请勿点击，原地爆炸，概不负责！<<==

---

如果你想活成你自己，就不要在乎别人说什么，且当他人之凝视如盏盏鬼火，大胆的走你的夜路，待你功成名就之时，自有大儒替你辨经