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