Создайте аутентификацию с помощью блокчейна
Обычно аутентификация выполняется с использованием таких баз данных, как MYSQL, Firebase, MongoDB и т. д. Одним из самых больших недостатков является вероятность повреждения данных. Данные могут быть изменены любым, кто контролирует саму базу данных.
Чтобы преодолеть вышеуказанную проблему, здесь будет создана аутентификация веб-приложения с использованием блокчейна.
Компоненты в приложении веб-аутентификации:
- Ganache : локальный блокчейн Ethereum.
- Web3 JS : чтобы приложение могло взаимодействовать с блокчейном.
- Solidity : для составления смарт-контракта.
- React JS : для внешнего интерфейса приложения.
- Truffle : для среды разработки, конвейера активов и среды тестирования для разработки смарт-контрактов.
- Метамаска : для криптовалютного кошелька.
Шаг 1: глобальная установка Truffle
Откройте командную строку и установите truffle, используя следующую команду:
npm install -g truffle@5.4.29
Шаг 2: Установка приложения React
Для создания приложения выполните следующие шаги:
npx create-react-app auth-app
cd auth-app
Теперь установите все необходимые модули для проекта с помощью следующей команды:
npm install react-router-dom web3
Шаг 3: Работа с интерфейсом
Шаг 3.1: Откройте папку «src» и выберите файл App.js.
Этот файл содержит логику маршрутизации, где маршрутизация помогает пользователю перемещаться по разным страницам. Ознакомьтесь с документацией по react-router-dom, чтобы узнать больше о маршрутизации в React JS.
Ниже приведен код файла App.js:
Javascript
import "./App.css" ; import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom" ; import SignIn from "./Screens/Signin" ; import SignUp from "./Screens/Signup" ; import Home from "./Screens/Home" ; function App() { const email = localStorage.getItem( "email" ); return ( <div className= "App" > <BrowserRouter> <Routes> <Route exact path= "/" element={<SignIn />} /> <Route path= "/Signup" element={<SignUp />} /> <Route path= "/Home" element={email ? <Home /> : <Navigate to= "/" />} /> </Routes> </BrowserRouter> </div> ); } export default App; |
Шаг 3.2: Создайте папку «Экраны» и создайте файлы «Signin.js» , «Signup.js» , «Home.js».
Шаг 3.3: Работа с файлом Signin.js
Здесь пользователям необходимо ввести свой адрес электронной почты и пароль. Ниже код аутентифицирует введенный пользователем адрес электронной почты и пароль и переходит на домашнюю страницу:
Javascript
// calling smart contract map methods const res = await auth.methods.usersList(email).call(); // In res the is username , password and email // checking input password with stored password if (res.password === password) { // storing user details in local storage localStorage.setItem( "email" , email); localStorage.setItem( "account" , accounts); navigate( "/Home" ); // navigate to home page } else { alert( "wrong user credentials or please signup" ); } |
1. Если пользователь не зарегистрирован, выдайте предупреждение, поскольку пользователь не найден.
2. Если пользователь ввел неправильные учетные данные, выдайте предупреждение о неправильном пароле.
После успешного входа пользователи переходят на домашнюю страницу.
Вход.js:
Javascript
import * as React from "react" ; import { loadBlockchainData, loadWeb3 } from "../Web3helpers" ; import { useNavigate } from "react-router-dom" ; export default function SignIn() { const [email, setEmail] = React.useState( "" ); const [password, setPassword] = React.useState( "" ); const navigate = useNavigate(); const [accounts, setAccounts] = React.useState( null ); const [auth, setAuth] = React.useState( null ); const loadAccounts = async () => { let { auth, accounts } = await loadBlockchainData(); setAccounts(accounts); setAuth(auth); }; const login = async () => { if (!email || !password) { alert( "please fill all details" ); return ; } try { const res = await auth.methods.usersList(email).call(); if (res.password === password) { localStorage.setItem( "email" , email); localStorage.setItem( "account" , accounts); navigate( "/Home" ); } else { alert( "wrong user credentials or please signup" ); } } catch (error) { alert(error.message); } }; React.useEffect(() => { loadWeb3(); }, []); React.useEffect(() => { loadAccounts(); }, []); return ( <div style={rootDiv}> <img style={image} alt= "geeks" /> <input style={input} value={email} onChange={(e) => setEmail(e.target.value)} placeholder= "Email" type= "text" /> <input style={input} value={password} onChange={(e) => setPassword(e.target.value)} placeholder= "Password" type= "password" /> <button style={button} onClick={login}> { " " } Sign In </button> <span style={{ cursor: "pointer" }} onClick={() => { navigate( "/Signup" ); }} > { " " } Create new account{ " " } </span> </div> ); } const rootDiv = { display: "flex" , flexDirection: "column" , alignItems: "center" , justifyContent: "center" , height: "100vh" , }; const input = { width: 300, padding: 10, margin: 10, borderRadius: 10, outline: "none" , border: "2px solid grey" , fontSize: 17, }; const button = { width: 325, padding: 10, borderRadius: 10, margin: 10, cursor: "pointer" , fontSize: 17, color: "white" , backgroundColor: "#9D27CD" , border: "none" , }; const image = { width: 70, height: 70, objectFit: "contain" , borderRadius: 70, }; |
Шаг 3.4: Работа с файлом Signup.js
Здесь пользователям необходимо зарегистрироваться/зарегистрироваться, указав имя пользователя, адрес электронной почты и пароль. Код ниже создает нового пользователя в базе данных блокчейна.
await auth.methods .createUser(username, email, password) .send({ from: accounts });
После регистрации пользователь переходит на страницу авторизации.
Signup.js
Javascript
import * as React from "react" ; import { loadBlockchainData, loadWeb3 } from "../Web3helpers" ; import { useNavigate } from "react-router-dom" ; export default function SignUp() { const [username, setUsername] = React.useState( "" ); const [email, setEmail] = React.useState( "" ); const [password, setPassword] = React.useState( "" ); const navigate = useNavigate(); const [accounts, setAccounts] = React.useState( null ); const [auth, setAuth] = React.useState( null ); const loadAccounts = async () => { let { auth, accounts } = await loadBlockchainData(); setAccounts(accounts); setAuth(auth); }; const signUp = async () => { if (!username || !email || !password) { alert( "please fill all details" ); return ; } var mailformat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/; if (!email.match(mailformat)) { alert( "please enter valid email address" ); return ; } try { await auth.methods .createUser(username, email, password) .send({ from: accounts }); localStorage.setItem( "username" , username); localStorage.setItem( "email" , email); navigate( "/" ); } catch (e) { console.log(e.message); } }; React.useEffect(() => { loadWeb3(); }, []); React.useEffect(() => { loadAccounts(); }, []); return ( <div style={rootDiv}> <img style={image} alt= "geeks" /> <input style={input} value={username} onChange={(e) => setUsername(e.target.value)} placeholder= "Username" type= "text" /> <input style={input} value={email} onChange={(e) => setEmail(e.target.value)} placeholder= "Email" type= "text" /> <input style={input} value={password} onChange={(e) => setPassword(e.target.value)} placeholder= "Password" type= "password" /> <button style={button} onClick={signUp}> { " " } Sign Up </button> </div> ); } const rootDiv = { display: "flex" , flexDirection: "column" , alignItems: "center" , justifyContent: "center" , height: "100vh" , }; const input = { width: 300, padding: 10, margin: 10, borderRadius: 10, outline: "none" , border: "2px solid grey" , fontSize: 17, }; const button = { width: 325, padding: 10, borderRadius: 10, margin: 10, cursor: "pointer" , fontSize: 17, color: "white" , backgroundColor: "#9D27CD" , border: "none" , }; const image = { width: 70, height: 70, objectFit: "contain" , borderRadius: 70, }; |
Шаг 3.5: Работа с файлом Home.js
Здесь мы находим адрес пользователя и электронную почту
Home.js
Шаг 3.6: Теперь создайте файл Web3helpers.js в папке src, чтобы хранить функции web3, используемые для загрузки адреса из Metamask. Ниже приведен код файла Web3helpers.js:
Шаг 4: Настройка метамаски и ганаша
- Установите расширение Metamask Ganache.
- Сначала откройте Ganache, нажмите «Быстрый старт», и вы увидите 10 адресов с каждой монетой 100 ETH.
- Вверху можно будет увидеть идентификатор сети как 1337 и сервер RPC как HTTP://127.0.0.1:7545 , если есть разные идентификатор и сервер, перейдите в настройки, измените их, нажмите «Сохранить» и перезапустите.
- Теперь откройте Metamask, перейдите в настройки -> Добавить сети -> Точно укажите ниже детали -> Нажмите «Сохранить».
Шаг 5: Работа с бэкендом
- Создайте смарт-контракт, который является основной частью блокчейна.
- Теперь откройте командную строку -> Перейдите в приложение авторизации (интерфейс) -> Примените следующие команды.
cd src
truffle build
Теперь вы можете видеть папки «миграции», «контракты» и «сборка» в папке src.
Шаг 5.1. Откройте папку миграции и создайте файл Javascript с именем 2_deploy_migration.js.
Здесь мы развертываем наш смарт-контракт, который мы собираемся создать.
2_deploy_migration.js:
Javascript
const Auth = artifacts.require( "Auth" ); module.exports = function (deployer) { deployer.deploy(Auth); }; |
Шаг 5.2: Откройте папку с контрактами и создайте файл солидности как « Auth.sol».
Здесь будет создан смарт-контракт для нашей аутентификации. Ниже приведен код для определения карты со структурой:
mapping(string => user) public usersList; struct user{ string username; string email; string password; }
Приведенная ниже функция принимает параметры электронной почты, пароля и имени пользователя и сопоставляет данные пользователя с электронной почтой пользователя:
function createUser(string memory _username, string memory _email, string memory _password) public { userCount++; usersList[_email] = user(_username,_email,_password); emit userCreated(_username,_email,_password); }
Аут.соль: