点登录系统实现基于SpringBoot

今天的干货有点湿，里面夹杂着我的泪水。可能也只有代码才能让我暂时的平静。通过本章内容你将学到单点登录系统和传统登录系统的区别，单点登录系统设计思路，Spring4 Java配置方式整合HttpClient，整合Redis ，HttpClient简易教程。还在等什么？撸起袖子开始干吧！

效果图：8081端口是sso系统，其他两个8082和8083端口模拟两个系统。登录成功后检查Redis数据库中是否有值

技术：SpringBoot，SpringMVC，Spring，SpringData，Redis，HttpClient

说明：本章的用户登录注册的代码部分已经在SpringBoot基础入门中介绍过了，这里不会重复贴代码。

源码： https://github.com/ITDragonBlog/daydayup/tree/master/SpringBoot-SSO

SpringBoot基础入门：http://www.cnblogs.com/itdragon/p/8047132.html

单点登录系统简介

在传统的系统，或者是只有一个服务器的系统中。Session在一个服务器中，各个模块都可以直接获取，只需登录一次就进入各个模块。若在服务器集群或者是分布式系统架构中，每个服务器之间的Session并不是共享的，这会出现每个模块都要登录的情况。这时候需要通过单点登录系统（Single Sign On）将用户信息存在Redis数据库中实现Session共享的效果。从而实现一次登录就可以访问所有相互信任的应用系统。

单点登录系统实现

Maven项目核心配置文件 pom.xml 需要在原来的基础上添加 httpclient和jedis jar包

 <dependency> <!-- http client version is 4.5.3 -->
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
</dependency>
<dependency> <!-- redis java client version is 2.9.0 -->
<groupId>redis.clients</groupId>
<artifactId>jedis</artifactId>
</dependency>

Spring4 Java配置方式

这里，我们需要整合httpclient用于各服务之间的通讯(也可以用okhttp)。同时还需要整合redis用于存储用户信息(Session共享)。

在Spring3.x之前，一般在应用的基本配置用xml，比如数据源、资源文件等。业务开发用注解，比如Component，Service，Controller等。其实在Spring3.x的时候就已经提供了Java配置方式。现在的Spring4.x和SpringBoot都开始推荐使用Java配置方式配置bean。它可以使bean的结构更加的清晰。

整合 HttpClient

HttpClient 是 Apache Jakarta Common 下的子项目，用来提供高效的、最新的、功能丰富的支持 HTTP 协议的客户端编程工具包，并且它支持 HTTP 协议最新的版本和建议。HttpClient4.5系列教程 : http://blog.csdn.net/column/details/httpclient.html

首先在src/main/resources 目录下创建 httpclient.properties 配置文件

#设置整个连接池默认最大连接数
http.defaultMaxPerRoute=100
#设置整个连接池最大连接数
http.maxTotal=300
#设置请求超时
http.connectTimeout=1000
#设置从连接池中获取到连接的最长时间
http.connectionRequestTimeout=500
#设置数据传输的最长时间
http.socketTimeout=10000

然后在 src/main/java/com/itdragon/config 目录下创建 HttpclientSpringConfig.java 文件

这里用到了四个很重要的注解

@Configuration : 作用于类上，指明该类就相当于一个xml配置文件

@Bean : 作用于方法上，指明该方法相当于xml配置中的

@PropertySource : 指定读取的配置文件，引入多个value={"xxx:xxx","xxx:xxx"},ignoreResourceNotFound=true 文件不存在时忽略

@Value : 获取配置文件的值，该注解还有很多语法知识，这里暂时不扩展开

package com.itdragon.config;

import java.util.concurrent.TimeUnit;
import org.apache.http.client.config.RequestConfig;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.impl.client.IdleConnectionEvictor;
import org.apache.http.impl.conn.PoolingHttpClientConnectionManager;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
import org.springframework.context.annotation.Scope;

/**
* @Configuration 作用于类上，相当于一个xml配置文件
* @Bean 作用于方法上，相当于xml配置中的<bean>
* @PropertySource 指定读取的配置文件
* @Value 获取配置文件的值
*/
@Configuration
@PropertySource(value="classpath:httpclient.properties")
public class HttpclientSpringConfig {

@Value("${http.maxTotal}")
private Integer httpMaxTotal;

@Value("${http.defaultMaxPerRoute}")
private Integer httpDefaultMaxPerRoute;

@Value("${http.connectTimeout}")
private Integer httpConnectTimeout;

@Value("${http.connectionRequestTimeout}")
private Integer httpConnectionRequestTimeout;

@Value("${http.socketTimeout}")
private Integer httpSocketTimeout;

@Autowired
private PoolingHttpClientConnectionManager manager;

@Bean
public PoolingHttpClientConnectionManager poolingHttpClientConnectionManager {
PoolingHttpClientConnectionManager poolingHttpClientConnectionManager=new PoolingHttpClientConnectionManager;
// 最大连接数
poolingHttpClientConnectionManager.setMaxTotal(httpMaxTotal);
// 每个主机的最大并发数
poolingHttpClientConnectionManager.setDefaultMaxPerRoute(httpDefaultMaxPerRoute);
return poolingHttpClientConnectionManager;
}

@Bean // 定期清理无效连接
public IdleConnectionEvictor idleConnectionEvictor {
return new IdleConnectionEvictor(manager, 1L, TimeUnit.HOURS);
}

@Bean // 定义HttpClient对象 注意该对象需要设置scope="prototype":多例对象
@Scope("prototype")
public CloseableHttpClient closeableHttpClient {
return HttpClients.custom.setConnectionManager(this.manager).build;
}

@Bean // 请求配置
public RequestConfig requestConfig {
return RequestConfig.custom.setConnectTimeout(httpConnectTimeout) // 创建连接的最长时间
.setConnectionRequestTimeout(httpConnectionRequestTimeout) // 从连接池中获取到连接的最长时间
.setSocketTimeout(httpSocketTimeout) // 数据传输的最长时间
.build;
}
}

整合 Redis

SpringBoot官方其实提供了spring-boot-starter-redis pom 帮助我们快速开发，但我们也可以自定义配置，这样可以更方便地掌控。Redis 系列教程 : http://www.cnblogs.com/itdragon/category/1122427.html

首先在src/main/resources 目录下创建 redis.properties 配置文件设置Redis主机的ip地址和端口号，和存入Redis数据库中的key以及存活时间。这里为了方便测试，存活时间设置的比较小。这里的配置是单例Redis。

redis.node.host=192.168.225.131
redis.node.port=6379

REDIS_USER_SESSION_KEY=REDIS_USER_SESSION
SSO_SESSION_EXPIRE=30

在src/main/java/com/itdragon/config 目录下创建 RedisSpringConfig.java 文件

package com.itdragon.config;

import java.util.ArrayList;
import java.util.List;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
import redis.clients.jedis.JedisPool;
import redis.clients.jedis.JedisPoolConfig;
import redis.clients.jedis.JedisShardInfo;
import redis.clients.jedis.ShardedJedisPool;

@Configuration
@PropertySource(value="classpath:redis.properties")
public class RedisSpringConfig {

@Value("${redis.maxTotal}")
private Integer redisMaxTotal;

@Value("${redis.node.host}")
private String redisNodeHost;

@Value("${redis.node.port}")
private Integer redisNodePort;

private JedisPoolConfig jedisPoolConfig {
JedisPoolConfig jedisPoolConfig=new JedisPoolConfig;
jedisPoolConfig.setMaxTotal(redisMaxTotal);
return jedisPoolConfig;
}

@Bean
public JedisPool getJedisPool{ // 省略第一个参数则是采用 Protocol.DEFAULT_DATABASE
JedisPool jedisPool=new JedisPool(jedisPoolConfig, redisNodeHost, redisNodePort);
return jedisPool;
}

@Bean
public ShardedJedisPool shardedJedisPool {
List<JedisShardInfo> jedisShardInfos=new ArrayList<JedisShardInfo>;
jedisShardInfos.add(new JedisShardInfo(redisNodeHost, redisNodePort));
return new ShardedJedisPool(jedisPoolConfig, jedisShardInfos);
}
}

Service 层

在src/main/java/com/itdragon/service 目录下创建 UserService.java 文件，它负责三件事情

第一件事情：验证用户信息是否正确，并将登录成功的用户信息保存到Redis数据库中。

第二件事情：负责判断用户令牌是否过期，若没有则刷新令牌存活时间。

第三件事情：负责从Redis数据库中删除用户信息。

这里用到了一些工具类，不影响学习，可以从源码中直接获取。

package com.itdragon.service;

import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.transaction.Transactional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.PropertySource;
import org.springframework.stereotype.Service;
import org.springframework.util.StringUtils;
import com.itdragon.pojo.ItdragonResult;
import com.itdragon.pojo.User;
import com.itdragon.repository.JedisClient;
import com.itdragon.repository.UserRepository;
import com.itdragon.utils.CookieUtils;
import com.itdragon.utils.ItdragonUtils;
import com.itdragon.utils.JsonUtils;

@Service
@Transactional
@PropertySource(value="classpath:redis.properties")
public class UserService {

@Autowired
private UserRepository userRepository;

@Autowired
private JedisClient jedisClient;

@Value("${REDIS_USER_SESSION_KEY}")
private String REDIS_USER_SESSION_KEY;

@Value("${SSO_SESSION_EXPIRE}")
private Integer SSO_SESSION_EXPIRE;

public ItdragonResult userLogin(String account, String password,
HttpServletRequest request, HttpServletResponse response) {
// 判断账号密码是否正确
User user=userRepository.findByAccount(account);
if (!ItdragonUtils.decryptPassword(user, password)) {
return ItdragonResult.build(400, "账号名或密码错误");
}
// 生成token
String token=UUID.randomUUID.toString;
// 清空密码和盐避免泄漏
String userPassword=user.getPassword;
String userSalt=user.getSalt;
user.setPassword;
user.setSalt;
// 把用户信息写入 redis
jedisClient.set(REDIS_USER_SESSION_KEY + ":" + token, JsonUtils.objectToJson(user));
// user 已经是持久化对象，被保存在session缓存当中，若user又重新修改属性值，那么在提交事务时，此时 hibernate对象就会拿当前这个user对象和保存在session缓存中的user对象进行比较，如果两个对象相同，则不会发送update语句，否则会发出update语句。
user.setPassword(userPassword);
user.setSalt(userSalt);
// 设置 session 的过期时间
jedisClient.expire(REDIS_USER_SESSION_KEY + ":" + token, SSO_SESSION_EXPIRE);
// 添加写 cookie 的逻辑，cookie 的有效期是关闭浏览器就失效。
CookieUtils.setCookie(request, response, "USER_TOKEN", token);
// 返回token
return ItdragonResult.ok(token);
}

public void logout(String token) {
jedisClient.del(REDIS_USER_SESSION_KEY + ":" + token);
}

public ItdragonResult queryUserByToken(String token) {
// 根据token从redis中查询用户信息
String json=jedisClient.get(REDIS_USER_SESSION_KEY + ":" + token);
// 判断是否为空
if (StringUtils.isEmpty(json)) {
return ItdragonResult.build(400, "此session已经过期，请重新登录");
}
// 更新过期时间
jedisClient.expire(REDIS_USER_SESSION_KEY + ":" + token, SSO_SESSION_EXPIRE);
// 返回用户信息
return ItdragonResult.ok(JsonUtils.jsonToPojo(json, User.class));
}
}

Controller 层

负责跳转登录页面跳转

package com.itdragon.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class PageController {

@RequestMapping("/login")
public String showLogin(String redirect, Model model) {
model.addAttribute("redirect", redirect);
return "login";
}

}

负责用户的登录，退出，获取令牌的操作

package com.itdragon.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.itdragon.pojo.ItdragonResult;
import com.itdragon.service.UserService;

@Controller
@RequestMapping("/user")
public class UserController {

@Autowired
private UserService userService;

@RequestMapping(value="/login", method=RequestMethod.POST)
@ResponseBody
public ItdragonResult userLogin(String username, String password,
HttpServletRequest request, HttpServletResponse response) {
try {
ItdragonResult result=userService.userLogin(username, password, request, response);
return result;
} catch (Exception e) {
e.printStackTrace;
return ItdragonResult.build(500, "");
}
}

@RequestMapping(value="/logout/{token}")
public String logout(@PathVariable String token) {
userService.logout(token); // 思路是从Redis中删除key，实际情况请和业务逻辑结合
return "index";
}

@RequestMapping("/token/{token}")
@ResponseBody
public Object getUserByToken(@PathVariable String token) {
ItdragonResult result=;
try {
result=userService.queryUserByToken(token);
} catch (Exception e) {
e.printStackTrace;
result=ItdragonResult.build(500, "");
}
return result;
}
}

视图层

一个简单的登录页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!doctype html>
<html lang="zh">
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>欢迎登录</title>
<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon">
<link rel="stylesheet" href="static/css/main.css" />
</head>
<body>
<div class="wrapper">
<div class="container">
<h1>Welcome</h1>
<form method="post" onsubmit="return false;" class="form">
<input type="text" value="itdragon" name="username" placeholder="Account"/>
<input type="password" value="123456789" name="password" placeholder="Password"/>
<button type="button" id="login-button">Login</button>
</form>
</div>
<ul class="bg-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript" src="static/js/jquery-1.10.1.min.js" ></script>
<script type="text/javascript">
var redirectUrl="${redirect}"; // 浏览器中返回的URL
function doLogin {
$.post("/user/login", $(".form").serialize,function(data){
if (data.status==200) {
if (redirectUrl=="") {
location.href="http://localhost:8082";
} else {
location.href=redirectUrl;
}
} else {
alert("登录失败，原因是：" + data.msg);
}
});
}
$(function{
$("#login-button").click(function{
doLogin;
});
});
</script>
</body>
</html>

HttpClient 基础语法

这里封装了get，post请求的方法

package com.itdragon.utils;

import java.io.IOException;
import java.net.URI;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import org.apache.http.NameValuePair;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.client.utils.URIBuilder;
import org.apache.http.entity.ContentType;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.message.BasicNameValuePair;
import org.apache.http.util.EntityUtils;

public class HttpClientUtil {

public static String doGet(String url) {// 无参数get请求
return doGet(url, );
}

public static String doGet(String url, Map<String, String> param) {// 带参数get请求
CloseableHttpClient httpClient=HttpClients.createDefault;// 创建一个默认可关闭的Httpclient 对象
String resultMsg="";// 设置返回值
CloseableHttpResponse response=;// 定义HttpResponse 对象
try {
URIBuilder builder=new URIBuilder(url);// 创建URI,可以设置host，设置参数等
if (param !=) {
for (String key : param.keySet) {
builder.addParameter(key, param.get(key));
}
}
URI uri=builder.build;
HttpGet httpGet=new HttpGet(uri);// 创建http GET请求
response=httpClient.execute(httpGet); // 执行请求
if (response.getStatusLine.getStatusCode==200) { // 判断返回状态为200则给返回值赋值
resultMsg=EntityUtils.toString(response.getEntity, "UTF-8");
}
} catch (Exception e) {
e.printStackTrace;
} finally { // 不要忘记关闭
try {
if (response !=) {
response.close;
}
httpClient.close;
} catch (IOException e) {
e.printStackTrace;
}
}
return resultMsg;
}

public static String doPost(String url) { // 无参数post请求
return doPost(url, );
}

public static String doPost(String url, Map<String, String> param) {// 带参数post请求
CloseableHttpClient httpClient=HttpClients.createDefault;// 创建一个默认可关闭的Httpclient 对象
CloseableHttpResponse response=;
String resultMsg="";
try {
HttpPost httpPost=new HttpPost(url); // 创建Http Post请求
if (param !=) { // 创建参数列表
List<NameValuePair> paramList=new ArrayList<NameValuePair>;
for (String key : param.keySet) {
paramList.add(new BasicNameValuePair(key, param.get(key)));
}
UrlEncodedFormEntity entity=new UrlEncodedFormEntity(paramList);// 模拟表单
httpPost.setEntity(entity);
}
response=httpClient.execute(httpPost);// 执行http请求
if (response.getStatusLine.getStatusCode==200) {
resultMsg=EntityUtils.toString(response.getEntity, "utf-8");
}
} catch (Exception e) {
e.printStackTrace;
} finally {
try {
if (response !=) {
response.close;
}
httpClient.close;
} catch (IOException e) {
e.printStackTrace;
}
}
return resultMsg;
}

public static String doPostJson(String url, String json) {
CloseableHttpClient httpClient=HttpClients.createDefault;
CloseableHttpResponse response=;
String resultString="";
try {
HttpPost httpPost=new HttpPost(url);
StringEntity entity=new StringEntity(json, ContentType.APPLICATION_JSON);
httpPost.setEntity(entity);
response=httpClient.execute(httpPost);
if (response.getStatusLine.getStatusCode==200) {
resultString=EntityUtils.toString(response.getEntity, "utf-8");
}
} catch (Exception e) {
e.printStackTrace;
} finally {
try {
if (response !=) {
response.close;
}
httpClient.close;
} catch (IOException e) {
e.printStackTrace;
}
}
return resultString;
}
}

Spring 自定义拦截器

这里是另外一个项目 itdragon-service-test-sso 中的代码，首先在src/main/resources/spring/springmvc.xml 中配置拦截器，设置那些请求需要拦截

 <!-- 拦截器配置 -->
<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/github/**"/>
<bean class="com.itdragon.interceptors.UserLoginHandlerInterceptor"/>
</mvc:interceptor>
</mvc:interceptors>

然后在 src/main/java/com/itdragon/interceptors 目录下创建 UserLoginHandlerInterceptor.java 文件

package com.itdragon.interceptors;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import com.itdragon.pojo.User;
import com.itdragon.service.UserService;
import com.itdragon.utils.CookieUtils;

public class UserLoginHandlerInterceptor implements HandlerInterceptor {

public static final String COOKIE_NAME="USER_TOKEN";

@Autowired
private UserService userService;

@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
throws Exception {
String token=CookieUtils.getCookieValue(request, COOKIE_NAME);
User user=this.userService.getUserByToken(token);
if (StringUtils.isEmpty(token) ||==user) {
// 跳转到登录页面，把用户请求的url作为参数传递给登录页面。
response.sendRedirect("http://localhost:8081/login?redirect=" + request.getRequestURL);
// 返回false
return false;
}
// 把用户信息放入Request
request.setAttribute("user", user);
// 返回值决定handler是否执行。true：执行，false：不执行。
return true;
}

@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
ModelAndView modelAndView) throws Exception {
}

@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler,
Exception ex) throws Exception {
}
}

可能存在的问题

SpringData 自动更新问题

SpringData 是基于Hibernate的。当User 已经是持久化对象，被保存在session缓存当中。若User又重新修改属性值，在提交事务时，此时hibernate对象就会拿当前这个User对象和保存在session缓存中的User对象进行比较，如果两个对象相同，则不会发送update语句，否则，会发出update语句。

笔者采用比较傻的方法，就是在提交事务之前把数据还原。各位如果有更好的办法请告知，谢谢！

参考博客：http://www.cnblogs.com/xiaoluo501395377/p/3380270.html

检查用户信息是否保存

登录成功后，进入Redis客户端查看用户信息是否保存成功。同时为了方便测试，也可以删除这个key。

[root@localhost bin]# ./redis-cli -h 192.168.225.131 -p 6379
192.168.225.131:6379>
192.168.225.131:6379> keys *
1) "REDIS_USER_SESSION:1d869ac0-3d22-4e22-bca0-37c8dfade9ad"
192.168.225.131:6379> get REDIS_USER_SESSION:1d869ac0-3d22-4e22-bca0-37c8dfade9ad
"{\"id\":3,\"account\":\"itdragon\",\"userName\":\"ITDragonGit\",\"plainPassword\":,\"password\":,\"salt\":,\"iphone\":\"12349857999\",\"email\":\"itdragon@git.com\",\"platform\":\"github\",\"createdDate\":\"2017-12-22 21:11:19\",\"updatedDate\":\"2017-12-22 21:11:19\"}"

总结

1 单点登录系统通过将用户信息放在Redis数据库中实现共享Session效果。

2 Java 配置方式使用四个注解 @Configuration @Bean @PropertySource @Value 。

3 Spring 拦截器的设置。

4 HttpClient 的使用。

5 祝大家圣诞节快乐！

源码： https://github.com/ITDragonBlog/daydayup/tree/master/SpringBoot-SSO

到这里，基于SpringBoot的单点登录系统就结束了，有什么不对的地方请指出。

辑导语：在合适的时机出现弹窗可以有效地吸引用户的兴趣，进而提高用户的留存率和转化率，本篇文章作者分享了构建独立站弹窗的要点和8个有意思的案例，感兴趣的一起来看一下，希望对你有帮助。

内容提要：

• 构建弹窗的要点：给谁看、目的、选择时机、内容和设计需要注意的、测试、最终目的是什么。
• 案例：挽留弹窗、点击订阅弹窗、选择弹窗、注册弹窗、复古弹窗等。

一、如何做好一个弹窗

弹窗是出现在用户屏幕上自动弹出的窗口消息。

在合适的时机、以恰当的风格呈现合适的内容，才能让用户更容易接受，并按照提示操作。

那么，构建弹窗的时候具体要注意哪些要点呢？

首先，要弄清弹窗是给谁看的。结合自己的数据或者使用的精细化运营工具，将用户进行分类。分类方法例如：

• 来源：广告、社交网络、搜索引擎、直接访问、外部链接。
• 用户对产品的认知和认可程度：新到访、已购用户、回访用户。
• 根据用户的站内行为推测：性别、年龄段、对产品的关注点。

上述分类也可结合，获得对一类用户更精准的认知。例如：这些用户都从FB来，在本站买过2件以上的男士正装衬衫。

第二，弹窗的目的是什么？

有了用户分类，我们就有了针对不同类型客户的不同运营目的。

可以从用户购买旅程入手——认知、兴趣、考虑、行动、忠诚度。

• 认知、兴趣：要不要让最核心、最受欢迎的产品跳出来？
• 兴趣、考虑：要不要跳出一个折扣专属代码？
• 考虑、行动：要不要留下联系方式，给一个代金券？
• 行动、忠诚度：要不要获得订阅许可、通知新品和活动？

第三，把握时机。

时机不光是时间，也是地点，或者说是页面。可以把用户的购物旅程和界面画成一个平面直角坐标图：

正如上面这个示意图，我们可以大概推演出：

• 哪些页面承载着哪些用户旅程作用；
• 什么目的的弹窗放在哪个界面更合适；
• 弹窗是否是达成目的的最佳手段？

第四，就是草拟弹窗内容啦。有趣的内容使您的弹窗更具响应性。这里有几个小建议：

• 明确并按照上面第一、二、三点的方向创作；
• 用户付出了信息，能得到什么；
• 包含一个引人注目的call to action；
• 突出产品核心价值；
• 来点儿小幽默。

第五，设计要注意的：

• 符合上述目的性：用字体、大小写、字号等方式突出诸如折扣、活动等等关键信息；
• 基础色、风格等尽量和品牌调性统一；
• 根据需要灵活展示核心产品。

第六，测试。

可以做大量的A/B测试，用数据说话，终止一切争论！

• 各种链接设置是否准确有效？
• 语言和设计有细微差别，到底哪种更好？
• 要不要来个大胆的创新（慎重考虑）？

第七，想想上述第二条的弹窗目的是不是最终目的？

后面还需要哪些动作配合呢？如果从CVR和LTV视角看整个独立站运营的话，运营是贯穿于用户的整个购物生命周期的。

我们当然希望用户买的越多越好，所以运营无止境啊。

• 收集到邮箱后，根据用户分类考虑邮件撰写；
• 让用户点击订阅；
• 发出邮件，获得回捞/忠诚用户再次来访后，用什么界面接应？
• 要不要做新的弹窗——让我们回到第二点。

二、弹窗典型案例

方法说的够多啦，下面给您带来8个有意思的弹窗，希望能给您一些灵感～让我们一起来看看：

1. Co-Schedule 的挽留弹窗

以“注册只需30秒”开头，寓意注册过程实用简单。

这样，嫌麻烦的一些用户可能会回心转意。Co-Schedule的主营业务是营销日历软件，向用户提供解决方案。

该消息以“终于可以将所有营销活动放在一个地方了”结束。因为了解受众是营销人员，所以Co-Schedule通过信息暗示：选择本产品对于营销是非常有利的。

这样，信息的针对性更强。在弹窗中显示产品的预览图像对于推广产品很有用。

在购买和订阅服务之前，用户可以预先看到他们会得到什么。显示“安排演示”的按钮重定向到演示预约，并提供了试用产品的机会。

2. Frank Body 的点击订阅弹窗

Frank Body 是一个专注于痤疮问题的护肤品牌。

他们的弹窗充分展示了如何让一切元素与品牌风格一致：网站标签以“Hi babe”开头，语气真诚，有一点小暧昧。

弹窗标题是“脱了裤子”。幽默地让用户注意到首次购买时可以打9折。“给你的收件箱一点爱”是一个很聪明的文案。

语言风格符合品牌调性，且达到了询问授权的目的：订阅就可以了解新产品和产品使用提示。品牌方可以有效地与客户进行有效的沟通。此外，弹窗的风格与网站的整体设计相似，看起来很温馨。

3. 乐高的选择弹窗

乐高的这个弹窗提供了有关网站不同部分的信息，这对用户很有用。

它概括描述了人们可以在网站上看到的内容。对于乐高，这样的选择也很有用。

“Continue”将用户重定向到在线商城。

“Start Playing”将用户重定向到乐高的主页和游戏区——从最开始就给访问用户进行一次很简单的分类。

这意味着乐高网站可以基于此提供更多有针对性的东西。弹出窗口的风格简单明了，但适合品牌。

此弹出窗口中使用了乐高标志和基础色。此外，乐高角色显示在游乐区部分，使其看起来更有趣。

4. MeUndies 的注册弹窗

MeUndies 是一家内衣公司。

他们在这一界面中使用了简单明了的弹窗：“15% 折扣怎么样？”获得折扣的方式是用邮箱注册。

同时，MeUndies 把下一步也想好了—— “我想要城里最好的电子邮件，拜托”。这是一个号召语，表明品牌电子邮件的质量。

在用户勾选后，品牌也获得了给用户发邮件的授权。

5. Old Navy 的注册弹窗

Old Navy 的弹窗以 20% 的折扣为标题，以“这是你挣来的”这样的正向话语收尾。

弹窗的描述部分继续使用正向的形容词和短语。这些有力的话语在人们的心目中创造了一个积极的形象。

“NEW arrivals, BIG deals, EXCLUSIVE sales。”用大写形容词来增强冲击力，提高用户参与度。

6. Pitviper 的复古风格弹窗

墨镜公司 Pitviper 的复古风格网站上显示着一个老式窗口——它与网站主页融为一体，甚至看起来都不像一个弹窗。

除了非常注意品牌辨识度以外，这个弹窗运用幽默的语言。标题是“我们真的不应该这样做”；

在文案部分，他们又说：“通讯录已经很满了，但是可以挤挤把你加进去”。

文案暗示了订阅的用户很多——也许并没这么多，但是跟这个品牌一样有幽默感的人应该不介意留个联系方式吧？

7. Pool Factory 的邮件注册弹窗

The Pool Factory 是一家销售泳池相关产品的公司。

他们的弹出式设计有类似于水花飞溅的效果，能够很好地引起注意。标题简单地说，“注册并保存“，像水滴落到地面一样干脆利落，没有添加其他文字上的创意。

因为设计已经别具一格，并且很有品牌识别度。

8. Revolve 的邮件注册弹窗

设计师服装品牌 Revolve 的电子邮件弹窗同样以折扣优惠开头。

文案用“嘿，靓仔！”的问候语，代表对用户的认可和友好态度。

用户可以选择要接收男士、女士新品或者折扣信息，也可以选择都接收。

这既让用户体会到了品牌的用心，又觉得自己被好好关注到了。

而品牌方的群发邮件也更精确——至少不会在性别上犯错了。

三、写在最后

我们经常听到做独立站的大家一听到弹窗就是一脸鄙视觉得没用，但不得不说有时候经验真的会成为一种障碍——你拥抱新事物的障碍。

多尝试，少发愁，就比如“人人抱怨”的弹窗，用得好是宝，乱弹就真能把用户全吓跑。

本文由 @李景岩 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议。

document.body.addEventListener('touchstart', 
event=> {
 if (event.target===area) {
 event.preventDefault();
 }
}
);
 

document.body.addEventListener('touchstart', 
event=> {
 if (event.target===area) {
 event.preventDefault()
 }
 }, {passive: true}
);
 

document.body.addEventListener('pointermove', event=> {
 if (event.cancelable) {
 event.preventDefault(); // block the native scroll
 /*
 * do what you want the application to do here
 */
 } 
}, {passive: true});
 

#area { 
 touch-action: pan-x; 
}
 

window.addEventListener('pointermove', event=> {
 const events=event.getCoalescedEvents();
 for (let event of events) {
 const x=event.pageX;
 const y=event.pageY;
 // draw a line using x and y coordinates.
 }
});