你可以在没有服务器的情况下使用 ReactJS 将数据添加到数据库（supabase）吗

Question

我在编程方面有点新，我正在学习网络是如何工作的，我正在使用带有 Api 的 Supabase PostgreeSQL 进行这个项目，所以我想做的是编写（将数据发送到 db），我想要只使用 ReactJS 来做，但我不知道这是否可能，我做了一些只适用于 JS 和 SUPABASE 的 API 密钥的东西，但我不知道这样做是否正确

import {useState} from 'react'
import {supabase} from '../db/supabase';
import Helmet from "helmet";
import {Link} from 'react-router-dom'
import styled from "styled-components";

const Container = styled.div``
const LeftContainer = styled.div``
const RightContainer = styled.div``
const Input = styled.input``
const BtnButBlack = styled.button``
const BtnButGreen = styled.button``
const Form = styled.form``

export default function Signup() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [name, setName] = useState('');
    const [username, setUsername] = useState('');

    const handleSubmit = (event) => {
        new_account({email: email, password: password}, name, username)
        event.preventDefault();
    };

    const handleEmail = (event) => {
        event.preventDefault();
        setEmail(event.target.value)
    };

    const handlePassword = (event) => {
        event.preventDefault();
        setPassword(event.target.value)
    }
    const handleName = (event) => {
        event.preventDefault();
        setName(event.target.value)
    }
    const handleUsername = (event) => {
        event.preventDefault();
        setUsername(event.target.value)
    }

    const new_account = async ({email, password}) => {
        const {user, session, error} = await supabase.auth.signUp({
            email: email,
            password: password,
        })
        if (error) {
            console.error(error)
            return
        }
        console.log(user);
        await supabase
            .from('Users')
            .insert([
                {username: username, name: name, email: email, password: password}
            ])
    };

    return (
        <Container>
            <LeftContainer>
                Signup
            </LeftContainer>
            <RightContainer>
                <Form onSubmit={handleSubmit}>
                    <Input onChange={handleUsername} type="text" value={username} placeholder="Username" autoComplete="false" /><br></br>
                    <Input onChange={handleName} type="text" value={name} placeholder="Name" autoComplete="false" /><br></br>
                    <Input onChange={handleEmail} type="text" value={email} placeholder="Email" autoComplete="false" /><br></br>
                    <Input onChange={handlePassword} type="password" value={password} placeholder="Password" autoComplete="false" /><br />
                    <BtnButGreen>Sign Up</BtnButGreen>
                </Form>
            </RightContainer>
        </Container>
    )
}

这是 supbase 模块，您可以在 jsx 文件中导入并使用它：

import {createClient} from '@supabase/supabase-js'
const supabaseUrl = process.env.REACT_APP_SUPABASE_URL
const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY
export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Answer 1

您的代码看起来很棒！使用 Supabase，您只需要公开匿名密钥和 supabase URL，它们是公开的。

您使用行级安全性和 Supabase 身份验证来防止恶意攻击者入侵您的数据库。您可以在此处阅读有关行级安全性的更多信息： https://supabase.io/docs/learn/auth-deep-dive/auth-row-level-security

如果您有任何问题，请不要犹豫！