SpringBoot+Vue实现第三方Gitee登录(二)

秋叶萧萧 發表於 2022-12-12 17:09:00

SpringBoot+Vue实现第三方Gitee登录(二)

<h2>1. 准备工作_OAuth2（官网地址：开发流程）</h2>
<h3>1.1 API 使用条款</h3>
 1. OSCHINA 用户是资源的拥有者，需尊重和保护用户的权益。
 2. 不能在应用中使用 OSCHINA 的名称。
 3. 未经用户允许，不准爬取或存储用户的资源。
 4. 禁止滥用 API，请求频率过快将导致请求终止。
<h3>1.2 OAuth2 认证基本流程</h3>
<img src="https://img2023.cnblogs.com/blog/2107107/202212/2107107-20221212163617485-1946199967.png">
1. 通过申请的应用ID–Client ID、回调地址等向 Gitee 服务器发起授权的请求
2. Gitee 认证服务器通过回调地址{redirect_uri}将用户授权码 code 传递回来【传递到回调地址】
3. 通过用户授权码 code 及应用ID等信息，再去 Gitee 服务器中获取用户的访问令牌（Access Token）
4. 获取Access Token之后，根据这个token再去 Gitee 服务器中获取用户的 ID、name、email等信息
<h2>2. 放置“Gitee登录”按钮</h2>
本步骤的作用：
　　在网站页面上放置“Gitee登录”按钮，并为按钮添加前台代码，实现点击按钮即弹出Gitee登录对话框。
<h3>2.1 下载“Gitee登录”按钮图片，并将按钮放置在页面合适的位置</h3>
　　可以到阿里矢量图库下载更多图标：阿里巴巴矢量图标库 。
<h3>2.2 把“Gitee登录”按钮添加到页面</h3>
<h4>2.2.1 效果演示</h4>
<img src="https://img2023.cnblogs.com/blog/2107107/202302/2107107-20230209145243419-830027232.png">
<h4>2.2.2 前端代码(Vue)</h4>
　　为了实现上述效果，应该为“Gitee登录”按钮图片添加如下前台代码：
<pre class="language-html highlighter-hljs"><code><div style="line-height: 22px;margin:0 0 8px 0;color: #9b9b9b;">
 第三方登录:
 <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></code></pre>
<h4>2.2.2 后端代码(Java)</h4>
1. Gitee登录配置文件信息：
<pre class="language-yaml highlighter-hljs"><code># gitee登录配置
gitee.appID = 679f486666666666666660b0022d43b2(替换自己的)
gitee.appKEY = c37e5666666666666666666666666666666618be(替换自己的)
gitee.redirectURI = https://www.youyoushop.work/giteeCallback(替换自己的)
gitee.authorizeURL = https://gitee.com/oauth/authorize
gitee.accessToken = https://gitee.com/oauth/token
gitee.userInfo = https://gitee.com/api/v5/user</code></pre>
2. 读取配置文件信息常量类：
<pre class="language-java highlighter-hljs"><code>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;

/**
* gitee登陆常量配置类
*
* @author Liyh
*/
@Data
@Configuration
@PropertySource("classpath:config.properties")
public class GiteeConstants {

@Value("${gitee.appID}")
private String appID;

@Value("${gitee.appKEY}")
private String appKEY;

@Value("${gitee.redirectURI}")
private String redirectURI;

@Value("${gitee.authorizeURL}")
private String authorizeURL;

@Value("${gitee.accessToken}")
private String accessToken;

@Value("${gitee.userInfo}")
private String userInfo;

}</code></pre>
3. Conteoller（获取Gitee登录的url）
<pre class="language-java highlighter-hljs"><code>/**
* 获得跳转到Gitee登录页的url,前台直接a连接访问
*
* @return
*/
@GetMapping("/getGiteeCode")
public Result getGiteeCode() {
 // 授权地址 ,进行Encode转码
 String authorizeURL = giteeConstants.getAuthorizeURL();

 // 回调地址 ,回调地址要进行Encode转码
 String redirectUri = giteeConstants.getRedirectURI();

 // 用于第三方应用防止CSRF攻击
 String uuid = UUID.randomUUID().toString().replaceAll("-", "");

 // 拼接url
 StringBuilder url = new StringBuilder();
 url.append(authorizeURL);
 url.append("?client_id=" + giteeConstants.getAppID());
 url.append("&response_type=code");
 // 转码
 url.append("&redirect_uri=" + URLEncodeUtil.getURLEncoderString(redirectUri));
 url.append("&state=" + uuid);
 url.append("&scope=user_info");

 return Result.success("操作成功", url);
}</code></pre>
<h2>3. 获取AccessToken</h2>
<h3>3.1 获取Authorization Code</h3>
注意: 如果之前已经授权过的需要跳过授权页面，需要在上面第一步的 URL 加上 scope 参数，且 scope 的值需要和用户上次授权的勾选的一致。
请求地址：
<pre class="language-java highlighter-hljs"><code>https://gitee.com/oauth/authorize?client_id={client_id}&redirect_uri={redirect_uri}&response_type=code&scope=user_info</code></pre>
请求方法：
　　GET
请求参数：
<table class="t" style="width: 1257px; height: 309px">
<tbody>
<tr>
<th width="100">参数</th>
<th width="100">是否必须</th>
<th>含义</th>
</tr>
<tr>
<td>response_type</td>
<td>必须</td>
<td>授权类型，此值固定为“code”。</td>
</tr>
<tr class="h">
<td>client_id</td>
<td>必须</td>
<td>申请Gitee登录成功后，分配给应用的appid。</td>
</tr>
<tr>
<td>redirect_uri</td>
<td>必须</td>
<td>成功授权后的回调地址，必须是注册appid时填写的主域名下的地址，建议设置为网站首页或网站的用户中心。注意需要将url进行URLEncode。</td>
</tr>
<tr class="h">
<td>state</td>
<td>可选</td>
<td>client端的状态值。用于第三方应用防止CSRF攻击，成功授权后回调时会原样带回。请务必严格按照流程检查用户与state参数状态的绑定。</td>
</tr>
<tr>
<td>scope</td>
<td>必须</td>
<td>请求用户授权时向用户显示的可进行授权的列表。 请求对接口user_info进行授权。 建议控制授权项的数量，只传入必要的接口名称，因为授权项越多，用户越可能拒绝进行任何授权。</td>
</tr>
</tbody>
</table>
返回说明：
1. 如果用户成功登录并授权，则会跳转到指定的回调地址，并在redirect_uri地址后带上Authorization Code和原始的state值。如：
<pre class="language-java highlighter-hljs"><code>https://www.youyoushop.work/giteeCallback?code=1E83738E1231233B1224D9B3C&state=cca3c152c52722123123d2963fe</code></pre>
2. 如果用户在登录授权过程中取消登录流程，对于PC网站，登录页面直接关闭。
<h3>3.2 通过Authorization Code获取Access Token</h3>
应用服务器或 Webview 使用 access_token API 向码云认证服务器发送post请求传入用户授权码以及回调地址（ POST请求 ）
注意：请求过程建议将 client_secret 放在 Body 中传值，以保证数据安全。
请求地址：
<pre class="language-java highlighter-hljs"><code>https://gitee.com/oauth/token?grant_type=authorization_code&code={code}&client_id={client_id}&redirect_uri={redirect_uri}&client_secret={client_secret}</code></pre>
请求方法：
　　POST
请求参数：
<table class="t" style="height: 263px; width: 1258px">
<tbody>
<tr>
<th width="100">参数</th>
<th width="100">是否必须</th>
<th>含义</th>
</tr>
<tr>
<td>grant_type</td>
<td>必须</td>
<td>授权类型，在本步骤中，此值为“authorization_code”。</td>
</tr>
<tr class="h">
<td>client_id</td>
<td>必须</td>
<td>申请Gitee登录成功后，分配给网站的appid。</td>
</tr>
<tr>
<td>client_secret</td>
<td>必须</td>
<td>申请Gitee登录成功后，分配给网站的appkey。</td>
</tr>
<tr class="h">
<td>code</td>
<td>必须</td>
<td>上一步返回的authorization code。</td>
</tr>
<tr>
<td>redirect_uri</td>
<td>必须</td>
<td>与上面一步中传入的redirect_uri保持一致。</td>
</tr>
</tbody>
</table>
返回说明：
　　如果成功返回，即可在返回包中获取到Access Token。如(不指定fmt时）：
<pre class="language-java highlighter-hljs"><code>access_token=FE04************CCE2&expires_in=7776000&refresh_token=88E4****************BE14</code></pre>
<table class="t" style="height: 147px; width: 1255px">
<tbody>
<tr>
<th width="80">参数说明</th>
<th width="150">描述</th>
</tr>
<tr>
<td>access_token</td>
<td>授权令牌，Access_Token。</td>
</tr>
<tr class="h">
<td>expires_in</td>
<td>该access token的有效期，单位为秒。</td>
</tr>
<tr>
<td>refresh_token</td>
<td>在授权自动续期步骤中，获取新的Access_Token时需要提供的参数。
注：refresh_token仅一次有效
</td>
</tr>
</tbody>
</table>
错误码说明：
　如果获取 access_token 返回 403，可能是没有设置User-Agent的原因。
 详见：获取Token时服务端响应状态403是什么情况
<h3>3.4（可选）权限自动续期，刷新Access Token</h3>
　　当 access_token 过期后（有效期为一天），你可以通过以下 refresh_token 方式重新获取 access_token
请求地址：
<pre class="language-java highlighter-hljs"><code>https://gitee.com/oauth/token?grant_type=refresh_token&refresh_token={refresh_token}</code></pre>
请求方法：
　　POST
请求参数：
<table class="t" style="height: 235px; width: 783px">
<tbody>
<tr style="height: 37.8594px">
<th style="height: 37.8594px; width: 126.688px">参数</th>
<th style="height: 37.8594px; width: 126px">是否必须</th>
<th style="height: 37.8594px; width: 487.969px">含义</th>
</tr>
<tr style="height: 37.8594px">
<td style="height: 37.8594px; width: 126.688px">grant_type</td>
<td style="height: 37.8594px; width: 126px">必须</td>
<td style="height: 37.8594px; width: 487.969px">授权类型，在本步骤中，此值为“refresh_token”。</td>
</tr>
<tr class="h" style="height: 108.938px">
<td style="height: 108.938px; width: 126.688px">refresh_token</td>
<td style="height: 108.938px; width: 126px">必须</td>
<td style="height: 108.938px; width: 487.969px">首次：使用在Step2中获取到的最新的refresh_token。
后续：使用刷新后返回的最新refresh_token
</td>
</tr>
</tbody>
</table>
错误码说明：
　如果获取 access_token 返回 403，可能是没有设置User-Agent的原因。
 详见：获取Token时服务端响应状态403是什么情况
<h2>4. 获取用户信息</h2>
请求地址：
<pre class="language-java highlighter-hljs"><code>https://gitee.com/api/v5/user?access_token=xxx&</code></pre>
请求方法：
　　GET
请求参数：
<table class="t" style="height: 72px; width: 1256px">
<tbody>
<tr>
<th width="100">参数</th>
<th width="100">是否必须</th>
<th>含义</th>
</tr>
<tr>
<td>access_token</td>
<td>必须</td>
<td>在Step1中获取到的access token。</td>
</tr>
</tbody>
</table>
<h2>5. 测试网站（地址），需要的小伙伴可以测试</h2>
<img src="https://img2023.cnblogs.com/blog/2107107/202302/2107107-20230209145251303-796375871.png">
<img src="https://img2023.cnblogs.com/blog/2107107/202302/2107107-20230209145442110-47844182.png">
<h3>5.1 每个人做的项目需求不同，可能会出现不同的问题，文章仅供参考</h3>
<h3>5.2 SpringBoot+Vue实现第三方Gitee登录(一)</h3>
<h3>5.3 其他第三方登录方式：第三方登录汇总</h3>
<h2>6. 源码购买</h2>
<h3>6.1 简洁版源码（淘宝店铺：爱创客网络）</h3>
只包含登录，第三方登录，跳转首页（没有菜单！），技术框架：SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUI等
<img src="https://img2024.cnblogs.com/blog/2107107/202404/2107107-20240409112521898-2107328284.png">
<img src="https://img2024.cnblogs.com/blog/2107107/202404/2107107-20240409112541254-1234605550.png" height="503" width="904">
<img src="https://img2024.cnblogs.com/blog/2107107/202404/2107107-20240409112602931-1982591283.png" height="528" width="902">
<h3>6.2 完整版本源码（淘宝店铺：爱创客网络）</h3>
测试地址(测试地址是完整版的)：www.youyoushop.work
包含登录，注册，第三方登录，完整的系统管理模块，系统工具模块，系统监控模块，系统日志模块，个人中心等，技术框架：SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUI等
<img src="https://img2024.cnblogs.com/blog/2107107/202404/2107107-20240409112521898-2107328284.png">
<img src="https://img2024.cnblogs.com/blog/2107107/202404/2107107-20240409112927931-488978576.png" height="475" width="1161"> 
来源：https://www.cnblogs.com/liyhbk/p/15767505.html

頁: [1]

琼殿技术论坛's Archiver

SpringBoot+Vue实现第三方Gitee登录(二)