问题汇总
1、钉钉免登时，要通过dingtalk.js获取一个只能使用一次的code，用次code在服务端获取用户userid；若需要实现自动登录，就不能用传统的用户名密码登录。
2、登录过程中需要从后端获取 accesstoken、jsticket、用户userid，用userid获取userinfo，当accesstoken和jsticket都过期时（7200秒），四个参数皆需要通过网络获取，耗时较长。
3、需要使用spring security保护RESTApi，防止匿名访问。
4、spring security默认表单登录模式，用ajax 增加复杂度。
解决方案
解决思路：
1、前端获取到code时，用corpid作为username，code作为password，重写userDetail，用code能获取到userid时，表明code有效，并用词userid创建新用户，corpid作为密码，添加User权限并返回；
2、accesstoken和jsticket使用独立的程序定时获取，登录时只从数据库取出使用，不从网络获取以减少时间；前端加入loading动画以提升用户体验；开启remeber-me功能，减少登录。
3、配置springSecurity即可，同时将登录事件放置与dd.ready中，防止在钉钉之外的浏览器打开访问。
4、创建form，并使用jQuery填充用户名及密码，使用jQuery模拟click登录。安全性方面，由于corpid公开无妨，code使用次数仅有1此且5分钟有效期，目前暂未使用加密传递；
解决步骤
1、引入springsecurity依赖
compile('org.springframework.boot:spring-boot-starter-security')
2、配置websecurityConfigure
@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
private final String KEY="TECHASER";
//注入userBean
@Bean
UserDetailsService customUserService(){
return new DingtalkUserService();
}
//重写登录验证
@Override
protected void configure(AuthenticationManagerBuilder auth)throws Exception{
auth.userDetailsService(customUserService());
}
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers(
HttpMethod.GET,
"/",
"/*.html",
"/favicon.ico",
"/**/*.html",
"/**/*.css",
"/**/*.js",
"/**/*.map",
"/**/*.png",
"/**/*.jpg"
).permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.loginPage("/login").defaultSuccessUrl("/app").failureUrl("/login/failed").permitAll()
.and().logout().logoutUrl("/logout").logoutSuccessUrl("/login").permitAll()
.and().exceptionHandling().accessDeniedPage("/403")
.and().csrf().disable()
.rememberMe().rememberMeParameter("rememberMe").tokenValiditySeconds(5000).key(KEY);
http.headers().cacheControl();
}
}
登录验证方法：重写 loadUserByUsername即可
@Service
public class DingtalkUserService implements UserDetailsService {
@Autowired
private AuthService authService;
/**
* 使用前台传来的 免登code,从后端获取userId，从error_code=0判断code是否有效,corpId作为密码，并添加ROLE_USER权限
* corpId 前面添加 {noop} ,不使用密码加密
* @param username
* @return
* @throws UsernameNotFoundException
*/
@Override
public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
String code=username;
String password="{noop}"+ Company.CORP_ID;
UserResponse userResponse= null;
try {
userResponse = AuthHelper.getUserCode(authService.autoGetAccessToken(),code);
} catch (IOException e) {
e.printStackTrace();
}
System.out.println("errorCode:"+userResponse.getErrcode());
if(userResponse.getErrcode().equals("0")){
List<GrantedAuthority> authorities=new ArrayList<GrantedAuthority>();
authorities.add(new SimpleGrantedAuthority("ROLE_USER"));
System.out.println("password is "+password);
return new User(userResponse.getUserid(),password,authorities);
}else {
return new User("user","{noop}not",new ArrayList<>());
}
}
}
登录页面
<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>Login</title>
<script th:inline="javascript" type="text/javascript">
/*<![CDATA[*/
//在此拿到corpid
var corpid = [[${corpid}]];
/*]]>*/
</script>
</head>
<body>
<div style="top:200px;">
<form th:action="@{/login}" th:method="post">
<input type="text" name="username" id="username" hidden>
<input type="password" name="password" id="password" hidden>
<input type="text" name="remember-me" checked value="TECHASER" hidden>
<div class='btn-container'>
<button class='btn btn--shockwave is-active' type="submit" style="color: #0c5460" id="submit-btn">
点击用钉钉登录
</button>
</div>
</form>
</div>
<script type="text/javascript" th:src="@{http://g.alicdn.com/dingding/open-develop/1.6.9/dingtalk.js}"></script>
<script type="text/javascript" th:src="@{/jquery/jquery-3.3.1.min.js}"></script>
<script type="text/javascript">
$(document).ready(function () {
dd.ready(function () {
dd.runtime.permission.requestAuthCode({
corpId: corpid,
onSuccess: function (info) {
$("#username").val(info.code);
$("#password").val(corpid);
$("#submit-btn").click().delay(2000);
},
onFail: function (err) {
alert('fail: ' + JSON.stringify(err));
}
});
});
});
</script>
</body>
</html>
需要通过网络获取的参数诸如accessToken jsTicket Userid等，可参考 http://open.dingtalk.com/
后续需要解决的问题：
1、登录速度需要进一步优化
2、remember-me开启后，需要在页面内提供可供退出登录的连接
3、加密传出数据，启用https
4、可以看到 crsf处于disable状态，需开启
绕过的问题
使用 ajax方式登录时，可以从控制台看出已经登录，并返回了需要打开的文档，但未能跳转页面，不明原因。
2018年8月10日补充更新：
解决了登录缓慢的问题
原先登录速度方面，由于使用了spring security，当webApp中请求过多时，造成认证授权的内容过多，容易发生阻塞：
2018-08-10 15:27:47.665 DEBUG 18456 --- [nio-8089-exec-1] o.s.s.w.u.matcher.AntPathRequestMatcher : Checking match of request : '/app'; against '/'
2018-08-10 15:27:47.666 DEBUG 18456 --- [nio-8089-exec-1] o.s.s.w.u.matcher.AntPathRequestMatcher : Checking match of request : '/app'; against '/img/*'
2018-08-10 15:27:47.666 DEBUG 18456 --- [nio-8089-exec-1] o.s.s.w.u.matcher.AntPathRequestMatcher : Checking match of request : '/app'; against '/*.html'
2018-08-10 15:27:47.666 DEBUG 18456 --- [nio-8089-exec-1] o.s.s.w.u.matcher.AntPathRequestMatcher : Checking match of request : '/app'; against '/favicon.ico'
2018-08-10 15:27:47.666 DEBUG 18456 --- [nio-8089-exec-1] o.s.s.w.u.matcher.AntPathRequestMatcher : Checking match of request : '/app'; against '/**/*.html'
2018-08-10 15:27:47.666 DEBUG 18456 --- [nio-8089-exec-1] o.s.s.w.u.matcher.AntPathRequestMatcher : Checking match of request : '/app'; against '/**/*.css'
2018-08-10 15:27:47.666 DEBUG 18456 --- [nio-8089-exec-1] o.s.s.w.u.matcher.AntPathRequestMatcher : Checking match of request : '/app'; against '/**/*.js'
2018-08-10 15:27:47.666 DEBUG 18456 --- [nio-8089-exec-1] o.s.s.w.u.matcher.AntPathRequestMatcher : Checking match of request : '/app'; against '/**/*.map'
2018-08-10 15:27:47.666 DEBUG 18456 --- [nio-8089-exec-1] o.s.s.w.u.matcher.AntPathRequestMatcher : Checking match of request : '/app'; against '/**/*.png'
2018-08-10 15:27:47.666 DEBUG 18456 --- [nio-8089-exec-1] o.s.s.w.u.matcher.AntPathRequestMatcher : Checking match of request : '/app'; against '/**/*.jpg'
2018-08-10 15:27:47.666 DEBUG 18456 --- [nio-8089-exec-1] o.s.s.w.u.matcher.AntPathRequestMatcher : Checking match of request : '/app'; against '/**/*.eot'
2018-08-10 15:27:47.666 DEBUG 18456 --- [nio-8089-exec-1] o.s.s.w.u.matcher.AntPathRequestMatcher : Checking match of request : '/app'; against '/**/*.ttf'
2018-08-10 15:27:47.666 DEBUG 18456 --- [nio-8089-exec-1] o.s.s.w.u.matcher.AntPathRequestMatcher : Checking match of request : '/app'; against '/**/*.woff'
2018-08-10 15:27:47.666 DEBUG 18456 --- [nio-8089-exec-1] o.s.s.w.u.matcher.AntPathRequestMatcher : Checking match of request : '/app'; against '/**/*.woff2'
2018-08-10 15:27:47.666 DEBUG 18456 --- [nio-8089-exec-1] o.s.s.w.u.matcher.AntPathRequestMatcher : Checking match of request : '/app'; against '/**/*.svg'
2018-08-10 15:27:47.666 DEBUG 18456 --- [nio-8089-exec-1] o.s.s.w.u.matcher.AntPathRequestMatcher : Checking match of request : '/app'; against '/pages/*'
在请求静态资源时，也会做验证，虽然WebSecurityConfigure中配置忽略：
@Override
public void configure(WebSecurity web) throws Exception {
web
.ignoring()
.antMatchers("/",
"/img/*",
"/*.html",
"/favicon.ico",
"/**/*.html",
"/**/*.css",
"/**/*.js",
"/**/*.map",
"/**/*.png",
"/**/*.jpg",
"/**/*.eot",
"/**/*.ttf",
"/**/*.woff",
"/**/*.woff2",
"/**/*.svg",
"/pages/*",
"/test4"
);
}
总是在某些请求是卡住五六秒，导致从登陆页面跳转至应用首页时发生白屏现象。
解决办法是，尽量减少请求的次数：
1、合并css、js文件
2、开源框架使用cdn 国内推荐使用：https://www.bootcdn.cn
3、页面中的ajax请求放到页面底部 window.onload函数中，待页面框架加载并渲染完成后开始执行。
此时页面访问速度明细提升，从最初的5~10秒到现在1秒内加载完成。
网友评论