JAVA-网站应用接入GitHub第三方登录 相对 网站应用接入 QQ 登录，简单很多，Github 直接创建应用就可以用，不需要长时间的审核
GitHub 开发者官方文档：https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/
（一）准备，创建应用
（1）开打开发者（不需要审核）
访问：https://github.com/settings/profile
（2）创建应用
（3）填写信息
（三）后台处理流程 （1）前端请求登录，无参数 （2）后端重定向到
地址：https://github.com/login/oauth/authorize 参数：client_id=（AppID） redirect_uri=（回调地址） state=（原样返回）
返回时
code=（授权码） state=（原样返回）
（3） 返回回调地址，通过 Authorization Code 获取 AccessToken
请求地址：https://github.com/login/oauth/access_token 参数：client_id=（AppId） client_secret=（密钥） code=（回调地址携带的 code） redirect_uri=（回调地址，和上面回调地址一样）
返回时
access_token=（访问授权码） token_type=bearer（固定）
（4）通过 access_token 获取用户信息
请求地址：https://api.github.com/user 参数：access_token（返回的访问授权码）
前端vue处理：
先需要使用
window.open打开窗口export function openWindow(url, title, w, h) { // Fixes dual-screen position Most browsers Firefox const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height const left = ((width / 2) - (w / 2)) + dualScreenLeft const top = ((height / 2) - (h / 2)) + dualScreenTop const newWindow = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left) // Puts focus on the newWindow if (window.focus) { newWindow.focus() } }然后拿到后面返回的数据，去请求登录
loginGithub () {
// 获取请求的地址 https://github.com/login/oauth/authorize？client_id=xxx
this.$store.dispatch("xxx").then(res => {
openWindow(res.model.authorizeUrl,"github",540,540)
window.addEventListener('message', this.loginGithubHandler, false);
})
},
loginGithubHandler(e) {
let { socialId } = e.data;
if (socialId) {
this.$store.dispatch("xxxx", e.data).then(res =>{
window.removeEventListener('message',this.loginGithubHandler,false)
})
}
}后端java处理：
@Override
public String saveUserByGithub(String code, String state) {
log.debug("code {},state {}", code, state);
GithubOauth githubOauth = new GithubOauth();
String accessToken = githubOauth.getAccessToken(code);
Map<String, Object> objectObjectMap = JsonUtil.parseHashMap(accessToken);
String userInfo = githubOauth.getUserInfo((String) objectObjectMap.get("access_token"));
GithubVO githubVO = JsonUtil.parseObject(userInfo, GithubVO.class);
// 初始化用户
if (usersOpenOauth == null) {
......
}
result.put("socialId", githubVO.getId());
// vue前端获取这个数据，去登录。
String html = "<head>\n" +
" <meta charset=\"UTF-8\">\n" +
"</head>" +
"<body>\n" +
" <p style=\"text-align: center;\"><h3>登录中....</h3></p>\n" +
"</body>" +
"\n" +
" window. function () {\n" +
" var message =" + JsonUtil.toJsonString(result) + ";\n" +
" window.opener.parent.postMessage(message, '*');\n" +
" parent.window.close();\n" +
" }\n" +
"\n";
return html;
}
private static final String AUTH_URL = "https://github.com/login/oauth/authorize";
private static final String TOKEN_URL = "https://github.com/login/oauth/access_token";
private static final String USER_INFO_URL = "https://api.github.com/user";
public String getAccessToken(String code) {
Map<String, Object> params = new HashMap<>();
params.put("code", code);
params.put("client_id", getClientId());
params.put("client_secret", getClientSecret());
HttpRequest post = HttpRequest.post(TOKEN_URL);
post.body(JsonUtil.toJsonString(params)).contentType("application/json").header(Header.ACCEPT, "application/json");
String result = post.execute().body();
log.debug("github -> getAccessToken -> result -> {}", result);
return result;
}这样基本就可以了。
vue实现可以参考
https://github.com/byteblogs168/theme-default/blob/1.x/src/components/Login.vue
