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/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;

/**
 * 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=cca3c1512312312323fe

2. 如果用戶在登錄授權過程中取消登錄流程，對於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 其他第三方登錄方式：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等