5步创建一个具有Serverless用户身份验证的React项目

通过5个步骤创建一个具有Serverless用户身份验证的React项目我们都熟悉将用户相关数据和流程隐藏在登录页面后面的网站；如果用户有账户，他们会登录；如果他们不这样做，他们可以创建一个。在单个项目中手动实现这样的框架可能很困难或不安全，但使用easybase-react库很容易做到。我们接下来要实现的框架利用了无服务器技术栈。这种架构将允许我们的项目直接从我们的前端代码调用用户的身份验证过程。第一步：安装库在项目目录下，输入以下命令：npminstalleasybase-react如果你不知道如何新建React项目又想学习，可以在GitHub上了解一下：https://github.com/facebook/create-react-app?ref=hackernoon.com第2步：创建Easybase项目如果您还没有项目，可以在easybase.io免费创建一个帐户。登录后，导航到“项目”并单击“创建项目”按钮。为项目指定一个标识标签，然后单击“创建”。在此菜单中，您还可以指定用户可以从哪些表中读取或写入数据。也可以设置项目权限读/写一个表的所有记录，或者只读与用户相关的记录。用户链接记录是由登录用户创建或编辑的记录。通过打开表格并单击特定行，可以手动将记录与easybase行抽屉中的用户相关联。第三步：把ebconfig放到项目目录下在新建项目中点击“下载”按钮，把这个文件放到React项目的根目录下。├──src/│├──App.js│├──index.js│└──ebconfig.js├──assets/├──package.json└──...第四步：将组件打包在EasybaseProviderimportReact,{useEffect}from"react";import{EasybaseProvider,useEasybase}from"easybase-react";importebconfigfrom"./ebconfig.js";functionApp(){return();}确保使用下载的令牌来实现ebconfig属性。第5步：为用户登录/注册创建模式EasebaseProvider组件将向所有子节点授予对useEasybase挂钩的访问权限。它提供了signIn、signUp、isUserSignedIn等功能，以及其他与用户状态相关的功能。下面是一个简单的示例，允许用户登录或注册您的React项目。（如果用户在过去24小时内登录过该设备，则会自动完成身份验证）。这里的基本思想是使用isUserSignedIn()来决定是显示注册视图还是登录视图。建议将其与React的代码拆分一起使用，以加快加载时间。如果signUp()成功运行，新用户将在Easybase的“用户”选项卡中可见。此外，使用onSignIn函数在用户通过signIn()或自动进行身份验证时自动运行功能。需要注意的是，用户的属性可以在Easybase的“用户”选项卡中编辑，也可以通过useEasybasehook获取/设置。用户属性仅对应于将键映射到字符串的对象。经过身份验证的用户现在可以在配置的集合中读取/写入记录。重要的是要了解这些与集合相关的函数仅适用于已签名的实例。Easybase的React数据库库功能强大且易于集成到项目中，并且与用户身份验证配合良好。下面是一个在经过验证的实例上使用EasybaseFrame()的基本示例：import{useEffect}from"react";导出默认函数FrameRenderer(){const{Frame,configureFrame,sync,useFrameEffect}=useEasybase();useFrameEffect(()=>{console.log("Frameupdated!");});useEffect(()=>{configureFrame({limit:10,offset:0,tableName:"MyTable"});sync()},[]);return({Frame().map((ele,index)=>)}