建站
咨詢
售后
建站咨詢
新聞中心
許多基于Web的項(xiàng)目最終必須考慮的一個(gè)常見問題是如何處理用戶身份驗(yàn)證。我們都熟悉網(wǎng)站登錄頁面后隱藏與用戶相關(guān)的數(shù)據(jù)和流程；用戶如果擁有一個(gè)帳戶，則登錄；如果沒有，則可以創(chuàng)建一個(gè)。
成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、高港網(wǎng)絡(luò)推廣、重慶小程序開發(fā)、高港網(wǎng)絡(luò)營銷、高港企業(yè)策劃、高港品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供高港建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com
在單個(gè)項(xiàng)目中，手動(dòng)實(shí)施這種框架可能很困難或不安全，不過用easybase-react庫來實(shí)現(xiàn)是件很容易的事情。接下來我們將實(shí)現(xiàn)的框架利用了serverless技術(shù)堆棧，這種架構(gòu)將使我們項(xiàng)目能夠直接從我們的前端代碼調(diào)用用戶的身份驗(yàn)證過程。
第1步：安裝庫
在項(xiàng)目目錄中，鍵入以下命令：
npm install easybase-react
如果你不知道如何創(chuàng)建新的React項(xiàng)目并且想學(xué)習(xí)，可以在GitHub上學(xué)習(xí)了解：https://github.com/facebook/create-react-app?ref=hackernoon.com
第2步：創(chuàng)建Easybase項(xiàng)目
??
如果你還沒有項(xiàng)目，可以在??easybase.io??上免費(fèi)創(chuàng)建一個(gè)帳戶 。登錄后，導(dǎo)航至“項(xiàng)目”，然后單擊“創(chuàng)建項(xiàng)目”按鈕。給該項(xiàng)目一個(gè)識(shí)別標(biāo)簽，然后單擊“創(chuàng)建”。
在這個(gè)菜單中，你還可以指定用戶可以從哪些表讀取或?qū)懭霐?shù)據(jù)。也可以設(shè)置項(xiàng)目的權(quán)限來讀取/寫入一個(gè)表的所有記錄，或者只讀取與用戶相關(guān)的記錄。用戶關(guān)聯(lián)記錄是由登錄用戶創(chuàng)建或編輯的記錄。通過打開一個(gè)表并單擊特定的行，可以將一條記錄與easybase row抽屜中的用戶手動(dòng)關(guān)聯(lián)。
第3步：將ebconfig放在項(xiàng)目目錄中
點(diǎn)擊新建項(xiàng)目中的“download”按鈕，并將這個(gè)文件放到React項(xiàng)目的根目錄中。
├── src/
│ ├── App.js
│ ├── index.js
│ └── ebconfig.js
├── assets/
├── package.json
└── ...
第4步：將組件包裝在EasybaseProvider中
import React, { useEffect } from "react";
import { EasybaseProvider, useEasybase } from "easybase-react";
import ebconfig from "./ebconfig.js";
function App() {
return (
);
}請(qǐng)確保使用下載的令牌來實(shí)現(xiàn)ebconfig道具。
第5步：創(chuàng)建用戶登錄/注冊(cè)的模式
EasebaseProvider組件將授予所有子節(jié)點(diǎn)訪問useEasybase鉤子的權(quán)限。它提供了諸如signIn、signUp、isUserSignedIn等函數(shù)，以及其他與用戶狀態(tài)相關(guān)的函數(shù)。
下面是一個(gè)簡單的例子，允許用戶登錄或注冊(cè)你的React項(xiàng)目。(如果用戶在過去24小時(shí)內(nèi)曾在該設(shè)備上登錄過，則會(huì)自動(dòng)進(jìn)行身份驗(yàn)證)。
這里的基本思想是使用isUserSignedIn()來決定顯示的是注冊(cè)視圖還是登錄視圖。建議把它和React的代碼拆分一起使用，以獲得更快的加載時(shí)間。
如果signUp()運(yùn)行成功，新用戶將在Easybase的“users”標(biāo)簽中可見。此外，當(dāng)用戶通過signIn()或自動(dòng)進(jìn)行身份驗(yàn)證時(shí)，使用onSignIn函數(shù)自動(dòng)運(yùn)行功能。
需要注意的是，用戶的屬性可以在Easybase的“用戶”標(biāo)簽中編輯，也可以通過useEasybase鉤子獲得/設(shè)置。用戶屬性僅對(duì)應(yīng)于將鍵映射到字符串的對(duì)象。
經(jīng)過身份驗(yàn)證的用戶現(xiàn)在可以讀取/寫入已配置集合中的記錄。重要的是要理解這些與集合相關(guān)的函數(shù)只對(duì)signed in實(shí)例有效。Easybase的React數(shù)據(jù)庫庫功能強(qiáng)大，且易于集成到項(xiàng)目中，并且可以很好地與用戶身份驗(yàn)證配合使用。
下面是一個(gè)在經(jīng)過驗(yàn)證的實(shí)例上使用Easybase Frame()的基本示例：
import { useEffect } from "react";
export default function FrameRenderer() {
const {
Frame,
configureFrame,
sync,
useFrameEffect
} = useEasybase();
useFrameEffect(() => {
console.log("Frame updated!");
});
useEffect(() => {
configureFrame({
limit: 10,
offset: 0,
tableName: "My Table"
});
sync()
}, []);
return (
{ Frame().map((ele, index) =>
)
}使用easybase-react框架來處理你的項(xiàng)目身份驗(yàn)證和數(shù)據(jù)查詢，使得管理項(xiàng)目變得更容易，也更高效。
Easybase.io的React庫使開發(fā)人員能夠直觀地簡化其項(xiàng)目后端流程。自由層涵蓋了幾乎所有用例，并使Serverless框架和可伸縮數(shù)據(jù)庫可供所有類型的開發(fā)人員使用。這種Serverless技術(shù)在云功能(也稱為功能即服務(wù))方面工作得特別好。
此外，可以在Easybase Web應(yīng)用程序的“Usage”選項(xiàng)卡中查看新項(xiàng)目的實(shí)時(shí)分析。在此位置以有組織的方式查看項(xiàng)目量，數(shù)據(jù)傳輸?shù)取?/p>
【譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為.com】
網(wǎng)站題目：5步創(chuàng)建一個(gè)具有Serverless用戶身份驗(yàn)證的React項(xiàng)目
當(dāng)前鏈接：http://m.5511xx.com/article/cdoejsd.html
