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

标签：Vue SpringBoot 登录 gitee token code 授权 Gitee

1. 准备工作_OAuth2（官网地址：开发流程）

1.1 API 使用条款

1. OSCHINA 用户是资源的拥有者，需尊重和保护用户的权益。

2. 不能在应用中使用 OSCHINA 的名称。

3. 未经用户允许，不准爬取或存储用户的资源。

4. 禁止滥用 API，请求频率过快将导致请求终止。

1.2 OAuth2 认证基本流程

1. 通过申请的应用ID–Client ID、回调地址等向 Gitee 服务器发起授权的请求

2. Gitee 认证服务器通过回调地址{redirect_uri}将用户授权码 code 传递回来【传递到回调地址】

3. 通过用户授权码 code 及应用ID等信息，再去 Gitee 服务器中获取用户的访问令牌（Access Token）

4. 获取Access Token之后，根据这个token再去 Gitee 服务器中获取用户的 ID、name、email等信息

2. 放置“Gitee登录”按钮

本步骤的作用：

　　在网站页面上放置“Gitee登录”按钮，并为按钮添加前台代码，实现点击按钮即弹出Gitee登录对话框。

2.1 下载“Gitee登录”按钮图片，并将按钮放置在页面合适的位置

　　可以到阿里矢量图库下载更多图标：阿里巴巴矢量图标库。

2.2 把“Gitee登录”按钮添加到页面

2.2.1 效果演示

2.2.2 前端代码(Vue)

　　为了实现上述效果，应该为“Gitee登录”按钮图片添加如下前台代码：

<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. Gitee登录配置文件信息：

# 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

2. 读取配置文件信息常量类：

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;

}

3. Conteoller（获取Gitee登录的url）

/**
     * 获得跳转到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);
    }

3. 获取AccessToken

3.1 获取Authorization Code

注意: 如果之前已经授权过的需要跳过授权页面，需要在上面第一步的 URL 加上 scope 参数，且 scope 的值需要和用户上次授权的勾选的一致。

请求地址：

https://gitee.com/oauth/authorize?client_id={client_id}&redirect_uri={redirect_uri}&response_type=code&scope=user_info

请求方法：

　　GET

请求参数：

参数	是否必须	含义
response_type	必须	授权类型，此值固定为“code”。
client_id	必须	申请Gitee登录成功后，分配给应用的appid。
redirect_uri	必须	成功授权后的回调地址，必须是注册appid时填写的主域名下的地址，建议设置为网站首页或网站的用户中心。注意需要将url进行URLEncode。
state	可选	client端的状态值。用于第三方应用防止CSRF攻击，成功授权后回调时会原样带回。请务必严格按照流程检查用户与state参数状态的绑定。
scope	必须	请求用户授权时向用户显示的可进行授权的列表。请求对接口user_info进行授权。建议控制授权项的数量，只传入必要的接口名称，因为授权项越多，用户越可能拒绝进行任何授权。

返回说明：

1. 如果用户成功登录并授权，则会跳转到指定的回调地址，并在redirect_uri地址后带上Authorization Code和原始的state值。如：

https://www.youyoushop.work/giteeCallback?code=1E83738E1231233B1224D9B3C&state=cca3c152c52722123123d2963fe

2. 如果用户在登录授权过程中取消登录流程，对于PC网站，登录页面直接关闭。

3.2 通过Authorization Code获取Access Token

应用服务器或 Webview 使用 access_token API 向码云认证服务器发送post请求传入用户授权码以及回调地址（ POST请求 ）

注意：请求过程建议将 client_secret 放在 Body 中传值，以保证数据安全。

请求地址：

https://gitee.com/oauth/token?grant_type=authorization_code&code={code}&client_id={client_id}&redirect_uri={redirect_uri}&client_secret={client_secret}

请求方法：

　　POST

请求参数：

参数	是否必须	含义
grant_type	必须	授权类型，在本步骤中，此值为“authorization_code”。
client_id	必须	申请Gitee登录成功后，分配给网站的appid。
client_secret	必须	申请Gitee登录成功后，分配给网站的appkey。
code	必须	上一步返回的authorization code。
redirect_uri	必须	与上面一步中传入的redirect_uri保持一致。

返回说明：

　　如果成功返回，即可在返回包中获取到Access Token。如(不指定fmt时）：

access_token=FE04************CCE2&expires_in=7776000&refresh_token=88E4****************BE14

参数说明	描述
access_token	授权令牌，Access_Token。
expires_in	该access token的有效期，单位为秒。
refresh_token	在授权自动续期步骤中，获取新的Access_Token时需要提供的参数。注：refresh_token仅一次有效

错误码说明：

　如果获取 access_token 返回 403，可能是没有设置User-Agent的原因。

详见：获取Token时服务端响应状态403是什么情况

3.4（可选）权限自动续期，刷新Access Token

　　当 access_token 过期后（有效期为一天），你可以通过以下 refresh_token 方式重新获取 access_token

请求地址：

https://gitee.com/oauth/token?grant_type=refresh_token&refresh_token={refresh_token}

请求方法：

　　POST

请求参数：

参数	是否必须	含义
grant_type	必须	授权类型，在本步骤中，此值为“refresh_token”。
refresh_token	必须	首次：使用在Step2中获取到的最新的refresh_token。后续：使用刷新后返回的最新refresh_token

错误码说明：

　如果获取 access_token 返回 403，可能是没有设置User-Agent的原因。

详见：获取Token时服务端响应状态403是什么情况

4. 获取用户信息

请求地址：

https://gitee.com/api/v5/user?access_token=xxx&

请求方法：

　　GET

请求参数：

参数	是否必须	含义
access_token	必须	在Step1中获取到的access token。

5. 测试网站（地址），需要的小伙伴可以测试，网站不保存用户任何数据

5.1 每个人做的项目需求不同，可能会出现不同的问题，文章仅供参考

标签：Vue,SpringBoot,登录,gitee,token,code,授权,Gitee
From： https://www.cnblogs.com/liyhbk/p/15767505.html

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

1. 准备工作_OAuth2（官网地址：开发流程）

1.1 API 使用条款

1.2 OAuth2 认证基本流程

2. 放置“Gitee登录”按钮

2.1 下载“Gitee登录”按钮图片，并将按钮放置在页面合适的位置

2.2 把“Gitee登录”按钮添加到页面

2.2.1 效果演示

2.2.2 前端代码(Vue)

2.2.2 后端代码(Java)

3. 获取AccessToken

3.1 获取Authorization Code

3.2 通过Authorization Code获取Access Token

3.4（可选）权限自动续期，刷新Access Token

4. 获取用户信息

5. 测试网站（地址），需要的小伙伴可以测试，网站不保存用户任何数据

5.1 每个人做的项目需求不同，可能会出现不同的问题，文章仅供参考

相关文章

赞助商

阅读排行