强化用户体验与安全性：前端单点登录和统一认证的最佳实践与区别-六虎

互联网开展了这么多年，各种更新皆为了供给更好更安全的上网环境。同时为了供给更好的用户体验、削减用户反复输入用户名和暗码的繁琐操作，并保证账户安全，前端领域中的单点登录（SSO）和一致认证（Unified Authentication）成为了重要概念。

单点登录原理

单点登录（Single Sign-On，简称SSO）是一种身份验证机制，答运用户只需一次登录，便能够拜访多个相关体系或运用，而无需重复输入用户名和暗码。下面将详细解说单点登录的原理：

graph LR
    A[用户] --> B[运用体系1]
    A --> C[运用体系2]
    A --> D[运用体系3]
    B --> E[认证中心]
    C --> E
    D --> E
    E --> B
    E --> C
    E --> D

用户拜访主运用：用户在客户端通过浏览器或移动运用程序拜访主运用，并尝试进行登录操作。
主运用认证：主运用接收到用户的登录恳求后，验证用户供给的用户名和暗码是否正确。假如认证成功，则生成一个用于标识用户身份的特定凭据或令牌。
凭据颁布：主运用将生成的凭据或令牌发送给用户浏览器，通常以Cookie或Token的形式进行存储。
子运用拜访：当用户尝试拜访其他子运用时，子运用会检测用户是否已登录。假如用户未登录，则重定向至主运用的登录页面。
单点登录验证：在重定向至主运用的登录页面后，子运用将用户重定向URL增加一个参数，包含子运用的标识信息。用户浏览器携带凭据或令牌拜访主运用。
凭据验证：主运用接收到带有凭据或令牌的恳求后，会解析验证凭据的有用性和合法性。主运用可能会运用加密算法验证凭据的完整性和真实性，保证凭据有用。
用户身份承认：一旦主运用承认凭据有用，则将用户视为已登录，并生成一个会话或认证令牌。该令牌将作为响应回来给用户浏览器。
子运用授权：用户浏览器将获取到的会话或认证令牌发送给子运用。子运用接收到令牌后，能够向主运用验证其有用性。主运用承认令牌有用后，子运用即可通过该令牌完成用户身份承认，并授权用户拜访其资源。

一致认证原理

一致认证（Unified Authentication）是一种集中管理多个子体系的用户身份验证和授权过程的机制，以完成用户在不同体系中的一致登录和权限管理。下面将详细解说一致认证的原理：

graph LR
    A[用户] --> B[运用体系1]
    A --> C[运用体系2]
    A --> D[运用体系3]
    A --> E[一致认证中心]
    E --> B
    E --> C
    E --> D

用户拜访运用体系：用户在客户端通过浏览器或移动运用程序拜访某个运用体系，并尝试进行登录操作。
运用体系认证：运用体系接收到用户的登录恳求后，验证用户供给的用户名和暗码是否正确。假如认证成功，则生成一个用于标识用户身份的特定凭据或令牌。
一致认证中心：在一致认证环境中，存在一个专门负责用户身份验证和授权的一致认证中心。运用体系将用户的认证恳求转发至一致认证中心进行处理。
用户身份认证：一致认证中心接收到运用体系的认证恳求后，对用户供给的用户名和暗码进行认证。认证中心可能会通过与用户存储的身份信息进行比对来验证用户身份的真实性。
状态维护：一旦用户身份认证成功，一致认证中心会为用户生成一个会话或认证令牌，并记载用户的登录状态。能够运用Cookie、Token或其他办法将会话或认证令牌发送给用户浏览器。
令牌传递：通过认证后，一致认证中心将用户的会话或认证令牌回来给运用体系。这个令牌是运用体系与一致认证中心之间进行交互的凭据，也是运用体系验证用户身份的依据。
子体系授权：运用体系接收到一致认证中心回来的会话或认证令牌后，能够向一致认证中心验证令牌的有用性和合法性。一旦验证通过，运用体系即可承认用户身份，并为用户颁布相应的权限。

两者的差异

单点登录 (SSO)	一致认证 (Unified Authentication)
界说	用户只需登录一次，即可拜访多个运用体系。	用户通过一个中心化的认证体系进行身份验证和授权。
流程	用户登录后，通过认证中心颁布的令牌完成免密登录其他运用体系。	用户直接与一致认证中心进行交互，由认证中心验证身份并授权。
身份验证	认证中心负责验证用户身份，并生成令牌用于后续拜访运用体系。	一致认证中心负责验证用户身份，并生成令牌用于后续拜访运用体系。
运用体系集成	运用体系之间需求与认证中心树立信赖联系，以验证令牌的有用性。	运用体系之间需求与一致认证中心树立信赖联系，以验证令牌的有用性。
可扩展性	可支撑多种不同的认证办法和协议。	可支撑多种不同的认证办法和协议。
用户体验	用户只需进行一次登录，无需重复输入用户名和暗码。	用户只需进行一次登录，无需重复输入用户名和暗码。
隐私维护	用户个人信息在不同运用体系间同享较少，隐私更易得到维护。	用户个人信息在一致认证中心集中管理，需求留意隐私维护。

要完成单点登录，通常会运用一致认证作为基础，将用户的登录状态在不同体系间进行同享。因此，在某些情况下，能够将一致认证看作是完成单点登录的一种办法。

前端怎么完成

以下代码均为简单示例，实际情况将更为复杂
要在前端完成单点登录 (SSO)，需求利用后端供给的认证中心或身份供给者来处理用户的认证和生成令牌。

完成单点登录

首先咱们需求运用axios来进行后端恳求。

import React, { useEffect } from 'react';
import axios from 'axios';
const SSO = () => {
  useEffect(() => {
    // 发送登录恳求到认证中心
    axios.post('http://认证中心地址/sso/login', {
      username: '用户名',
      password: '暗码'
    })
    .then(response => {
      // 登录成功，得到认证中心回来的令牌
      const token = response.data.token;
      // 将令牌保存在本地存储或 cookie 中
      localStorage.setItem('token', token);
      // 跳转到其他运用体系
      window.location.href = 'http://其他运用体系地址';
    })
    .catch(error => {
      // 登录失利，处理过错逻辑
      console.error('登录失利：', error);
    });
  }, []);
  return (
    <div>
      正在进行单点登录...
    </div>
  );
};
export default SSO;

通过 useEffect 钩子函数，在组件加载时发送登录恳求到认证中心。认证中心验证用户名和暗码，并回来令牌。然后，将令牌保存在本地存储或 cookie 中（依据实际需求），最后跳转到其他运用体系。

完成一致认证

在前端代码中，假如咱们想要完成一致认证登录,那么就可能要安装第三方库 oidc-client，它是一个用于客户端完成 OpenID Connect 的 JavaScript 库

npm install oidc-client

然后，在前端代码中引进 oidc-client，并编写一致认证登录的逻辑：

import React, { useEffect } from 'react';
import { UserManager } from 'oidc-client';
const Login = () => {
  useEffect(() => {
    const userManager = new UserManager({
      authority: '认证中心地址',
      client_id: '客户端ID',
      redirect_uri: '重定向URI',
      response_type: 'code',
      scope: 'openid profile',
      silent_redirect_uri: '静默刷新URI',
      automaticSilentRenew: true,
      filterProtocolClaims: true
    });
    // 查看是否现已登录，假如现已登录则主动跳转到其他页面
    userManager.getUser().then(user => {
      if (user) {
        window.location.href = '其他页面地址';
      }
    });
    // 处理认证回调
    userManager.signinRedirectCallback().then(user => {
      // 登录成功，跳转到其他页面
      window.location.href = '其他页面地址';
    }).catch(error => {
      // 登录失利，处理过错逻辑
      console.error('登录失利：', error);
    });
  }, []);
  const handleLogin = () => {
    // 触发认证中心登录流程
    userManager.signinRedirect();
  };
  return (
    <div>
      <button onClick={handleLogin}>一致认证登录</button>
    </div>
  );
};
export default Login;

通过 oidc-client 创建一个 UserManager 实例，并依据实际情况装备认证中心的地址、客户端ID、重定向URI等参数。然后，运用 getUser() 办法查看用户是否现已登录，假如现已登录，则主动跳转到其他页面。

当点击 “一致认证登录” 按钮时，调用 signinRedirect() 办法触发认证中心的登录流程，并将用户重定向到认证中心进行身份验证。在认证回调页面中，调用 signinRedirectCallback() 办法处理认证成果，并获取用户信息。假如登录成功，能够将用户重定向到其他页面。

后端怎么完成

通过对朋友的“拷打”终于让我逼问出Java是怎么完成这两者的功用。

在Java中完成一致认证登录时，能够运用不同的框架和库，如Spring Security、OAuth 2.0、OpenID等

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.oauth2.config.annotation.web.configuration.EnableOAuth2Client;
@SpringBootApplication
@EnableWebSecurity // 启用Web安全功用
@EnableOAuth2Client // 启用OAuth 2.0客户端功用
public class Application {
  public static void main(String[] args) {
    SpringApplication.run(Application.class, args);
  }
}


import org.springframework.beans.factory.annotation.Autowired;
// import ...
@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true) // 启用全局办法级安全注解，如@PreAuthorize和@PostAuthorize
public class SecurityConfig extends WebSecurityConfigurerAdapter {
  @Autowired
  private OAuth2AuthorizedClientService clientService;
  @Override
  protected void configure(HttpSecurity http) throws Exception {
    http
      .authorizeRequests()
        .antMatchers("/login**", "/error**")
        .permitAll() // 答应/login和/error途径的任意恳求
        .anyRequest()
        .authenticated() // 其他途径需求认证后才干拜访
      .and()
      .oauth2Login() // 装备OAuth 2.0登录支撑
        .loginPage("/login") // 指定自界说的登录页面途径
        .defaultSuccessUrl("/success") // 登录成功后的默许跳转途径
        .failureUrl("/error") // 登录失利后的跳转途径
      .and()
      .logout() // 装备退出登录的处理
        .logoutRequestMatcher(new AntPathRequestMatcher("/logout")) // 指定退出登录的URL匹配规矩
        .logoutSuccessUrl("/login") // 退出登录后的跳转途径
        .deleteCookies("JSESSIONID"); // 退出登录时删去指定的cookie
  }
  @Autowired
  public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
    // 依据需求增加用户认证逻辑，例如从数据库中验证用户信息、集成第三方身份供给者等
  }
}

在上面代码里界说了一个名为SecurityConfig的装备类，承继自WebSecurityConfigurerAdapter，用于装备Spring Security的安全策略。

通过@EnableGlobalMethodSecurity(prePostEnabled = true)注解，启用了全局办法级安全注解，如@PreAuthorize和@PostAuthorize，以便在代码中运用注解操控办法的拜访权限。

在configure(HttpSecurity http)办法中，装备了URL的拜访权限。其间，.antMatchers("/login**", "/error**").permitAll()表示答应/login和/error途径的任意恳求，.anyRequest().authenticated()表示其他途径需求通过认证才干拜访。然后装备了OAuth 2.0的登录支撑，设置了登录页面途径、默许成功跳转途径和失利跳转途径。最后，咱们装备了退出登录的处理，包括退出URL匹配规矩、退出成功后的跳转途径和要删去的cookie。

在configureGlobal(AuthenticationManagerBuilder auth)办法中，能够依据需求增加用户认证逻辑，例如从数据库中验证用户信息、集成第三方身份供给者等，以完成具体的认证功用。

总结

总结起来，与前端代码比较，Java后端代码中的首要差异在于运用了Spring Security库来处理认证和授权的逻辑，通过装备类来界说URL的拜访权限、认证办法等。

本文同步我的技能文档

强化用户体验与安全性：前端单点登录和统一认证的最佳实践与区别

单点登录原理

一致认证原理

两者的差异

前端怎么完成

完成单点登录

完成一致认证

后端怎么完成

总结

相关文章

Python Flask JinJa2 语法介绍与示例讲解

Express框架详解— _router 对象数据结构

缘起性空

后端语言很难？前端入门go基础语法只需要3小时！（中）

作者信息