【51CTO.com快譯】許多基于Web的項(xiàng)目最終必須考慮的一個(gè)常見問題是如何處理用戶身份驗(yàn)證。我們都熟悉網(wǎng)站登錄頁面后隱藏與用戶相關(guān)的數(shù)據(jù)和流程；用戶如果擁有一個(gè)帳戶，則登錄；如果沒有，則可以創(chuàng)建一個(gè)。

在單個(gè)項(xià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è)識別標(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抽屜中的用戶手動關(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 (
<EasybaseProvider ebconfig={ebconfig}>
<Container />
</EasybaseProvider>
);
}

請確保使用下載的令牌來實(shí)現(xiàn)ebconfig道具。

第5步：創(chuàng)建用戶登錄/注冊的模式

EasebaseProvider組件將授予所有子節(jié)點(diǎn)訪問useEasybase鉤子的權(quán)限。它提供了諸如signIn、signUp、isUserSignedIn等函數(shù)，以及其他與用戶狀態(tài)相關(guān)的函數(shù)。

下面是一個(gè)簡單的例子，允許用戶登錄或注冊你的React項(xiàng)目。(如果用戶在過去24小時(shí)內(nèi)曾在該設(shè)備上登錄過，則會自動進(jìn)行身份驗(yàn)證)。 

這里的基本思想是使用isUserSignedIn()來決定顯示的是注冊視圖還是登錄視圖。建議把它和React的代碼拆分一起使用，以獲得更快的加載時(shí)間。

如果signUp()運(yùn)行成功，新用戶將在Easybase的“users”標(biāo)簽中可見。此外，當(dāng)用戶通過signIn()或自動進(jìn)行身份驗(yàn)證時(shí)，使用onSignIn函數(shù)自動運(yùn)行功能。

需要注意的是，用戶的屬性可以在Easybase的“用戶”標(biāo)簽中編輯，也可以通過useEasybase鉤子獲得/設(shè)置。用戶屬性僅對應(yīng)于將鍵映射到字符串的對象。

經(jīng)過身份驗(yàn)證的用戶現(xiàn)在可以讀取/寫入已配置集合中的記錄。重要的是要理解這些與集合相關(guān)的函數(shù)只對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 (
<div style={ { display: "flex" } }>
{ Frame().map((ele, index) => <CardElement {...ele} index={index} key={index} />) }
</div>
)
}

使用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>

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】