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

您將首先了解什麼是身份驗證和授權，然後了解如何使用 Supabase auth 在應用程序中實現身份驗證。

（本文內容參考：java567.com）

先決條件

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

基礎編程知識。
後續的Supabase 項目。
以及一個文本編輯器來嘗試示例代碼片段。

什麼是認證和授權？

簡單來說，身份驗證是用戶向系統標識自己的過程，系統確認該用戶就是他們所聲稱的身份。

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

身份驗證如何進行？

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

用戶第一次與系統交互時，系統會要求他們註冊。通常，用戶將提供一條信息和一個隻有他們和系統知道的秘密。這是身份驗證過程的註冊部分。

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

用戶發起交互的設備是客戶端，系統是服務器。一旦系統驗證了用戶，它就會向客戶端發送有關該用戶的一些信息。

由於此過程需要時間並且需要用戶執行某些操作，因此客戶端將存儲此信息並在用戶需要訪問系統時將其發送回系統。這不需要用戶每次都主動重新進行身份驗證，從而減少了摩擦。這將創建一個用戶會話。

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

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

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

對於令牌，服務器生成簽名令牌並將其傳遞給客戶端。該令牌通常是 JWT，可能包含有關用戶的信息。客戶端將存儲此令牌，並在每次用戶發出請求時將其發送回服務器。

服務器能夠驗證令牌的完整性，因為它對其進行了簽名。這稱為無狀態身份驗證，因為令牌是自包含的，並且服務器不需要將會話數據存儲在數據庫或緩存中。

對於 cookie，服務器會在數據庫或緩存中創建用戶會話記錄，其中包含會話 ID。服務器將此會話 ID 發送給客戶端。

客戶端將此會話 ID 存儲在 cookie 中，並在用戶發出請求時將其發送回服務器。會話 ID 是一個隨機字符串，充當指向數據庫中實際用戶記錄的指針。

當服務器收到此 cookie 時，會將其包含的會話 ID 與其會話記錄進行匹配，然後將該記錄與數據庫中的用戶數據進行匹配。這稱為狀態身份驗證，因為需要數據庫查找。

認證因素的類型

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

您知道的事情：示例是密碼。
您擁有的東西：例如發送到您手機的令牌。
你是誰：一個例子就是你的指紋。

常見的身份驗證策略

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

基於密碼的身份驗證

這是指用戶通過提供用戶定義的基於文本的秘密來識別自己的傳統方式。通常，系統在其服務器上處理整個過程，並負責安全性和可靠性。

無密碼身份驗證

在這種方法中，系統驗證用戶的身份而不需要用戶定義的密碼。相反，系統將生成一次性密碼 (OTP) 並發送給用戶。然後使用該 OTP 代替密碼來訪問系統。示例包括魔術鏈接，系統將代碼發送到用戶的電子郵件。

雙因素身份驗證 (2FA)

在主要身份驗證完成後，系統會通過要求額外的信息來嘗試驗證用戶的身份。

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

多重身份驗證 (MFA)

這與 2FA 類似，隻不過系統將使用不止一種額外方法來驗證用戶的身份。MFA 和 2FA 中使用的額外方法或因素通常是系統外部的，例如需要電話的 SMS。

OAuth 2.0 和社交身份驗證

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

用戶允許該操作後，外部服務器向客戶端發出訪問令牌。

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

OAuth 2.0 擴展了對基於非瀏覽器的系統的支持。社交身份驗證基於 OAuth 2.0，但在這種情況下，客戶端將用戶重定向到的外部服務器通常是社交媒體平臺。這是每當您在身份驗證頁面上看到“繼續使用 Twitter/X”按鈕時執行的身份驗證過程類型。

單點登錄和 SAML

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

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

SSO 指單點登錄。這是一種身份驗證策略，允許用戶通過一個系統/應用程序登錄，然後讓他們訪問同一網絡中的多個應用程序。

這不需要用戶登錄不同的相關應用程序，從而改善了用戶體驗。Google Workspace 就是一個例子。如果您已經登錄 Gmail 帳戶，則無需單獨登錄文檔。SAML 促進了 SSO，因為 SAML 提供了標準身份驗證機制並允許不同的系統相互信任。

身份驗證和安全

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

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

強制使用更強的密碼。
要求用戶註冊額外因素才能啟用 2FA。
在通過 HTTPS 傳輸敏感數據時對其進行加密。
以加密方式存儲密碼。
使用 OAuth 2.0 等標準身份驗證框架。

在處理特定身份驗證信息之外的敏感用戶數據時，您的系統應考慮某些合規性。如果在某些國傢/地區運營或處理企業應用程序，情況更是如此。這些合規性包括：

GDPR：此合規性強制執行有關數據處理的標準，包括機密性和完整性。
HIPAA：此合規性適用於醫療數據。它期望高水平的誠信。
SOC：這是雲技術更普遍需要的框架。它以美國註冊會計師協會為基礎，涵蓋隱私、安全、可用性、完整性和保密性等方面。

記住所有這些，您會發現為您的應用程序使用專用的身份驗證服務通常比推出您自己的身份驗證更容易。

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

Supabase 和 Supabase 身份驗證服務

Supabase 是一個開源後端即服務 (BaaS) 平臺，使您的應用程序後端開發變得非常簡單、快速。它基於開源技術並積極支持開源生態系統。

Supabase 提供大多數後端應用程序所需的通用服務。這些服務是：

數據庫：這是一個功能齊全的 Postgres 數據庫。
身份驗證：這是一項企業級身份驗證服務，基於 goTrue 服務器的分支。
實時：這是一個 API，增加了在應用程序中使用實時功能的能力。
存儲：這是一個存儲服務，是 s3 包裝器。
邊緣功能：這些是在邊緣運行的無服務器功能。由 Deno 運行時提供支持。
Vector：這是一個矢量數據庫，可以更輕松地在 AI 應用程序中使用嵌入。

Supabase 符合 SOC2、HIPAA 和 GDPR 標準、可自托管且開源。此外，他們的身份驗證服務公開了許多策略，使您可以完全控制自己的數據，並且可以獨立於其他產品使用。這個及其自動記錄 API 使其成為您的應用程序的一個非常好的選擇。

如何使用 Supabase 身份驗證

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

應用程序編程接口

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

當您通過 Supabase 控制臺創建項目時，該 API 會自動可用，並且可以像這樣調用：

//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",
  }),
});

軟件開發工具包

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

入門過程包括添加 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;

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

概括

身份驗證是用戶識別自己的過程，服務器驗證此身份，而授權是系統確定用戶對資源應具有的訪問權限並相應地限制用戶。

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

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

用戶驗證過程是通過采用某些身份驗證因素來實現的。例如，一個系統可能隻需要密碼，而另一個系統則需要密碼和發送到用戶電話號碼的代碼。

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

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

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