写一个完整的登录注册dapp项目
时间: 2024-06-08 22:09:19 浏览: 5
下面是一个基于以太坊的简单登录注册DApp项目的完整实现:
1. 环境搭建
首先需要安装和配置以下软件:
- Node.js和npm
- Truffle框架
- Ganache或其他以太坊本地测试网络
- MetaMask插件
2. 合约编写
在Truffle项目中创建Solidity合约文件,包含登录注册功能,如下:
```
pragma solidity ^0.5.0;
contract Auth {
struct User {
string username;
string password;
bool registered;
}
mapping(address => User) private users;
event UserRegistered(address indexed userAddress, string username);
event UserLoggedIn(address indexed userAddress, string username);
function register(string memory _username, string memory _password) public {
require(!users[msg.sender].registered, "User already registered");
users[msg.sender] = User(_username, _password, true);
emit UserRegistered(msg.sender, _username);
}
function login(string memory _username, string memory _password) public view returns(bool) {
require(users[msg.sender].registered, "User not registered");
return (keccak256(abi.encodePacked(_username)) == keccak256(abi.encodePacked(users[msg.sender].username))) && (keccak256(abi.encodePacked(_password)) == keccak256(abi.encodePacked(users[msg.sender].password)));
}
}
```
3. 编译和部署
在终端中使用Truffle编译和部署合约到本地测试网络中:
```
truffle compile
truffle migrate --reset
```
4. 前端实现
使用HTML、CSS和JavaScript创建简单的前端页面,并使用Web3.js连接以太坊网络,调用智能合约中的方法。以下是一个简单的HTML页面示例:
```
<!DOCTYPE html>
<html>
<head>
<title>Login/Register DApp</title>
<meta charset="UTF-8">
<script src="./js/web3.min.js"></script>
<script src="./js/app.js"></script>
</head>
<body>
<h1>Login/Register DApp</h1>
<div id="register">
<h2>Register</h2>
<form onsubmit="register(); return false;">
<input type="text" id="username" placeholder="Username" required>
<br>
<input type="password" id="password" placeholder="Password" required>
<br>
<button type="submit">Register</button>
</form>
</div>
<div id="login">
<h2>Login</h2>
<form onsubmit="login(); return false;">
<input type="text" id="username" placeholder="Username" required>
<br>
<input type="password" id="password" placeholder="Password" required>
<br>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
```
在JavaScript中编写DApp的逻辑和与智能合约的交互,以下是一个简单的JavaScript代码示例:
```
var web3Provider;
var authContract;
var userAccount;
function init() {
// 初始化web3Provider和authContract
if (typeof web3 !== 'undefined') {
web3Provider = web3.currentProvider;
} else {
web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
}
web3 = new Web3(web3Provider);
var AuthContract = web3.eth.contract(ABI);
authContract = AuthContract.at(CONTRACT_ADDRESS);
// 获取用户账户
web3.eth.getAccounts(function(error, accounts) {
if (error) {
console.log(error);
} else {
userAccount = accounts[0];
console.log(userAccount);
}
});
}
function register() {
// 注册用户
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
authContract.register(username, password, {from: userAccount}, function(error, result) {
if (error) {
console.log(error);
} else {
console.log(result);
}
});
}
function login() {
// 登录验证
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
authContract.login.call(username, password, {from: userAccount}, function(error, result) {
if (error) {
console.log(error);
} else {
console.log(result);
if (result) {
alert('Login successful');
} else {
alert('Invalid username or password');
}
}
});
}
window.addEventListener('load', function() {
init();
});
```
5. 部署和测试
在本地测试网络中启动Ganache,使用MetaMask连接到本地测试网络,并在浏览器中打开HTML页面。可以进行注册和登录操作,智能合约的状态也会相应地改变。