web前端登录功能怎么实现的（前端单点登录如何实现）

本文目录

• 前端单点登录如何实现
• 前端登陆实现
• 登录实现流程
• 网站的用户注册与登陆是怎样实现的
• VUE中从数据库拿到的数据怎么实现登录
• 使用.net实现登录功能
• java web网页登录功能原理（最好有代码❳

前端单点登录如何实现

单点登录的思路是这样的，假定有个两个系统，A系统登录一次后，再访问B系统时是不需要登录的，当访问B系统时，就去登录系统判断是否有效，如果登录系统放行了，说明是已经登录过的。所以，需要建一个登录系统，从登录系统引出是否登录的判断，那么不管是哪个系统在访问需要验证是否登录的时候都去验证登录系统。

前端登陆实现

四种方式

Cookie 出现的原因： HTTP 协议是无状态的，每次请求都会建立一个新的链接，请求结束就会断开链接，优点就是可以节省链接资源，缺点就是无法保存用户状态。Cookie 的出现就是为了解决这个问题。

Cookie 是存储在浏览器中的，可以通过 Js 和 set-cookie 这个响应字段来进行设置。

cookie 的限制：

有了 cookie 之后，服务端就可以从客户端获取到信息，如果需要对信息进行验证，那么还需要 session

服务端在收到客户端的请求之后，会在服务器中开辟一片内存空间来存放 session

第一次登陆之后，下次再访问的时候就会携带这个 cookie，服务端就可以根据 sessionId 进行验证用户是否登陆（判断这个 sessionId 和服务端保存的 sessionId 是否一致，是否有这个 sessionId 的记录或者记录是否有效）

客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是 Session。客户端浏览器再次访问时只需要从该 Session 中查找该客户的状态就可以了。

Token 是 服务器 生成的一个字符串，作为客户端请求的一个令牌。第一次登陆之后，服务器会生成一个 Token 返回给客户端，客户端后续访问的时候，只需带上这个 Token 进行身份认证

缺点

JWT（Json Web Token）

服务端不需要存储 Token 那么服务端是怎么验证客户端传递过来的 Token 是否有效的呢？

答案：

Token 并不是杂乱无章的字符串，而是通过多种算法拼接而成的字符串

header 部分指定了这个 Token 所使用的签名算法

payload 部分表明了这个 JWT 的意图

signature 部分为 JWT 的签名，主要是为了让 JWT 不被随意的篡改

签名的部分有两个步骤

一：

二:

最后的 Token 计算如下：

单点登陆指的是公司会搭建一个公共的认证中心，公司里的所有产品的认证都可以在这个认证中心中完成，一个产品在认证中心认证之后，再去访问其他产品时就不需要再次认证

这个时候，由于 a.com 存在已登录的 Cookie 信息，所以服务器端直接认证成功。

这个时候由于认证中心存在之前登陆过的 cookie，所以不需要再输入账号密码，直接从第四步开始执行

目前我们已经完成了单点登录，在同一套认证中心的管理下，多个产品可以共享登录态。现在我们需要考虑退出了，即：在一个产品中退出了登录，怎么让其他的产品也都退出登录？

原理也不难，其实就是在携带 ticket 去请求认证中心的时候，再去请求一下认证中心的退出登陆的 api 即可

当某个产品 c.com 退出登陆时

sso 就是一个集中地验证系统。你项目内请求时，向 sso 发一个请求，他给你个 token 你扔到游览器缓存里，请求的时候放在请求头里带着。和其他验证接口一样。 他好就好在，一个账号在不同系统里都可以登录，因为不同项目可以共用这个 token。并且通过 sso 集中管理一些用户信息，你可以方便的拿用户信息。

以微信为例子

登录实现流程

1、cookie+session

2、token

3、sso 单点登录

4、OAuth 第三方登录

实现流程：

缺点：

a、由于服务器要对接大量的客户端，所以服务器要存储大量的session,这会给服务器造成很大的压力

b、如果服务以集群的方式部署，为了同步登入态，那么还得同步session到每一台服务器上

c、由于seesionId是存放在cookie中的，所以无法避免一些攻击

为了解决以上问题，我们可以使用token方式

实现流程：

优缺点：

这里的token不存储在服务器，所以不会造成服务器的压力。并且服务器是集群也不需要同步数据到每台机器，不会增加维护成本。token可以存储在前端的任何地方，并不一定需要存储在cookie,提升了页面安全性。可以给token设置有效期，只要在有效期内token就一直有效，但是服务端却不容易收回有效期内token的权限。

token的生成方式：

最常见的生成token的方式是jwt(son web token)。服务器并不存储token,那后端服务是怎么校验token的呢？其实token并不是杂乱无章的字符串。

jwt由三部分组成：header、payload、signature

header 部分指定了该 JWT 使用的签名算法:

playload 部分表明了 JWT 的意图：

token的生成

服务器再校验token时，主要是判断两个方式得到的signatue是否一样

概念：

搭建一个认证中心服务，只要在该认证中心服务登录过了之后，就可以登录该服务群的任何一个服务取获取资源。

实现流程：

访问a.com下的页面，先去认证中心进行登录认证

认证中心认证完之后，继续访问a.com下的页面

访问b.com下的页面

由于浏览器存储了访问认证中心sso.com下的cookie,所以已经是登录了认证中心，认证中心直接下发tickit,之后的流程就和访问a.com下的页面差不多了。

当服务群中的一个服务退出了登录，怎么让服务群中的其它服务也退出登录呢？

当认证中心注册服务的时候，顺便也把服务对应的api也注册好吧

a、c.com退出登录，清空c.com下的cookie

b、请求认证中心下的退出登录api

c、认证中心遍历下发过的ticket的服务，并调用这些服务的退出api

使用sso登录完成了服务集群登录共享态，但是这是基于一个共同的认证中心，其实实现起来还是比较复杂的。我们其实还可以使用第三方登录，比如微信登录。

a.com 的运营者需要在微信开放平台注册账号，并向微信申请使用微信登录功能。申请成功后，得到申请的 appid、appsecret。

网站的用户注册与登陆是怎样实现的

用户注册：在数据库中建立表分别的用户名和密码表，当你注册的时候你所填写的信息就会进入到数据库中的对应的表单中。

登入：根据填写的ID在数据库中调取数据，对照密码是否相等，相等则登入成功。

需要学习：数据库，熟练运用SQL语句，熟悉PHP语言，熟悉web前端基本操作。

扩展资料：

在早期，域名、空间服务器与程序是网站的基本组成部分，随着科技的不断进步，网站的组成也日趋复杂，目前多数网站由域名、空间服务器、DNS域名解析、网站程序、数据库等组成。

域名

域名（Domain Name），是由一串用点分隔的字母组成的Internet上某一台计算机或计算机组的名称。用于在数据传输时标识计算机的电子方位（有时也指地理位置），域名

已经成为互联网的品牌、网上商标保护必备的产品之一。通俗的说，域名就相当于一个家庭的门牌号码，别人通过这个号码可以很容易的找到你。以一个常见的域名为例说明，baidu网址是由二部分组成，标号“baidu”是这个域名的主域名体，而最后的标号“com”则是该域名的后缀，代表的这是一个com国际域名，是顶级域名。而前面的www.是网络名， 为www的域名。

DNS规定，域名中的标号都由英文字母和数字组成。每一个标号不超过63个字符，也不区分大小写字母。标号中除连字符（-）外不能使用其他的标点符号。级别最低的域名写在最左边，而级别最高的域名写在最右边。

空间

常见网站空间：虚拟主机，虚拟空间，独立服务器，云主机，VPS。

虚拟主机是在网络服务器上划分出一定的磁盘空间供用户放置站点、应用组件等；提供必要的站点功能、数据存放和传输功能。所谓虚拟主机，也叫“网站空间”，就是把一台运行在互联网上的服务器划分成多个“虚拟”的服务器。每一个虚拟主机都具有独立的域名和完整的Internet服务器（支持WWW、FTP、E-mail等）功能。虚拟主机是网络发展的福音，极大的促进了网络技术的应用和普及。同时虚拟主机的租用服务也成了网络时代新的经济形式。虚拟主机的租用类似于房屋租用。

VPS即指虚拟专用服务器，是将一个服务器分区成多个虚拟独立专享服务器的技术。每个使用VPS技术的虚拟独立服务器拥有各自独立的公网IP地址、操作系统、硬盘空间、内存空间、CPU资源等，还可以进行安装程序、重启服务器等操作，与运行一台独立服务器完全相同。

VUE中从数据库拿到的数据怎么实现登录

如何使用Vue将从数据库中获取的数据用于实现登录？

在Vue中，我们经常需要从数据库中获取数据，用于解决前端工作中的各种需求。其中一个常见的需求是实现一个登录功能，这个功能需要从后台获取用户输入的用户名和密码，并进行验证，如果验证通过，则允许用户登录进入系统，否则将提示用户重新输入用户名和密码。下面，我们将介绍如何使用Vue从数据库中获取数据实现这个登录功能。

首先，我们需要在Vue组件中创建一个表单，用于让用户输入用户名和密码：

创建登录表单
在Vue中创建登录表单非常简单，只需要使用v-model指令绑定用户输入的值，并在表单中添加一个按钮来触发登录事件即可。

```html
用户名：
密码：
登录
export default {
data() {
return {
username: \"\",
password: \"\",
};
},
methods: {
login() {
// TODO: 登录操作
},
},
};
```

注意，这里我们使用了v-model指令来绑定用户输入的值，这使得我们可以很方便地获取到用户输入的内容，并将其用于后续的登录操作。

接下来，我们需要在Vue组件中实现登录功能。在这里，我们假设后台API已经实现了一个/login接口，该接口接收用户名和密码，并进行验证。如果验证通过，则返回一个JWT令牌，否则返回一个错误消息。我们需要使用Vue的axios库来向后台发送登录请求，并处理返回结果：

实现登录功能
实现登录功能需要使用到Vue的axios库，我们需要在Vue组件中导入该库，并使用它向后台发送登录请求。

```html
import axios from \"axios\";
export default {
data() {
return {
username: \"\",
password: \"\",
};
},
methods: {
async login() {
try {
const response = await axios.post(\"/login\", {
username: this.username,
password: this.password,
});
const token = response.data.token;
console.log(`登录成功，token=${token}`);
// TODO: 登录成功操作
} catch (error) {
console.error(`登录失败，错误消息=${error}`);
// TODO: 登录失败操作
}
},
},
};
```

注意，这里我们使用了async/await语法来实现异步登录请求，并使用try/catch语句块来处理异步请求的错误。如果登录请求成功，我们会得到一个包含JWT令牌的响应，我们可以将该令牌存储在本地，以便后续使用。

最后，我们需要在Vue组件中实现登录成功和失败时的操作。如果登录成功，我们可以将JWT令牌存储在浏览器的localStorage中，并跳转到系统首页。如果登录失败，则应该向用户显示一个错误消息，并提示其重新输入用户名和密码。下面是完整的Vue组件代码：

完整的Vue组件代码
下面是完整的Vue组件代码。注意，这里我们使用了vue-router库来进行页面跳转操作。

```html
用户名：
密码：
登录
import axios from \"axios\";
import router from \"@/router\";
export default {
data() {
return {
username: \"\",
password: \"\",
};
},
methods: {
async login() {
try {
const response = await axios.post(\"/login\", {
username: this.username,
password: this.password,
});
const token = response.data.token;
console.log(`登录成功，token=${token}`);
localStorage.setItem(\"token\", token);
router.push(\"/home\");
} catch (error) {
console.error(`登录失败，错误消息=${error}`);
alert(\"登录失败，请重新输入用户名和密码\");
this.username = \"\";
this.password = \"\";
}
},
},
};
```

在这个Vue组件中，我们成功实现了从数据库中获取数据，用于实现登录功能。通过使用v-model指令绑定表单元素的值，使用axios库向后台发送登录请求，并使用vue-router库进行页面跳转操作，我们成功地实现了一个基于Vue的登录功能。

使用.net实现登录功能

使用 .NET 实现登录功能的一种方法是使用 ASP.NET Core 开发 Web 应用。下面是一些指导性步骤：

• 创建 ASP.NET Core 项目。

在 Visual Studio 中，选择“文件”》“新建”》“项目”。然后，选择“ASP.NET Core Web 应用”模板，并给你的项目命名。

• 创建用户模型。

在你的项目中，创建一个名为 Models 的文件夹，并在其中创建一个名为 User 的类。这个类应该包含你要存储的所有用户信息，例如用户名、密码和电子邮件地址。

public class User

{

public string UserName { get; set; }

public string Password { get; set; }

public string Email { get; set; }

}

• 创建注册和登录控制器。

在你的项目中，创建一个名为 Controllers 的文件夹，并在其中创建一个名为 AccountController 的控制器。在这个控制器中，你应该创建两个操作方法：一个用于注册，一个用于登录。

例如，下面是一个用于注册的操作方法的示例：

public IActionResult Register(User user)

{

// 验证用户信息是否有效

if (!ModelState.IsValid)

{

// 如果信息无效，返回错误信息

return BadRequest(ModelState);

}

// 在数据库中保存用户信息

// 

然后，这里是一个用于登录的操作方法的示例：

public IActionResult Login(string username, string password)

{

// 在数据库中查询用户信息

var user = _context.Users.FirstOrDefault(u =》 u.UserName == username && u.Password == password);

// 如果用户不存在，返回错误信息

if (user == null)

{

return Unauthorized();

}

// 如果用户存在，创建并返回认证令牌

var token = new JwtSecurityToken(

issuer: _config,

audience: _config,

claims: new Claim { new Claim(ClaimTypes.Name, username) },

expires: DateTime.Now.AddMinutes(30),

signingCredentials: new SigningCredentials(new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_config)), SecurityAlgorithms.HmacSha256)

);

return Ok(new { token = new JwtSecurityTokenHandler().WriteToken(token) });

}

• 创建注册和登录视图。

在你的项目中，创建一个名为 Views 的文件夹，并在其中创建一个名为 Account 的文件夹。然后，在这个文件夹中创建两个视图：一个用于注册，一个用于登录

请点击输入图片描述

《form method="post" action="/Account/Login"》

《label for="username"》Username《/label》

《input type="text" id="username" name="username" required》

《br》

《label for="password"》Password《/label》

《input type="password" id="password" name="password" required》

《br》《br》

《input type="submit" value="Login"》

《/form》

• 配置路由。

在你的项目中，打开 Startup.cs 文件，并在 Configure 方法中配置路由。例如：

app.UseEndpoints(endpoints =》

{

endpoints.MapControllerRoute(

name: "default",

pattern: "{controller=Home}/{action=Index}/{id?}");

});

这样，你就可以通过浏览器访问 /Account/Register 和 /Account/Login 来访问注册和登录页面了。

java web网页登录功能原理（最好有代码❳

想要实现一个简单的登录功能的话，可以使用Servlet+jsp来实现，jsp编写登录界面和登录后的要出现信息界面和登录失败的信息界面，Servlet类用来对表单提交的用户名和密码进行判断和处理。
具体代码如下：
Servlet类：
public class DemoServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String loginname = request.getParameter("loginname");
String password = request.getParameter("password");
if(loginname.equals("a") && password.equals("a")){
request.setAttribute("msg", "登录成功");
request.getRequestDispatcher("/loginsuccess.jsp").forward(request, response);
}else{
request.setAttribute("msg", "登录失败");
request.getRequestDispatcher("/loginsuccess.jsp").forward(request, response);
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
jsp页面：
《%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%》
《!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"》
《html》
《head》
《title》Demo《/title》
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
《/head》
《body》
《form action="demoServlet" method="post"》
《input type="text" name="loginname"/》《br/》
《input type="password" name="password"/》《br/》
《input type="submit" value="登录"/》
《/form》
《/body》
《/html》
登录信息页面：
《%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%》
《%@ taglib prefix="c" uri="标签库地址"%》
《!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"》
《html》
《head》
《title》My JSP ’loginsuccess.jsp’ starting page《/title》
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
《/head》
《body》
${msg }
《/body》
《/html》
需要介绍一下：登录信息的这个页面中的${msg }是使用jstl标签，需要在jsp页面中导入jstl标签库，使用这个标签库可以节省很多代码量。