帮我生成一个c#的前后端分离登录模块 要验证 前端使用html和js 后端使用c#
时间: 2024-02-12 19:09:20 浏览: 130
带有Dapper和VS 2017的ASP.NET Core,使用JWT身份验证WEB API并在Angular2客户端应用程序中使用
好的,以下是一个简单的前后端分离登录模块的示例代码,前端使用 HTML 和 JavaScript,后端使用 C#。
前端代码(login.html):
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<h1>Login</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<button type="button" onclick="login()">Login</button>
</form>
<div id="message"></div>
<script src="login.js"></script>
</body>
</html>
```
前端代码(login.js):
```javascript
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "api/login", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
var response = JSON.parse(xhr.responseText);
if (xhr.status === 200) {
localStorage.setItem("token", response.token);
window.location.href = "dashboard.html";
} else {
document.getElementById("message").innerHTML = response.message;
}
}
};
xhr.send(JSON.stringify({username: username, password: password}));
}
```
后端代码(LoginController.cs):
```csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Security.Claims;
using System.IdentityModel.Tokens.Jwt;
using System.Text;
using Microsoft.IdentityModel.Tokens;
namespace MyProject.Controllers
{
public class LoginController : ApiController
{
[HttpPost]
public IHttpActionResult Authenticate(User login)
{
if (login == null)
throw new HttpResponseException(HttpStatusCode.BadRequest);
// Check if username and password are valid
bool isValid = CheckUser(login);
if (isValid)
{
// Authentication successful, generate JWT
var tokenString = GenerateToken(login.Username);
return Ok(new { token = tokenString });
}
else
{
// Authentication failed
return Unauthorized();
}
}
private bool CheckUser(User login)
{
// Check if username and password are valid
// Replace with your own authentication logic
return (login.Username == "admin" && login.Password == "password");
}
private string GenerateToken(string username)
{
// Generate JWT token
var securityKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("MySecretKey1234567890"));
var signingCredentials = new SigningCredentials(securityKey, SecurityAlgorithms.HmacSha256Signature);
var claims = new[]
{
new Claim(ClaimTypes.Name, username)
};
var token = new JwtSecurityToken(
issuer: "MyProject",
audience: "MyProject",
claims: claims,
expires: DateTime.Now.AddDays(1),
signingCredentials: signingCredentials);
var tokenString = new JwtSecurityTokenHandler().WriteToken(token);
return tokenString;
}
}
public class User
{
public string Username { get; set; }
public string Password { get; set; }
}
}
```
在上述代码中,前端代码包含一个登录表单和一个 JavaScript 函数,当用户点击“登录”按钮时,该函数将发送 POST 请求到 `/api/login` 接口,并将包含用户名和密码的 JSON 对象作为请求正文。后端代码包含一个 `LoginController` 类,该类包含一个名为 `Authenticate` 的方法,该方法将接收包含用户名和密码的 `User` 对象,并将进行身份验证。如果身份验证成功,则该方法将生成一个 JWT(JSON Web Token),并将其作为包含 JWT 的 JSON 对象返回给前端。如果身份验证失败,则该方法将返回 HTTP 401(未授权)响应。
请注意,此示例仅用于演示目的,并且不够安全,因为它使用了硬编码的密钥和用户名/密码。在实际应用中,您应该使用更安全的身份验证方法,并将密钥存储在安全的位置。
阅读全文