Создайте аутентификацию с помощью блокчейна

Опубликовано: 9 Января, 2023

Обычно аутентификация выполняется с использованием таких баз данных, как 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
        src="https://media.geeksforgeeks.org/wp-content/uploads/20210318103632/gfg.png"
        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
        src="https://media.geeksforgeeks.org/wp-content/uploads/20210318103632/gfg.png"
        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: Настройка метамаски и ганаша
  1. Установите расширение Metamask Ganache.
  2.  Сначала откройте Ganache, нажмите «Быстрый старт», и вы увидите 10 адресов с каждой монетой 100 ETH.
  3.  Вверху можно будет увидеть идентификатор сети как 1337 и сервер RPC как HTTP://127.0.0.1:7545 , если есть разные идентификатор и сервер, перейдите в настройки, измените их, нажмите «Сохранить» и перезапустите.
  4.  Теперь откройте Metamask, перейдите в настройки -> Добавить сети -> Точно укажите ниже детали -> Нажмите «Сохранить».
Шаг 5: Работа с бэкендом
  1. Создайте смарт-контракт, который является основной частью блокчейна.
  2.  Теперь откройте командную строку -> Перейдите в приложение авторизации (интерфейс) -> Примените следующие команды.
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);
}
Аут.соль:
Solidity


                            

                    
                                    

                        

                
РЕКОМЕНДУЕМЫЕ СТАТЬИ