SpringBoot+Vue實現第三方Gitee登錄(二)


1. 准備工作_OAuth2(官網地址:開發流程

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 每個人做的項目需求不同,可能會出現不同的問題,文章僅供參考

5.2 SpringBoot+Vue實現第三方Gitee登錄(一)

5.3 其他第三方登錄方式:https://www.cnblogs.com/liyhbk/category/2089783.html

6. 源碼購買

6.1 簡潔版(淘寶源碼

包含登錄,第三方登錄,跳轉首頁,SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUI等

6.2 多功能版本淘寶源碼

包含登錄,注冊,第三方登錄,完整的系統管理模塊,系統工具模塊,系統監控模塊,個人中心等,SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUI等


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM