在本文中，您將學習基本的關鍵概念，這些概念將幫助您掌握身份驗證和授權的工作原理。

您將首先了解什么是身份驗證和授權，然后了解如何使用 Supabase auth 在應用程序中實現(xiàn)身份驗證短曾。

（本文內(nèi)容參考：java567.com）

目錄

• 先決條件
• 什么是認證和授權？
• 身份驗證如何進行赐劣？
• 使用令牌嫉拐、秘密和 Cookie 進行會話管理
• 認證因素的類型
• 常見的身份驗證策略
  • 基于密碼的身份驗證
  • 無密碼身份驗證
  • 雙因素身份驗證 (2FA)
  • 多重身份驗證 (MFA)
  • OAuth 2.0 和社交身份驗證
  • 單點登錄和 SAML
• 身份驗證和安全
• Supabase 和 Supabase 身份驗證服務
• 如何使用 Supabase 身份驗證
  • 應用程序編程接口
  • 軟件開發(fā)工具包
  • 身份驗證 UI 助手
• 概括
• 資源

先決條件

您需要滿足以下條件才能充分利用本文：

• 基礎編程知識。
• 后續(xù)的Supabase 項目魁兼。
• 以及一個文本編輯器來嘗試示例代碼片段婉徘。

什么是認證和授權？

簡單來說璃赡，身份驗證是用戶向系統(tǒng)標識自己的過程判哥，系統(tǒng)確認該用戶就是他們所聲稱的身份。

另一方面碉考，授權是系統(tǒng)確定允許用戶查看或交互應用程序的哪些部分以及不允許用戶訪問應用程序的哪些部分的過程塌计。

身份驗證如何進行？

image.png

描述用戶身份驗證過程的流程圖

用戶第一次與系統(tǒng)交互時侯谁，系統(tǒng)會要求他們注冊锌仅。通常，用戶將提供一條信息和一個只有他們和系統(tǒng)知道的秘密墙贱。這是身份驗證過程的注冊部分热芹。

下次用戶與同一系統(tǒng)交互時，他們將需要提供識別信息以及先前定義的秘密惨撇，以驗證其身份伊脓。

用戶發(fā)起交互的設備是客戶端，系統(tǒng)是服務器魁衙。一旦系統(tǒng)驗證了用戶报腔，它就會向客戶端發(fā)送有關該用戶的一些信息。

由于此過程需要時間并且需要用戶執(zhí)行某些操作剖淀，因此客戶端將存儲此信息并在用戶需要訪問系統(tǒng)時將其發(fā)送回系統(tǒng)纯蛾。這不需要用戶每次都主動重新進行身份驗證，從而減少了摩擦纵隔。這將創(chuàng)建一個用戶會話翻诉。

使用令牌炮姨、秘密和 Cookie 進行會話管理

image.png

顯示客戶端-服務器架構中的會話管理的序列圖

服務器可以通過兩種方式將用戶信息傳遞給客戶端：通過令牌或會話 ID。

對于令牌碰煌，服務器生成簽名令牌并將其傳遞給客戶端舒岸。該令牌通常是 JWT，可能包含有關用戶的信息拄查∮踅颍客戶端將存儲此令牌，并在每次用戶發(fā)出請求時將其發(fā)送回服務器堕扶。

服務器能夠驗證令牌的完整性，因為它對其進行了簽名梭依。這稱為無狀態(tài)身份驗證稍算，因為令牌是自包含的，并且服務器不需要將會話數(shù)據(jù)存儲在數(shù)據(jù)庫或緩存中役拴。

對于 cookie糊探，服務器會在數(shù)據(jù)庫或緩存中創(chuàng)建用戶會話記錄，其中包含會話 ID河闰。服務器將此會話 ID 發(fā)送給客戶端科平。

客戶端將此會話 ID 存儲在 cookie 中，并在用戶發(fā)出請求時將其發(fā)送回服務器姜性。會話 ID 是一個隨機字符串瞪慧，充當指向數(shù)據(jù)庫中實際用戶記錄的指針。

當服務器收到此 cookie 時部念，會將其包含的會話 ID 與其會話記錄進行匹配弃酌，然后將該記錄與數(shù)據(jù)庫中的用戶數(shù)據(jù)進行匹配。這稱為狀態(tài)身份驗證儡炼，因為需要數(shù)據(jù)庫查找妓湘。

認證因素的類型

身份驗證因素是指可用于驗證用戶身份的憑證類型。身份驗證過程中通常使用 3 個因素乌询，它們是：

1. 您知道的事情：示例是密碼榜贴。
2. 您擁有的東西：例如發(fā)送到您手機的令牌。
3. 你是誰：一個例子就是你的指紋妹田。

常見的身份驗證策略

身份驗證策略是指用于驗證用戶的過程唬党。不同類型的身份驗證策略包括：

基于密碼的身份驗證

這是指用戶通過提供用戶定義的基于文本的秘密來識別自己的傳統(tǒng)方式。通常秆麸，系統(tǒng)在其服務器上處理整個過程初嘹，并負責安全性和可靠性。

無密碼身份驗證

在這種方法中沮趣，系統(tǒng)驗證用戶的身份而不需要用戶定義的密碼屯烦。相反，系統(tǒng)將生成一次性密碼 (OTP) 并發(fā)送給用戶。然后使用該 OTP 代替密碼來訪問系統(tǒng)驻龟。示例包括魔術鏈接温眉，系統(tǒng)將代碼發(fā)送到用戶的電子郵件。

雙因素身份驗證 (2FA)

在主要身份驗證完成后翁狐，系統(tǒng)會通過要求額外的信息來嘗試驗證用戶的身份类溢。

這可以是通過電子郵件或短信發(fā)送給用戶的 OTP，也可以是在系統(tǒng)授予訪問權限之前要求用戶提供生物識別信息露懒。

多重身份驗證 (MFA)

這與 2FA 類似闯冷，只不過系統(tǒng)將使用不止一種額外方法來驗證用戶的身份。MFA 和 2FA 中使用的額外方法或因素通常是系統(tǒng)外部的懈词，例如需要電話的 SMS蛇耀。

OAuth 2.0 和社交身份驗證

OAuth 是一個授權框架，允許客戶端代表用戶從外部服務器訪問信息坎弯。外部服務器提示用戶是否允許與客戶端共享所請求的資源纺涤。

用戶允許該操作后，外部服務器向客戶端發(fā)出訪問令牌抠忘。

然后撩炊，客戶端將此訪問令牌提供給原始服務器，原始服務器驗證令牌的有效性并管理對所請求資源的訪問崎脉。OAuth 2.0 是 OAuth 的最新版本拧咳，也是使用更廣泛的框架。

OAuth 2.0 擴展了對基于非瀏覽器的系統(tǒng)的支持荧嵌。社交身份驗證基于 OAuth 2.0呛踊，但在這種情況下，客戶端將用戶重定向到的外部服務器通常是社交媒體平臺啦撮。這是每當您在身份驗證頁面上看到“繼續(xù)使用 Twitter/X”按鈕時執(zhí)行的身份驗證過程類型谭网。

單點登錄和 SAML

SAML 代表安全斷言標記語言。它是在系統(tǒng)之間傳遞身份驗證和授權信息的標準赃春。一個系統(tǒng)充當請求系統(tǒng)或服務提供商 (SP)愉择，另一個系統(tǒng)保存所請求的信息或充當身份提供商 (IdP)。

收到此請求后织中，身份提供者將生成一些 SAML 形式的語句锥涕，其中包含一些用戶信息。然后狭吼，服務提供商使用該信息來決定如何處理與其受保護資源相關的用戶层坠。

SSO 指單點登錄。這是一種身份驗證策略刁笙，允許用戶通過一個系統(tǒng)/應用程序登錄破花，然后讓他們訪問同一網(wǎng)絡中的多個應用程序谦趣。

這不需要用戶登錄不同的相關應用程序，從而改善了用戶體驗座每。Google Workspace 就是一個例子前鹅。如果您已經(jīng)登錄 Gmail 帳戶，則無需單獨登錄文檔峭梳。SAML 促進了 SSO舰绘，因為 SAML 提供了標準身份驗證機制并允許不同的系統(tǒng)相互信任。

身份驗證和安全

身份驗證涉及處理葱椭、移動和存儲與受保護服務器資源相關的敏感用戶信息捂寿。這使得安全性和最佳實踐成為身份驗證系統(tǒng)的一個重要方面。

您可以采取一些基本步驟來大大提高身份驗證系統(tǒng)的安全性挫以。這些包括：

• 強制使用更強的密碼者蠕。
• 要求用戶注冊額外因素才能啟用 2FA。
• 在通過 HTTPS 傳輸敏感數(shù)據(jù)時對其進行加密掐松。
• 以加密方式存儲密碼。
• 使用 OAuth 2.0 等標準身份驗證框架粪小。

在處理特定身份驗證信息之外的敏感用戶數(shù)據(jù)時大磺，您的系統(tǒng)應考慮某些合規(guī)性。如果在某些國家/地區(qū)運營或處理企業(yè)應用程序探膊，情況更是如此杠愧。這些合規(guī)性包括：

• GDPR：此合規(guī)性強制執(zhí)行有關數(shù)據(jù)處理的標準，包括機密性和完整性逞壁。
• HIPAA：此合規(guī)性適用于醫(yī)療數(shù)據(jù)流济。它期望高水平的誠信。
• SOC：這是云技術更普遍需要的框架腌闯。它以美國注冊會計師協(xié)會為基礎绳瘟，涵蓋隱私、安全姿骏、可用性糖声、完整性和保密性等方面。

記住所有這些分瘦，您會發(fā)現(xiàn)為您的應用程序使用專用的身份驗證服務通常比推出您自己的身份驗證更容易蘸泻。

為此有很多選擇，包括專用身份驗證服務（例如 Clerk 和 Auth0）以及后端即服務（例如 Supabase 和 Firebase）嘲玫。在這種情況下悦施，我們來看看 Supabase 身份驗證產(chǎn)品。

Supabase 和 Supabase 身份驗證服務

Supabase 是一個開源后端即服務 (BaaS) 平臺去团，使您的應用程序后端開發(fā)變得非常簡單抡诞、快速穷蛹。它基于開源技術并積極支持開源生態(tài)系統(tǒng)。

Supabase 提供大多數(shù)后端應用程序所需的通用服務沐绒。這些服務是：

• 數(shù)據(jù)庫：這是一個功能齊全的 Postgres 數(shù)據(jù)庫俩莽。
• 身份驗證：這是一項企業(yè)級身份驗證服務，基于 goTrue 服務器的分支乔遮。
• 實時：這是一個 API扮超，增加了在應用程序中使用實時功能的能力。
• 存儲：這是一個存儲服務蹋肮，是 s3 包裝器出刷。
• 邊緣功能：這些是在邊緣運行的無服務器功能。由 Deno 運行時提供支持坯辩。
• Vector：這是一個矢量數(shù)據(jù)庫馁龟，可以更輕松地在 AI 應用程序中使用嵌入。

Supabase 符合 SOC2漆魔、HIPAA 和 GDPR 標準坷檩、可自托管且開源。此外改抡，他們的身份驗證服務公開了許多策略矢炼，使您可以完全控制自己的數(shù)據(jù)，并且可以獨立于其他產(chǎn)品使用阿纤。這個及其自動記錄 API 使其成為您的應用程序的一個非常好的選擇句灌。

如何使用 Supabase 身份驗證

第一步是設置Supabase 項目的身份驗證設置。您可以通過設置啟用您想要使用的確切身份驗證方法欠拾。您可以通過三種方式開始在項目中使用 Supabase auth：

應用程序編程接口

您可以通過調(diào)用 auth 端點并將用戶信息傳遞給它來直接在應用程序中使用身份驗證服務胰锌。您還可以獲取、更新和刪除您的用戶藐窄。

當您通過 Supabase 控制臺創(chuàng)建項目時资昧，該 API 會自動可用，并且可以像這樣調(diào)用：

//This will return an object containing an access token, the newly created user data and other metadata
const res = await fetch("https://<your-project-ref>/auth/v1/signup", {
  method: "POST",
  headers: {
    authorization: "Bearer YOUR_SUPABASE_KEY",
    "content-type": "application/json",
  },
  body: JSON.stringify({
    email: "user-email",
    password: "user-password",
  }),
});

軟件開發(fā)工具包

Supabase 提供了一些采用不同編程語言的 SDK（軟件開發(fā)套件）枷邪，旨在使與 Supabase 項目的交互變得簡單榛搔。官方支持的語言包括 Dart 和 JavaScript，Python 和其他語言擁有強大的社區(qū)支持东揣。

入門過程包括添加 SDK 作為依賴項践惑，然后將您的應用程序連接到 Supabase 項目。

對于 JavaScript SDK嘶卧，這看起來像這樣：

//Install via npm:
npm install @supabase/supabase-js

// or add cdn links: 
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
//Then initialize 
Supabaseimport { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'https://<your-project-ref>.supabase.co'
const supabaseKey = process.env.SUPABASE_ANON_KEY
const supabase = createClient(supabaseUrl, supabaseKey)

然后您可以訪問 auth 命名空間下的身份驗證方法尔觉，如下所示：

const { data, error } = await supabase.auth.signUp({
  email: 'user email',
  password: 'user password',
})

身份驗證 UI 助手

Supabase 提供幫助程序庫，使使用其服務進行身份驗證變得更加容易芥吟。這些庫提供可定制的登錄屏幕侦铜，支持魔術鏈接专甩、基于密碼和社交登錄策略。

目前钉稍，這些庫可用于 JavaScript 和 Flutter涤躲。Supabase 還為使用服務器端框架并需要 Supabase 訪問令牌的應用程序提供單獨的 SSR（服務器端渲染）包。

作為示例贡未，要開始使用 React Auth UI种樱，首先需要安裝依賴項，如下所示：

npm install @supabase/supabase-js @supabase/auth-ui-react 
@supabase/auth-ui-shared

然后俊卤，您可以在初始化 Supabase 后開始使用該庫嫩挤，如上面的 SDK 示例所示。以下是一些示例代碼消恍，展示了如何在 React 應用程序中使用 auth UI 庫：

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Auth } from "@supabase/auth-ui-react";
import { ThemeSupa } from "@supabase/auth-ui-shared";
import { supa } from "../constants";

const AuthUi = () => {
  const navigate = useNavigate();

  useEffect(() => {
    const {
      data: { subscription },
    } = supa.auth.onAuthStateChange((event) => {
      if (event === "SIGNED_IN") {
        navigate("/authenticated");
      }
    });

    return () => subscription.unsubscribe();
  }, [navigate]);

  return (
    <Auth
      supabaseClient={supa}
      providers={["google", "github", "apple", "discord"]}
      // controls whether to display only social providers
      // onlyThirdPartyProviders
      redirectTo="http://localhost:3000/authenticated"
      // comes with preconfigured themes, can add custom themes
      appearance={{ theme: ThemeSupa }}
      // controls how to display the social provider icons
      socialLayout="horizontal"
    />
  );
};

export default AuthUi;

這將在屏幕上顯示以下表單：

image.png

概括

身份驗證是用戶識別自己的過程岂昭，服務器驗證此身份，而授權是系統(tǒng)確定用戶對資源應具有的訪問權限并相應地限制用戶狠怨。

服務器對用戶進行身份驗證后约啊，將以 cookie 中的令牌或會話 ID 的形式傳遞用戶信息。

每當用戶需要某些訪問權限時佣赖，信息就會在客戶端和服務器之間來回傳遞棍苹，直到它們過期或用戶通過注銷或刪除其帳戶來終止周期。

用戶驗證過程是通過采用某些身份驗證因素來實現(xiàn)的茵汰。例如，一個系統(tǒng)可能只需要密碼孽鸡，而另一個系統(tǒng)則需要密碼和發(fā)送到用戶電話號碼的代碼蹂午。

您的身份驗證系統(tǒng)可以允許使用三個身份驗證因素中的任何一個進行多種身份驗證策略。

如果您選擇不處理自己的身份驗證彬碱，Supabase 是一個很好的選擇豆胸。

Supabase auth 可以通過 API、SDK 和 Auth 庫進行訪問巷疼。Supabase 維護服務器端框架的 SSR 包晚胡。

（本文內(nèi)容參考：java567.com）