GitHub第三方登录实现效果如下:
![](https://img.php1.cn/3cd4a/1eebe/cd5/011ac27956d007f0.webp)
实现流程如下:
1.注册一个GitHub账号
2.注册一个授权的网站保存一个你的Client ID和Client Secret
3.准备一个页面,有一个链接跳转到授权的页面https://github.com/login/oauth/authorize?client_id=xx&state=STATE&redirect_uri=xx">GitHub登录
4.准备controller去处理callback回调的请求① 获取到请求参数中的code② 拿到code去发送请求请求token③ 拿到token发送请求请求用户信息④ 将用户信息做持久化处理(放到请求范围中)⑤ 在主页面通过el表单获取到前面取到的用户信息...
OAuth2.0的认证原理
OAUTH协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此OAUTH是安全的。oAuth是Open Authorization的简写,目前的版本是2.0版。 https://oauth.net/2/ ![](https://img.php1.cn/3cd4a/1eebe/cd5/d34245582687a4e6.webp)
GitHub第三方登录的认证授权流程
申请 Client ID 和 ClientSecret
首先到GitHub官网注册账号: https://github.com/
![](https://img.php1.cn/3cd4a/1eebe/cd5/d05d9dfd09a56332.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4,size_16,color_FFFFFF,t_70)
登录:https://github.com/login
![](https://img.php1.cn/3cd4a/1eebe/cd5/bdd1ca32a69bc8b2.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4,size_16,color_FFFFFF,t_70)
登录进去之后点击你的头像,选择Settings
![](https://img.php1.cn/3cd4a/1eebe/cd5/1e3db12dd78db092.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4,size_16,color_FFFFFF,t_70)
选择左下方的Developer settings创建一个应用
![](https://img.php1.cn/3cd4a/1eebe/cd5/70be2ca197098d98.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4,size_16,color_FFFFFF,t_70)
![](https://img.php1.cn/3cd4a/1eebe/cd5/dc7ef30f57b727c7.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4,size_16,color_FFFFFF,t_70)
注册应用之后,可以获取到 Client ID 和 Client Secret
![](https://img.php1.cn/3cd4a/1eebe/cd5/b386c433a16f5497.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4,size_16,color_FFFFFF,t_70)
申请clientID和clientSecret的用途???
clientID:应用的唯一标识。
clientSecret:clientID对应的密钥,访问用户资源时用来验证应用的合法性。
申请地址: https://github.com/settings/developers
注意:对clientID和clientSecret信息进行保密,不要随意泄漏。
GitHub的登录授权实现
第三方登录流程是:先获取code --> 然后获取access_token --> 根据token获取用户信息。
前台页面实现步骤:点击登录按钮 --> 打开一个窗口,进行授权 --> 授权完成,跳转到首页或上次浏览的页面。
前台准备一个页面,有一个链接跳转到GitHub的授权页面
https://github.com/login/oauth/authorize?client_id=xx&state=xx&redirect_uri=xx;
![](https://img.php1.cn/3cd4a/9b0d/ae9/2d998ad7838fbf16.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4,size_16,color_FFFFFF,t_70)
点击跳转到GitHub第三方登录页面
![](https://img.php1.cn/3cd4a/1eebe/cd5/45a090220e38e09d.webp)
![](https://img.php1.cn/3cd4a/1eebe/cd5/1113165c4904ecc5.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4,size_16,color_FFFFFF,t_70)
登录账号进行授权
![](https://img.php1.cn/3cd4a/1eebe/cd5/7d7ef3f69d479716.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4,size_16,color_FFFFFF,t_70)
授权之后就会跳转到自己之前创建应用时设置的回调路径
温馨小提示:如果是本地测试可将回调地址修改成本地路径
![](https://img.php1.cn/3cd4a/1eebe/cd5/e3aa5425383ba10d.png)
![](https://img.php1.cn/3cd4a/1eebe/cd5/8be1ccb5166feb93.webp)
温馨小提示:可在GitHub上 https://github.com/settings/applications 取消授权的应用
![](https://img.php1.cn/3cd4a/1eebe/cd5/fb32005f2115b419.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4,size_16,color_FFFFFF,t_70)
登录就算完成了,那么我们怎么去获取用户信息来实现我们的其他功能呢??比如获取用户账号,头像等信息绑定到自己系统的数据库里面
代码实现 (温馨小提示:这里我将代码都一个文件了,有3个类,需要自己弄出来哦)
package com.zhengqing.web.controller;import com.alibaba.fastjson.JSONObject;
import org.apache.commons.lang.StringUtils;
import org.apache.http.HttpEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;@Controller
public class GitHubCallBackController {//授权成功后的回调,我们需要在这个方法中拿到code去请求token@RequestMapping("/callback")public String callback(String code, String state) throws Exception{//获取到code和stateSystem.out.println("code:"+code);System.out.println("state:"+state);if(!StringUtils.isEmpty(code)&&!StringUtils.isEmpty(state)){//拿到我们的code,去请求token//发送一个请求到String token_url = GitHubConstants.TOKEN_URL.replace("CLIENT_ID", GitHubConstants.CLIENT_ID).replace("CLIENT_SECRET", GitHubConstants.CLIENT_SECRET).replace("CALLBACK", GitHubConstants.CALLBACK).replace("CODE", code);
// System.out.println("用户信息数据"+token_url);//这个里面有我们想要的用户信息数据String responseStr = HttpClientUtils.doGet(token_url);String token = HttpClientUtils.parseResponseEntity(responseStr).get("access_token");//根据token发送请求获取登录人的信息String userinfo_url = GitHubConstants.USER_INFO_URL.replace("TOKEN", token);responseStr = HttpClientUtils.doGet(userinfo_url);//jsonMap responseMap = HttpClientUtils.parseResponseEntityJSON(responseStr);System.out.println("登录用户信息:"+responseMap);//responseMap里面保存着用户登录信息System.out.println("获取登录用户的用户名:"+responseMap.get("login"));}return "main";// TODO 修改成自己需要返回的页面...}
}
//抽取出来的参数【代码拷贝下来只需要修改成自己的CLIENT_ID,Client CLIENT_SECRET,CALLBACK即可】
class GitHubConstants {public static final String CLIENT_ID = "xx"; // TODO 修改成自己的public static final String CLIENT_SECRET = "xx"; // TODO 修改成自己的public static final String CALLBACK = "xx"; // TODO 修改成自己的 [注意:callback要和注册的回调路径保持一致 否则登录授权之后会报NullPointerException]//获取code的urlpublic static final String CODE_URL = "https://github.com/login/oauth/authorize?client_id=CLIENT_ID&state=STATE&redirect_uri=CALLBACK";//获取token的urlpublic static final String TOKEN_URL = "https://github.com/login/oauth/access_token?client_id=CLIENT_ID&client_secret=CLIENT_SECRET&code=CODE&redirect_uri=CALLBACK";//获取用户信息的urlpublic static final String USER_INFO_URL = "https://api.github.com/user?access_token=TOKEN";
}
//工具类
class HttpClientUtils {/*** 使用HttpClient发送一个Get方式的请求* &#64;param url 请求的路径 请求参数拼接到url后面* &#64;return 响应的数据* &#64;throws Exception*/public static String doGet(String url)throws Exception{CloseableHttpClient httpclient &#61; HttpClients.createDefault();HttpGet httpGet &#61; new HttpGet(url);CloseableHttpResponse response &#61; httpclient.execute(httpGet); //发送一个http请求//如果响应成功,解析响应结果if(response.getStatusLine().getStatusCode()&#61;&#61;200){HttpEntity responseEntity &#61; response.getEntity(); //获取响应的内容return EntityUtils.toString(responseEntity);}return null;}// 参数的封装public static Map parseResponseEntity(String responseEntityStr){Map map &#61; new HashMap<>();String[] strs &#61; responseEntityStr.split("\\&");for (String str : strs) {String[] mapStrs &#61; str.split("&#61;");String value &#61; null;String key &#61; mapStrs[0];if(mapStrs.length>1){value &#61; mapStrs[1];}map.put(key, value);}return map;}//json字符串转mappublic static Map parseResponseEntityJSON(String responseEntityStr){Map map &#61; new HashMap<>();JSONObject jsonObject &#61; JSONObject.parseObject(responseEntityStr); //解析json格式的字符串Set> entries &#61; jsonObject.entrySet();for (Map.Entry entry : entries) {String key &#61; entry.getKey();String value &#61; String.valueOf(entry.getValue());map.put(key, value);}return map;}}
maven项目中还需要额外引入如下&#xff0c;其余的就是自己项目的配置&#xff0c;比如上面的代码是springmvc配置通过 &#64;Controller 进行跳转...
org.apache.httpcomponentshttpclient4.5.6com.alibabafastjson1.2.47
可直接拷贝到自己的项目中使用哦&#xff0c;注意修改以下部分哦
![](https://img.php1.cn/3cd4a/1eebe/cd5/7cccb7e4b6cb5cb8.webp)
以及注意这个 responseMap 里面封装了我们想要的用户信息数据哦
![](https://img.php1.cn/3cd4a/1eebe/cd5/5b97d3b808d031e2.webp)
![](https://img.php1.cn/3cd4a/1eebe/cd5/bdd1ca32a69bc8b2.webp)
ex&#xff1a;repos_url里面有很多我们想要的数据
![](https://img.php1.cn/3cd4a/1eebe/cd5/d34245582687a4e6.webp?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4,size_16,color_FFFFFF,t_70)
代码最后运行结果&#xff1a; 可根据自己的需求去拿数据
![](https://img.php1.cn/3cd4a/1eebe/cd5/5b97d3b808d031e2.webp?x-oss-process&#61;image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4,size_16,color_FFFFFF,t_70)