老大问新来的妹纸：接入 GitHub、QQ 第三方登录真有那么难吗？

沙海
沙海
沙海
3180
文章
2
评论
2021年4月19日04:10:33Java评论33字数 7362阅读24分32秒阅读模式
摘要

老大问新来的妹纸：接入 GitHub、QQ 第三方登录真有那么难吗？ 程序IT圈

老大问新来的妹纸：接入 GitHub、QQ 第三方登录真有那么难吗？

程序IT圈 文章源自JAVA秀-https://www.javaxiu.com/18423.html

作者: Jitwxs文章源自JAVA秀-https://www.javaxiu.com/18423.html

来源: https://jitwxs.cn/33ad9e35.html文章源自JAVA秀-https://www.javaxiu.com/18423.html

文章源自JAVA秀-https://www.javaxiu.com/18423.html

本文提及第三方登录涉及到 OAuth2.0，关于 OAuth2.0 的理论基础参考阮一峰老师的《理解 OAuth 2.0》，其中关于授权码模式就是本篇文章的重点，如想看这篇理论基础自行百度即可。文章源自JAVA秀-https://www.javaxiu.com/18423.html

本文着重于代码，关于理论不再赘述，关于不同公司的三方登录流程，只要遵循 OAuth2.0 规范，都大同小异。本文介绍 GitHub 和 QQ 两种，因为这两种无需审核，即可食用。文章源自JAVA秀-https://www.javaxiu.com/18423.html

# GitHub 登录

文章源自JAVA秀-https://www.javaxiu.com/18423.html

1、 注册应用

文章源自JAVA秀-https://www.javaxiu.com/18423.html

进入 Github 的 Setting 页面，点击 Developer settings，如图所示：文章源自JAVA秀-https://www.javaxiu.com/18423.html

老大问新来的妹纸：接入 GitHub、QQ 第三方登录真有那么难吗？文章源自JAVA秀-https://www.javaxiu.com/18423.html

进入后点击 New Oauth App，如图所示：文章源自JAVA秀-https://www.javaxiu.com/18423.html

老大问新来的妹纸：接入 GitHub、QQ 第三方登录真有那么难吗？文章源自JAVA秀-https://www.javaxiu.com/18423.html

在其中填写主页 URL 和 回调 URL，回调 URL 尤为重要，如果不太明白可以先和我一致。文章源自JAVA秀-https://www.javaxiu.com/18423.html

老大问新来的妹纸：接入 GitHub、QQ 第三方登录真有那么难吗？文章源自JAVA秀-https://www.javaxiu.com/18423.html

点击注册后，上方会生成 Client ID 和 Client Secret，这两个后面要用到。文章源自JAVA秀-https://www.javaxiu.com/18423.html

老大问新来的妹纸：接入 GitHub、QQ 第三方登录真有那么难吗？文章源自JAVA秀-https://www.javaxiu.com/18423.html

2 、HTML 页面文章源自JAVA秀-https://www.javaxiu.com/18423.html

页面十分简单，只有两个跳转链接：文章源自JAVA秀-https://www.javaxiu.com/18423.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三方登录</title></head><body> <h1>三方登录Demo</h1> <div> <a href="/githubLogin">GitHub登录</a> <a href="/qqLogin">QQ登录</a> </div></body></html>
文章源自JAVA秀-https://www.javaxiu.com/18423.html

文章源自JAVA秀-https://www.javaxiu.com/18423.html

3 、Github 登录方法

文章源自JAVA秀-https://www.javaxiu.com/18423.html

在这个方法中，我们需要访问 GitHub 的认证服务器，使用 Get 请求，这里使用重定向来实现。文章源自JAVA秀-https://www.javaxiu.com/18423.html

遵循 Oauth 2.0 规范，需要携带以下参数：文章源自JAVA秀-https://www.javaxiu.com/18423.html

  • response_type ：对于授权码模式，该值固定为 code文章源自JAVA秀-https://www.javaxiu.com/18423.html

  • client_id ：注册应用时的 Client ID文章源自JAVA秀-https://www.javaxiu.com/18423.html

  • state ：回调时会原样返回文章源自JAVA秀-https://www.javaxiu.com/18423.html

  • redirect_uri : 回调 URL，注册应用时填写的文章源自JAVA秀-https://www.javaxiu.com/18423.html

这里的 state 参数我要额外说明下，因为该参数会在后面的回调 URL 中被原样携带回来，绝大多数的开发者会忽略该字段，阮一峰老师的文章也没有着重提及这一点。但是忽略该参数是会导致 CSRF攻击的，在回调函数中应当对该字段进行校验！文章源自JAVA秀-https://www.javaxiu.com/18423.html

关于如何校验，我一开始的想法是使用 session 来存储 state 进行校验的，但是我发现使用重定向后 session 不是同一个 session，方案一失败。文章源自JAVA秀-https://www.javaxiu.com/18423.html

然后我想通过 ajax 请求，在页面中使用 window.location.href 方法跳转到认证服务器，使用 session 存储，但是很不幸这样也不是同一个 session，方案二失败。文章源自JAVA秀-https://www.javaxiu.com/18423.html

最后我的解决办法是使用 redis 缓存，使用 set 存储，回调时判断是否存在。当然你也可以用 HashMap 来存储，这也是一个解决办法。文章源自JAVA秀-https://www.javaxiu.com/18423.html

关于 Redis，可以参考：https://jitwxs.cn/e331e26a.html文章源自JAVA秀-https://www.javaxiu.com/18423.html

private static String GITHUB_CLIENT_ID = "0307dc634e4c5523cef2";private static String GITHUB_CLIENT_SECRET = "707647176eb3bef1d4c2a50fcabf73e0401cc877";private static String GITHUB_REDIRECT_URL = "http://127.0.0.1:8080/githubCallback";@RequestMapping("/githubLogin")public void githubLogin(HttpServletResponse response) throws Exception { // Github认证服务器地址 String url = "https://github.com/login/oauth/authorize"; // 生成并保存state，忽略该参数有可能导致CSRF攻击 String state = oauthService.genState(); // 传递参数response_type、client_id、state、redirect_uri String param = "response_type=code&" + "client_id=" + GITHUB_CLIENT_ID + "&state=" + state + "&redirect_uri=" + GITHUB_REDIRECT_URL; // 1、请求Github认证服务器 response.sendRedirect(url + "?" + param);}
文章源自JAVA秀-https://www.javaxiu.com/18423.html

文章源自JAVA秀-https://www.javaxiu.com/18423.html

4、 Github 回调方法

文章源自JAVA秀-https://www.javaxiu.com/18423.html

在上一步中，浏览器会被跳转到 Github 的授权页，当用户登录并点击确认后，GitHub认证服务器会跳转到我们填写的回调URL中，我们在程序中处理回调。文章源自JAVA秀-https://www.javaxiu.com/18423.html

在回调方法中，步骤如下：文章源自JAVA秀-https://www.javaxiu.com/18423.html

1. 首先验证 state 与发送时是否一致，如果不一致，可能遭遇了 CSRF 攻击。文章源自JAVA秀-https://www.javaxiu.com/18423.html

2. 得到 code，向 GitHub 认证服务器申请令牌(token)文章源自JAVA秀-https://www.javaxiu.com/18423.html

  这一步使用模拟的 POST 请求，携带参数包括：文章源自JAVA秀-https://www.javaxiu.com/18423.html

  • grant_type ：授权码模式固定为 authorization_code文章源自JAVA秀-https://www.javaxiu.com/18423.html

  • code ：上一步中得到的 code文章源自JAVA秀-https://www.javaxiu.com/18423.html

  • redirect_uri ：回调URL文章源自JAVA秀-https://www.javaxiu.com/18423.html

  • client_id ：注册应用时的Client ID文章源自JAVA秀-https://www.javaxiu.com/18423.html

  • client_secret ：注册应用时的Client Secret文章源自JAVA秀-https://www.javaxiu.com/18423.html

3. 得到令牌（access_token）和令牌类型（token_type），向GitHub资源服务器获取资源（以 user_info 为例）文章源自JAVA秀-https://www.javaxiu.com/18423.html

这一步使用模拟的 GET 请求，携带参数包括：文章源自JAVA秀-https://www.javaxiu.com/18423.html

  • access_token ：令牌文章源自JAVA秀-https://www.javaxiu.com/18423.html

  • token_type ：令牌类型文章源自JAVA秀-https://www.javaxiu.com/18423.html

4. 输出结果文章源自JAVA秀-https://www.javaxiu.com/18423.html

/** * GitHub回调方法 * @param code 授权码 * @param state 应与发送时一致 * @author jitwxs * @since 2018/5/21 15:24 */@RequestMapping("/githubCallback")public void githubCallback(String code, String state, HttpServletResponse response) throws Exception { // 验证state，如果不一致，可能被CSRF攻击 if(!oauthService.checkState(state)) { throw new Exception("State验证失败"); } // 2、向GitHub认证服务器申请令牌 String url = "https://github.com/login/oauth/access_token"; // 传递参数grant_type、code、redirect_uri、client_id String param = "grant_type=authorization_code&code=" + code + "&redirect_uri=" + GITHUB_REDIRECT_URL + "&client_id=" + GITHUB_CLIENT_ID + "&client_secret=" + GITHUB_CLIENT_SECRET; // 申请令牌，注意此处为post请求 String result = HttpClientUtils.sendPostRequest(url, param); /* * result示例： * 失败：error=incorrect_client_credentials&error_description=The+client_id+and%2For+client_secret+passed+are+incorrect.& * error_uri=https%3A%2F%2Fdeveloper.github.com%2Fapps%2Fmanaging-oauth-apps%2Ftroubleshooting-oauth-app-access-token-request-errors%2F%23incorrect-client-credentials * 成功：access_token=7c76186067e20d6309654c2bcc1545e41bac9c61&scope=&token_type=bearer */ Map<String, String> resultMap = HttpClientUtils.params2Map(result); // 如果返回的map中包含error，表示失败，错误原因存储在error_description if(resultMap.containsKey("error")) { throw new Exception(resultMap.get("error_description")); } // 如果返回结果中包含access_token，表示成功 if(!resultMap.containsKey("access_token")) { throw new Exception("获取token失败"); } // 得到token和token_type String accessToken = resultMap.get("access_token"); String tokenType = resultMap.get("token_type"); // 3、向资源服务器请求用户信息，携带access_token和tokenType String userUrl = "https://api.github.com/user"; String userParam = "access_token=" + accessToken + "&token_type=" + tokenType; // 申请资源 String userResult = HttpClientUtils.sendGetRequest(userUrl, userParam); // 4、输出用户信息 response.setContentType("text/html;charset=utf-8"); response.getWriter().write(userResult);}
文章源自JAVA秀-https://www.javaxiu.com/18423.html

文章源自JAVA秀-https://www.javaxiu.com/18423.html

# QQ 登录文章源自JAVA秀-https://www.javaxiu.com/18423.html

1、 注册应用

文章源自JAVA秀-https://www.javaxiu.com/18423.html

进入 QQ 互联管理中心：https://connect.qq.com/manage.html，创建一个新应用（需要先审核个人身份）：文章源自JAVA秀-https://www.javaxiu.com/18423.html

老大问新来的妹纸：接入 GitHub、QQ 第三方登录真有那么难吗？文章源自JAVA秀-https://www.javaxiu.com/18423.html

然后注册应用信息，和 GitHub 的步骤大差不差：文章源自JAVA秀-https://www.javaxiu.com/18423.html

老大问新来的妹纸：接入 GitHub、QQ 第三方登录真有那么难吗？文章源自JAVA秀-https://www.javaxiu.com/18423.html

老大问新来的妹纸：接入 GitHub、QQ 第三方登录真有那么难吗？文章源自JAVA秀-https://www.javaxiu.com/18423.html

注册后，可以看到应用的 APP ID、APP Key，以及你被允许的接口，当然只有一个获取用户信息。文章源自JAVA秀-https://www.javaxiu.com/18423.html

官方开发文档点击这里：文章源自JAVA秀-https://www.javaxiu.com/18423.html

http://wiki.connect.qq.com/%E5%BC%80%E5%8F%91%E6%94%BB%E7%95%A5_server-side文章源自JAVA秀-https://www.javaxiu.com/18423.html

注意：审核状态为审核中和审核失败也是可以使用的，不用担心（只是无法实际上线而已，作为 Demo 足够了）。文章源自JAVA秀-https://www.javaxiu.com/18423.html

老大问新来的妹纸：接入 GitHub、QQ 第三方登录真有那么难吗？文章源自JAVA秀-https://www.javaxiu.com/18423.html

2、 QQ 登录方法文章源自JAVA秀-https://www.javaxiu.com/18423.html

privatestaticString QQ_APP_ID = "101474821";privatestaticString QQ_APP_KEY = "00d91cc7f636d71faac8629d559f9fee";privatestaticString QQ_REDIRECT_URL = "http://127.0.0.1:8080/qqCallback";@RequestMapping("/qqLogin")publicvoid qqLogin(HttpServletResponse response) throws Exception {// QQ认证服务器地址String url = "https://graph.qq.com/oauth2.0/authorize";// 生成并保存state，忽略该参数有可能导致CSRF攻击String state = oauthService.genState();// 传递参数response_type、client_id、state、redirect_uriString param = "response_type=code&" + "client_id=" + QQ_APP_ID + "&state=" + state + "&redirect_uri=" + QQ_REDIRECT_URL;// 1、请求QQ认证服务器 response.sendRedirect(url + "?" + param);}
文章源自JAVA秀-https://www.javaxiu.com/18423.html

3、 QQ 回调方法

文章源自JAVA秀-https://www.javaxiu.com/18423.html

/** * QQ回调方法 * @param code 授权码 * @param state 应与发送时一致 * @author jitwxs * @since 2018/5/21 15:24 */@RequestMapping("/qqCallback")public void qqCallback(String code, String state, HttpServletResponse response) throws Exception {// 验证state，如果不一致，可能被CSRF攻击if(!oauthService.checkState(state)) {thrownew Exception("State验证失败"); }// 2、向QQ认证服务器申请令牌String url = "https://graph.qq.com/oauth2.0/token";// 传递参数grant_type、code、redirect_uri、client_idString param = "grant_type=authorization_code&code=" + code + "&redirect_uri=" + QQ_REDIRECT_URL + "&client_id=" + QQ_APP_ID + "&client_secret=" + QQ_APP_KEY;// 申请令牌，注意此处为post请求// QQ获取到的access token具有3个月有效期，用户再次登录时自动刷新。String result = HttpClientUtils.sendPostRequest(url, param);/* * result示例： * 成功：access_token=A24B37194E89A0DDF8DDFA7EF8D3E4F8&expires_in=7776000&refresh_token=BD36DADB0FE7B910B4C8BBE1A41F6783 */Map<String, String> resultMap = HttpClientUtils.params2Map(result);// 如果返回结果中包含access_token，表示成功if(!resultMap.containsKey("access_token")) {thrownew Exception("获取token失败"); }// 得到tokenString accessToken = resultMap.get("access_token");// 3、使用Access Token来获取用户的OpenIDString meUrl = "https://graph.qq.com/oauth2.0/me";String meParams = "access_token=" + accessToken;String meResult = HttpClientUtils.sendGetRequest(meUrl, meParams);// 成功返回如下：callback( {"client_id":"YOUR_APPID","openid":"YOUR_OPENID"} );// 取出openidString openid = getQQOpenid(meResult);// 4、使用Access Token以及OpenID来访问和修改用户数据String userInfoUrl = "https://graph.qq.com/user/get_user_info";String userInfoParam = "access_token=" + accessToken + "&oauth_consumer_key=" + QQ_APP_ID + "&openid=" + openid;String userInfo = HttpClientUtils.sendGetRequest(userInfoUrl, userInfoParam);// 5、输出用户信息 response.setContentType("text/html;charset=utf-8"); response.getWriter().write(userInfo);}/** * 提取Openid * @param str 形如：callback( {"client_id":"YOUR_APPID","openid":"YOUR_OPENID"} ); * @author jitwxs * @since 2018/5/22 21:37 */private String getQQOpenid(String str) {// 获取花括号内串String json = str.substring(str.indexOf("{"), str.indexOf("}") + 1);// 转为MapMap<String, String> map = JsonUtils.jsonToPojo(json, Map.class);return map.get("openid");}
文章源自JAVA秀-https://www.javaxiu.com/18423.html

# 项目源码

文章源自JAVA秀-https://www.javaxiu.com/18423.html

QQ 登录的具体流程我就不啰嗦了，都差不多。代码只列出了关键方法，具体程序还包含工具类和 redis 的配置。具体请参考文章开头源码，该项目采用 SpringBoot 搭建，需要 Redis 支持。文章源自JAVA秀-https://www.javaxiu.com/18423.html

文章源自JAVA秀-https://www.javaxiu.com/18423.html

················· END ·················长按进入小程序，进行打卡签到新一期打卡签到，奖品超多（更多精彩值得期待……）
文章源自JAVA秀-https://www.javaxiu.com/18423.html

老大问新来的妹纸：接入 GitHub、QQ 第三方登录真有那么难吗？

最近热文：一周内被程序员疯转5.6W次，最终被大厂封杀！卧槽，当当又在搞事情！阿里云盘PC端内测版终于来了！IntelliJ IDEA 2021.1正式发布！LeetCode1-220题汇总，希望对你有点帮助！

2T技术资源大放送！包括但不限于：C/C++，Linux，Python，Java，人工智能，考研，软考，英语，等等。在公众号内回复「资源」，即可免费获取！回复「社群」，可以邀请你加入读者群！文章源自JAVA秀-https://www.javaxiu.com/18423.html

老大问新来的妹纸：接入 GitHub、QQ 第三方登录真有那么难吗？文章源自JAVA秀-https://www.javaxiu.com/18423.html

❤️给个「在看」，是对我最大的支持❤️
文章源自JAVA秀-https://www.javaxiu.com/18423.html

文章源自JAVA秀-https://www.javaxiu.com/18423.html
继续阅读
历史上的今天
4月
19
速蛙云 - 极致体验，强烈推荐！！！购买套餐就免费送各大视频网站会员！快速稳定、独家福利社、流媒体稳定解锁！速度快，全球上网、视频、游戏加速、独立IP均支持！基础套餐性价比很高！这里不多说，我一直正在使用，推荐购买：https://www.javaxiu.com/59919.html
weinxin
资源分享QQ群
本站是JAVA秀团队的技术分享社区, 会经常分享资源和教程; 分享的时代, 请别再沉默！
沙海
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定