vue.js + springboot-网站应用接入GitHub第三方登录

news/2024/5/17 23:28:56/文章来源:https://blog.csdn.net/qq_43599835/article/details/102371555

转载 https://www.byteblogs.com/article/162

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       Firefoxconst dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.leftconst dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.topconst width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.widthconst height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.heightconst left = ((width / 2) - (w / 2)) + dualScreenLeftconst top = ((height / 2) - (h / 2)) + dualScreenTopconst 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 newWindowif (window.focus) {newWindow.focus()}
}

然后拿到后面返回的数据，去请求登录

    loginGithub () {// 获取请求的地址  https://github.com/login/oauth/authorize？client_id=xxxthis.$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处理：

 @Overridepublic 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;}