java github 授权登录_vue.js + springboot-网站应用接入GitHub第三方登录

JAVA-网站应用接入GitHub第三方登录

相对 网站应用接入 QQ 登录，简单很多，Github 直接创建应用就可以用，不需要长时间的审核

(一)准备，创建应用

(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 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 = "

\n" +

" \n" +

"" +

"

\n" +

"

登录中....

\n" +

"" +

"\n" +

" window.onload.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 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实现可以参考