后端开发教程 - Java、Spring Boot 实战 - msg200.com
10 分钟教程 - 使用 Supabase 和 React 进行全栈 GitHub 身份验证
在这篇文章中，我想展示如何使用 Supabase 和 React 快速轻松地启用 GitHub 身份验证，这是一个大约 50 行代码的全栈项目。
本教程的视频可在此处获取
正如我之前提到的，我喜欢 Supabase 的原因之一是它提供各种各样的开箱即用的身份验证提供程序。
此外，与它们交互的 API 也非常简单：
/* authenticate */
const { user, session, error } = await supabase.auth.signIn({
provider: 'github'
});
/* request signed in user */
const user = supabase.auth.user()
作为开发者，你可能希望在你创建的任何面向开发者的产品或服务中都提供 GitHub 身份验证。让我们看看如何使用 Supabase 和 React 在几分钟内完成设置，并且代码量不大。
您可以随时在此处查看所有 Supabase 身份验证指南。
创建 Supabase 项目
首先，请访问app.supabase.io并创建一个新项目。
创建项目后，单击左侧菜单中的“设置” ，然后单击“API”。在这里，将项目URL复制到剪贴板，然后继续下一步。
创建 GitHub 应用程序
接下来我们需要创建 GitHub OAuth 应用程序。点击此处，然后点击“注册新应用程序”。
在这里，我们可以为应用程序命名、主页网址（http://localhost:3000目前），对于回调，使用复制到剪贴板的 Supabase 应用程序网址，并附加/auth/v1/callback：
https://<project-id>.supabase.co/auth/v1/callback
创建 OAuth 应用程序后，您应该获得一个客户端 ID 以及一种创建新客户端密钥的方法。
创建客户端密钥然后继续下一步。
在 Supabase 中配置 OAuth 设置
在 Supabase 仪表板中，单击左侧菜单中的“身份验证” ，然后单击“设置”，并切换“启用 Github”开关。在这里，您应该能够配置您的 GitHub 客户端 ID 以及 GitHub 密钥：
您的 Supabase 项目现在可以在您的前端应用程序中使用了！
构建前端
现在 Supabase 项目已准备就绪，让我们创建前端。
我们将使用 React，但这些想法可以使用任何前端框架来应用，而无需进行大量根本性的改变。
首先，创建一个新的 React 项目并进入新目录：
npx create-react-app my-supabase-app
cd my-supabase-app
接下来，使用 NPM 或 Yarn 安装 Supabase JS 库：
npm install @supabase/supabase-js
接下来，我们需要在客户端应用程序中配置 Supabase 项目。
为此，最好有一个单独的配置文件，我们可以在应用程序的任何地方导入和使用该文件。在src目录中创建一个名为client.js 的新文件。
在这里，我们需要 Supabase App URL 以及来自您项目的匿名公共 API 密钥。
您可以通过单击“设置”然后单击“API”从 Supabase 项目中获取这些值：
使用这些值，创建并导出您的 Supabase 客户端配置：
/* src/client.js */
import { createClient } from '@supabase/supabase-js'
const supabase = createClient('https://appid.supabase.co', 'anon-public-key')
export {
supabase
}
现在我们可以通过导入此客户端开始与我们的 Supabase 应用程序进行交互！
接下来，使用以下代码更新src/App.js ：
import './App.css';
import { useState, useEffect } from 'react';
import { supabase } from './client';
function App() {
const [user, setUser] = useState(null);
useEffect(() => {
/* when the app loads, check to see if the user is signed in */
checkUser();
/* check user on OAuth redirect */
window.addEventListener('hashchange', function() {
checkUser();
});
}, [])
async function checkUser() {
/* if a user is signed in, update local state */
const user = supabase.auth.user();
setUser(user);
}
async function signInWithGithub() {
/* authenticate with GitHub */
await supabase.auth.signIn({
provider: 'github'
});
}
async function signOut() {
/* sign the user out */
await supabase.auth.signOut();
setUser(null);
}
if (user) {
return (
<div className="App">
<h1>Hello, {user.email}</h1>
<button onClick={signOut}>Sign out</button>
</div>
)
}
return (
<div className="App">
<h1>Hello, please sign in!</h1>
<button onClick={signInWithGithub}>Sign In</button>
</div>
);
}
export default App;
现在，我们应该能够运行该应用程序并为我们设置一个基本的身份验证流程：
npm start
后续步骤Next steps
目前我们还没有办法查询我们应用程序的用户。
我们可以按照本指南轻松地进行设置，使用字段创建表中的profiles引用表，然后设置用于读取和写入的行级访问规则。idauth.usersuser_id