問題匯總
1、釘釘免登時(shí)，要通過dingtalk.js獲取一個(gè)只能使用一次的code溯警，用次code在服務(wù)端獲取用戶userid盖淡；若需要實(shí)現(xiàn)自動登錄年柠，就不能用傳統(tǒng)的用戶名密碼登錄。
2褪迟、登錄過程中需要從后端獲取 accesstoken冗恨、jsticket、用戶userid味赃，用userid獲取userinfo掀抹，當(dāng)accesstoken和jsticket都過期時(shí)（7200秒），四個(gè)參數(shù)皆需要通過網(wǎng)絡(luò)獲取心俗，耗時(shí)較長傲武。
3、需要使用spring security保護(hù)RESTApi城榛，防止匿名訪問揪利。
4、spring security默認(rèn)表單登錄模式狠持，用ajax 增加復(fù)雜度土童。
解決方案
解決思路：
1、前端獲取到code時(shí)工坊，用corpid作為username献汗，code作為password敢订，重寫userDetail，用code能獲取到userid時(shí)罢吃，表明code有效楚午，并用詞userid創(chuàng)建新用戶，corpid作為密碼尿招，添加User權(quán)限并返回矾柜；
2、accesstoken和jsticket使用獨(dú)立的程序定時(shí)獲取就谜，登錄時(shí)只從數(shù)據(jù)庫取出使用怪蔑，不從網(wǎng)絡(luò)獲取以減少時(shí)間；前端加入loading動畫以提升用戶體驗(yàn)丧荐；開啟remeber-me功能缆瓣，減少登錄。
3虹统、配置springSecurity即可弓坞，同時(shí)將登錄事件放置與dd.ready中，防止在釘釘之外的瀏覽器打開訪問车荔。
4渡冻、創(chuàng)建form，并使用jQuery填充用戶名及密碼忧便，使用jQuery模擬click登錄族吻。安全性方面，由于corpid公開無妨珠增，code使用次數(shù)僅有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();
}
//重寫登錄驗(yàn)證
@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();
}
}
登錄驗(yàn)證方法：重寫 loadUserByUsername即可
@Service
public class DingtalkUserService implements UserDetailsService {
@Autowired
private AuthService authService;
/**
* 使用前臺傳來的 免登code,從后端獲取userId辐董，從error_code=0判斷code是否有效,corpId作為密碼悴品，并添加ROLE_USER權(quán)限
* 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">
點(diǎn)擊用釘釘?shù)卿? </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>
需要通過網(wǎng)絡(luò)獲取的參數(shù)諸如accessToken jsTicket Userid等，可參考 http://open.dingtalk.com/
后續(xù)需要解決的問題：
1简烘、登錄速度需要進(jìn)一步優(yōu)化
2苔严、remember-me開啟后，需要在頁面內(nèi)提供可供退出登錄的連接
3孤澎、加密傳出數(shù)據(jù)届氢，啟用https
4、可以看到 crsf處于disable狀態(tài)覆旭，需開啟
繞過的問題
使用 ajax方式登錄時(shí)退子，可以從控制臺看出已經(jīng)登錄岖妄，并返回了需要打開的文檔，但未能跳轉(zhuǎn)頁面寂祥，不明原因荐虐。
2018年8月10日補(bǔ)充更新：
解決了登錄緩慢的問題
原先登錄速度方面，由于使用了spring security丸凭，當(dāng)webApp中請求過多時(shí)福扬，造成認(rèn)證授權(quán)的內(nèi)容過多，容易發(fā)生阻塞：
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/*'
在請求靜態(tài)資源時(shí)惜犀，也會做驗(yàn)證铛碑，雖然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"
);
}
總是在某些請求是卡住五六秒，導(dǎo)致從登陸頁面跳轉(zhuǎn)至應(yīng)用首頁時(shí)發(fā)生白屏現(xiàn)象虽界。
解決辦法是汽烦，盡量減少請求的次數(shù)：
1、合并css浓恳、js文件
2刹缝、開源框架使用cdn 國內(nèi)推薦使用：https://www.bootcdn.cn
3、頁面中的ajax請求放到頁面底部 window.onload函數(shù)中颈将，待頁面框架加載并渲染完成后開始執(zhí)行梢夯。
此時(shí)頁面訪問速度明細(xì)提升，從最初的5~10秒到現(xiàn)在1秒內(nèi)加載完成晴圾。
