Supabase 独立开发<二>：Auth

读写锁
5 阅读3分钟

上篇文章我们对 Supabase 有了一些基本的了解，这篇文章我们重点介绍 Supabasa Auth。Supabase Auth主要功能是提供：用户注册与登录功能、用户管理功能和联动RLS完成权限控制。

让我先从用户的注册与登录开始。首先需要强调的是，虽然 Supabase Auth 支持邮箱注册登录，但是因为邮箱注册流程非常长，转化率非常低，我不建议使用邮箱注册登录，总是应该使用社交登录。如果你主要做海外用户，使用 官方的 Supabase，可以使用 Google 登录等海外登录方式。如果你主要做国内用户，使用阿里云的 Supabase，可以考虑微信和支付宝登录。

用户认证

在技术上，这套社交登录涉及的流程规范叫做 OAuth2，比如 Google 登录，Supabase Auth本身则是一个 OAuth2 的代理。当你使用 Google 登录时，如果是第一次登录，Supabase Auth 将会把你自动注册为你应用的一个用户，写入用户信息，当你第二次登录，则会查询出这个用户信息复用。所以，使用 Supabase Auth 社交登录的话，你不需要创建一个用户表，supabase 为你准备好了 auth.users表，也不需要注册的流程，你唯一需要做的，就是在你的前端页面增加一个 Google 登录或者 Github 登录按钮。

配置 Google 登录的步骤

以 Web网站的 Google 登录为例，实现 Google 登录的步骤主要包含两个步骤： 申请 Google OAuth Client 和 配置 Supabase Auth。

  1. 打开：[console.cloud.google.com/auth/client… 创建客户端
  2. 配置如下：
  • 应用类型选择：Web应用
  • 已获授权的 JavaScript 来源：无需填写
  • 已获授权的重定向 URI：https://.supabase.co/auth/v1/callback
  1. 点击创建，创建完成后你会拿到 Client ID 和 Client Secret
  2. 登录并打开Auth管理 ：supabase.com/dashboard/p…/auth/providers?provider=Google
  3. 启用 Google provider
  4. 配置以下信息：
    • Client ID: 第2步中获取到的 Client ID
    • Client Secret: 第2步中获取到的 Client Secret
  5. 保存退出
  6. 在 supabase.com/dashboard/p…/auth/url-configuration 页面配置 Redirect URLs，如果你的网站是：example.com，可以配置为：example.com/**

网站前端登录示例

// lib/supabaseClient.ts
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

// 登录
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: {
    redirectTo: `${window.location.origin}/auth/callback`,
    queryParams: {
      access_type: 'offline',
      prompt: 'consent',
    },
  },
})

// 获取用户信息
const { data: { user } } = await supabase.auth.getUser()

Supabase 凭证和RLS的关系

对于 Supabase ，存在三种类型的凭证：

  1. Service Role Key：用于管理 Supabase 的服务，具有最高权限，应该始终在你自己手里。
  2. Anon Role Key：一般未登录的用户使用这个凭证。
  3. Authenticated JWT：登录后的用户使用这个凭证。

在 Supabase 中，一个用户登录后，其凭证将会从 Anon Role Key 切换为 Authenticated JWT。Supabase 的其它组件将会利用这个信息来进行权限控制。其中 Supabase Database、Supabase Storage、Supabase Realtime 组件会将这个信息映射为数据库本身的 role，然后通过 RLS 配合这个数据库的 role 来控制权下，而 Supabase Functions 则需要开发者自己来手动处理这个信息。

下一章，将会介绍 Supabase Database 如何使用及利用 RLS 来控制访问。

avatar
文章
阅读
粉丝