如何实现单点登录

• 什么是单点登录？
• 实现单点登录
• 举例说明

什么是单点登录？

单点登录英文全称 Single Sign On，简称 SSO。

它的定义是：在多个应用系统中，用户只需要登录一次，即可访问所有相互信任的应用系统。

例如，常见的单点登录是通过一次登录访问各种应用程序。

例如，登录您的员工账号就可以让您访问飞书、销售易、客户系统等应用程序，无需再次输入账号和密码。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

实现单点登录

前端实现单点登录（SSO）需要与后端进行协作。下面是一般的实现步骤：

1. 确定身份提供者（Identity Provider，IdP）和服务提供者（Service Provider，SP）：SSO通常涉及多个应用程序和系统，其中一个应用程序充当身份提供者，负责认证用户身份，而其他应用程序则作为服务提供者，依赖于身份提供者验证用户身份。

2. 用户登录：用户在请求服务提供者的应用程序时需要提供登录凭据（例如用户名和密码），服务提供者将登录凭据发送给身份提供者进行验证。

3. 身份提供者验证：身份提供者接收到登录请求后，对用户提供的登录凭据进行验证。如果凭据有效，则生成一个身份令牌（例如JSON Web Token，JWT）用于表示用户的已验证身份。

4. 身份令牌传递：身份提供者将生成的身份令牌返回给服务提供者。通常，这是通过将令牌作为响应的一部分返回给浏览器进行重定向或嵌入到响应的Cookie中来实现的。

5. 服务提供者验证：服务提供者接收到身份令牌后，使用事先与身份提供者共享的密钥或公钥进行验证。如果令牌有效，则用户被授予访问服务提供者的权限。

6. 用户访问控制：服务提供者使用验证后的身份令牌来识别用户并为其提供访问权限。可以根据具体需求，实现一些相关功能，例如获取用户信息、授权管理等。

需要注意的是，前端的单点登录实际上是建立在后端的认证和授权机制之上的，前端主要负责与后端进行交互，传递身份令牌，并在需要时进行更新。具体实现方式可能因框架和技术选择而有所不同，但以上流程是通用的基本原理。

举例说明

在前端实现单点登录（SSO）时，可以通过以下两种常见的方式来实现：

1. 基于浏览器的Cookie：

   • 用户成功登录一个应用程序后，该应用程序将生成一个身份令牌，并将其存储在浏览器的Cookie中。
   • 其他应用程序在用户访问时，会检查浏览器的Cookie。如果存在有效的身份令牌，则用户无需重新登录，直接被认为已经登录。
   • 这种方法需要各个应用程序之间共享同一个域名或子域名，以便Cookie可以在不同应用程序之间进行传递。

2. 基于Token的跨域认证：

   • 用户成功登录后，身份提供者（IdP）会颁发一个凭证，例如JSON Web Token（JWT）。
   • 用户访问其他应用程序时，前端会将凭证添加到请求头中，例如Authorization头部字段。
   • 后端的服务提供者（SP）会验证凭证的合法性，并决定是否允许访问。
   • 这种方式可以支持跨域访问，因为凭证可以在请求头中传递，而不依赖于浏览器的Cookie。一般会将凭证保存在前端的本地存储（如localStorage或sessionStorage）中。

以下是一个基于Token的跨域认证的示例代码，使用了JavaScript和Axios库：

// 用户登录成功后，保存凭证到本地存储
function saveToken(token) {
  localStorage.setItem('token', token);
}

// 发送请求时，将凭证添加到请求头中
function sendRequest(url, method, data) {
  const token = localStorage.getItem('token');
  
  axios({
    url: url,
    method: method,
    headers: {
      'Authorization': `Bearer ${token}`  // 添加凭证到请求头
    },
    data: data
  })
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });
}

// 用户注销时，清除本地存储的凭证
function logout() {
  localStorage.removeItem('token');
}

以上示例中，saveToken函数用于保存凭证到本地存储，sendRequest函数在发送请求时自动将凭证添加到请求头中，logout函数用于用户注销时清除凭证。

需要注意的是，示例只展示了前端部分的代码，实际上还需要后端来验证和签发凭证，并提供接口供前端调用。具体的实现方式会根据具体的身份提供者和服务提供者进行调整。