SpringBoot+Vue实现第三方GitHub登录(二)
1. 准备工作_OAuth2（官网地址：开发流程）
1.1 授权应用程序用户的 web 应用程序流程是
1. 用户被重定向，以请求他们的 GitHub 身份
2. 用户被 GitHub 重定向回您的站点
3. 您的应用程序使用用户的访问令牌访问 API
1.2 OAuth2 认证基本流程
2. 放置“GitHub登录”按钮
本步骤的作用：
在网站页面上放置“GitHub登录”按钮，并为按钮添加前台代码，实现点击按钮即弹出GitHub登录对话框 。
2.1 下载“GitHub登录”按钮图片，并将按钮放置在页面合适的位置
可以到阿里矢量图库下载更多图标：阿里巴巴矢量图标库 。
2.2 把“GitHub登录”按钮添加到页面
2.2.1 效果演示
2.2.2 前端代码(Vue)
为了实现上述效果，应该为“GitHub登录”按钮图片添加如下前台代码：
<div style="line-height: 22px;margin:0 0 8px 0;color: #9b9b9b;">
<span style="vertical-align:middle">第三方登录:</span>
<img :src="qqIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="QQ">
<img :src="baiduIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="百度">
<img :src="weiboIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="微博">
<img :src="zhifubaoIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="支付宝">
<img :src="giteeIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="Gitee">
<img :src="githubIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="GitHub">
</div>2.2.2 后端代码(Java)
1. GitHub登录配置文件信息：
# GitHub登录配置
github.appID = 26666666666666662（替换自己的）
github.appKEY = 666666666666666666666666666664（替换自己的）
github.redirectURI = https://www.youyoushop.work/gitHubCallback（替换自己的）
github.authorizeURL = https://github.com/login/oauth/authorize
github.accessToken = https://github.com/login/oauth/access_token
github.userInfo = https://api.github.com/user2. 读取配置文件信息常量类：
package com.liyh.constants;
import lombok.Data;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
/**
* GitHub登陆常量配置类
*
* @author Liyh
*/
@Data
@Configuration
@PropertySource("classpath:config.properties")
public class GitHubConstants {
@Value("${github.appID}")
private String appID;
@Value("${github.appKEY}")
private String appKEY;
@Value("${github.redirectURI}")
private String redirectURI;
@Value("${github.authorizeURL}")
private String authorizeURL;
@Value("${github.accessToken}")
private String accessToken;
@Value("${github.userInfo}")
private String userInfo;
}3. Conteoller（获取Gitee登录的url）
/**
* 获得跳转到GitHub登录页的url,前台直接a连接访问
*
* @return
* @throws Exception
*/
@GetMapping("/getGitHubCode")
public Result getGitHubCode() {
// 授权地址 ,进行Encode转码
String authorizeURL = gitHubConstants.getAuthorizeURL();
// 回调地址 ,回调地址要进行Encode转码
String redirectUri = gitHubConstants.getRedirectURI();
//用于第三方应用防止CSRF攻击
String uuid = UUID.randomUUID().toString().replaceAll("-", "");
// https://github.com/login/oauth/authorize
// ?client_id=appid
// &redirect_uri=redirectUri
// &state=afasd
// 拼接url
StringBuilder url = new StringBuilder();
url.append(authorizeURL);
url.append("?client_id=" + gitHubConstants.getAppID());
// 转码
url.append("&redirect_uri=" + URLEncodeUtil.getURLEncoderString(redirectUri));
url.append("&state=" + uuid);
return Result.success("操作成功", url);
}3. 获取AccessToken
3.1 获取Authorization Code
请求地址：
https://github.com/login/oauth/authorize请求方法：
GET
请求参数：
| 名称 | 类型 | 是否必填 | 说明 |
|---|---|---|---|
client_id |
string |
是 | “必需”。 注册时从 GitHub 收到的客户端 ID。 |
redirect_uri |
string |
是 | 用户获得授权后被发送到的应用程序中的 URL。 请参阅以下有关重定向 URL 的详细信息。 |
state |
string |
是 | 不可猜测的随机字符串。 它用于防止跨站请求伪造攻击。 |
返回说明：
1. 如果用户成功登录并授权，则会跳转到指定的回调地址，并在redirect_uri地址后带上Authorization Code和原始的state值。如：
https://www.youyoushop.work/gitHubCallback?code=1E8312312324D9B3C&state=cca3c1512312312323fe2. 如果用户在登录授权过程中取消登录流程，对于PC网站，登录页面直接关闭。
3.2 通过Authorization Code获取Access Token
如果用户接受你的请求，GitHub 会使用代码参数中的临时 code 以及你在上一步的 state 参数中提供的状态重定向回你的站点。
临时代码将在 10 分钟后到期。 如果状态不匹配，然后第三方创建了请求，您应该中止此过程。
请求地址：
POST https://github.com/login/oauth/access_token请求方法：
POST
请求参数：
| 名称 | 类型 | 是否必填 | 说明 |
|---|---|---|---|
client_id |
string |
是 | 从 GitHub 收到的 OAuth App 的客户端 ID。 |
client_secret |
string |
是 | 从 GitHub 收到的 OAuth App 的客户端码。 |
code |
string |
是 | 收到的作为对步骤 1 的响应的代码。 |
redirect_uri |
string |
否 | 用户获得授权后被发送到的应用程序中URL。 |
返回说明：
如果成功返回，即可在返回包中获取到Access Token。
access_token=gho_16C7e42F292c6912E7710c838347Ae178B4a&scope=repo%2Cgist&token_type=bearer故障排除
1.“排查授权请求错误”
2. “排查 OAuth 应用访问令牌请求错误”
3. “设备流错误”
4. “令牌过期和吊销”
4. 获取用户信息
请求地址：
https://api.github.com/user?access_token=xxx请求方法：
GET
请求参数：
| 参数 | 是否必须 |
含义 |
|---|---|---|
| access_token | 必须 | 在Step1中获取到的access token。 |
5. 测试网站（地址），需要的小伙伴可以测试
5.1 每个人做的项目需求不同，可能会出现不同的问题，文章仅供参考
5.2 SpringBoot+Vue实现第三方GitHub登录(一)
5.3 其他第三方登录方式：第三方登录汇总
6. 源码购买
6.1 简洁版源码（淘宝店铺：爱创客网络）
只包含登录，第三方登录，跳转首页（没有菜单！），技术框架：SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUI等
6.2 完整版本源码（淘宝店铺：爱创客网络）
测试地址(测试地址是完整版的)：www.youyoushop.work
包含登录，注册，第三方登录，完整的系统管理模块，系统工具模块，系统监控模块，系统日志模块，个人中心等，技术框架：SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUI等
