大家在自己做專案的時候有沒有想過實作一個第三方應用登錄呢？類似這種：

本篇文章就來聊一聊該如何實作第三方應用登錄，

什么是OAuth2.0

OAuth是一項協議，它為用戶資源的授權提供了一個安全、開放而簡易的標準，OAuth的授權不會使第三方觸及到用戶的賬號資訊（比如密碼），因此OAuth是相對安全的，而OAuth2.0就是OAuth的延續，不過2.0更加關注客戶端開發者的簡易性，

申請網站接入

常見的第三方應用都支持第三方登錄，比如：QQ、微信、微博、GitHub、Gitee等，要想申請第三方登錄權限，就需要去到對應的平臺，比如QQ，搜索QQ開放平臺：

進入應用管理，并創建應用即可：
在這里插入圖片描述

不過對于QQ、微信、微博等的網站接入都需要身份認證，程序比較繁瑣，所以我們使用Gitee作為第三方應用進行接入，

首先打開Gitee，選擇設定：

在設定中選擇第三方應用：

點擊創建應用并填寫相關資訊：

應用名稱可以隨意填寫，但是下面的兩個地址就有用途了，對于應用主頁，它需要填寫的是當前應用的主頁，而應用回呼介面填寫的是當登錄成功后需要跳轉的頁面，

創建SpringBoot應用

申請完成后，就可以來創建SpringBoot應用，并新建一個index.html頁面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <form>
      用戶名:<input type="text"/><br/>
      密碼:<input type="password"/><br/>
      <a href="">Gitee登錄</a>
      <input type="submit" value="登錄"/><br/>
    </form>
  </body>
</html>

效果如下：

頁面很丑，但不重要，實作功能即可，

現在我們的需求是點擊Gitee登錄鏈接，會跳轉至一個第三方的登錄頁面，就像這樣：

那么該如何實作呢？

回到Gitee中，在創建完應用后，將頁面拖動到下方，會看到模擬請求按鈕：

點擊一下該按鈕，會進行一個模擬登錄：

地址欄中的地址就是我們需要跳轉的頁面，將地址復制下來：

https://gitee.com/oauth/authorize?client_id=52908197466cd3008db76a6018de66c8d222656056fa78b26dd58d1f4fa0a606&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fsuccess&response_type=code

里面總共有3個引數，分別是：

client_id
redirect_uri
response_type

其中client_id在創建完應用之后便會提供給我們：

也就是地址上的內容，而redirect_uri是在點擊了同意授權按鈕之后需要跳轉的頁面，即：登錄成功之后，需要跳轉至成功后的頁面，最后是response_type，它表示回應型別為一個授權碼，

來了解一下授權碼的作用，當用戶點擊了同意授權按鈕之后，Gitee服務器會給redirect_uri指向的頁面傳遞一個授權碼，此時就可以接收到這個授權碼，再去換取AccessToken，只有獲取到了AccessToken，才能夠獲取到Gitee中當前用戶的某些資訊，

點擊了同意授權按鈕后：

得到了授權碼后，通過該地址能夠換取AccessToken：

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

該地址要求以Post形式請求，使用PostMan測驗一下，將引數按要求設定好：

得到相應結果：

{
  "access_token": "cd2c33c3fe548a23188159f87da70110",
  "token_type": "bearer",
  "expires_in": 86400,
  "refresh_token": "c95a38ab2357638ffc4dc6f09c623f2333e0930a37dec8e2f191a40d7afd3514",
  "scope": "user_info",
  "created_at": 1627974370
}

得到了AccessToken之后，就可以獲取到用戶在Gitee中已經授權的任何資訊了，

整個授權認證的程序如下圖所示：

實作登錄流程

熟悉了整合流程之后，我們用代碼來實作一下，首先修改頁面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <form>
      用戶名:<input type="text"/><br/>
      密碼:<input type="password"/><br/>
      <a href="https://gitee.com/oauth/authorize?client_id=52908197466cd3008db76a6018de66c8d222656056fa78b26dd58d1f4fa0a606&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fsuccess&response_type=code">Gitee登錄</a>
      <input type="submit" value="登錄"/><br/>
    </form>
  </body>
</html>

現在超鏈接的地址經過修改后就能成功跳轉至Gitee授權頁面了，因為授權成功后跳轉的地址為 http://localhost:8080/success ，所以需要來處理一下這個請求，創建一個控制器：

@Controller
public class LoginController {

    @GetMapping("/success")
    public String login(@RequestParam("code") String code){
        System.out.println(code);
        return "success";
    }
    
    @GetMapping("/")
    public String index(){
        return "index";
    }
}

當授權成功后我們讓其跳轉至success.html頁面，并接收Gitee傳遞過來的授權碼，所以創建success.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <h1>登錄成功！</h1>
  </body>
</html>

啟動專案測驗一下：

點擊同意授權后確實登錄成功了，控制臺也輸出了授權碼：

e907fd92d8392ebcd72dff321da45115ff0fba2dec0e6918b233ec7d03b76e5d

其實到這里登錄流程還沒有結束，因為如果使用第三方應用登錄的話，平臺會使用第三方應用的一些資訊，比如賬號、頭像等直接作為當前平臺的登錄名和頭像，所以我們還需要獲取用戶在Gitee中的一些資訊，

此處參考Gitee的API檔案：

比如獲取授權用戶的資料資訊：

它需要傳遞一個access_token作為引數，那我們要做的就是使用授權碼去得到access_key：

@Controller
public class LoginController {

    @GetMapping("/success")
    public String login(@RequestParam("code") String code, Map<String,String> map) {
        // 獲取accesskey
        String accessKey = getAccessKey(code);
        System.out.println(accessKey);
        // 通過accessKey獲取用戶資訊
        String userInfo = getUserInfo(accessKey);
        // 取出用戶名
        String name = (String) JSONObject.parseObject(userInfo).get("name");
        // 取出頭像
        String avatar_url = (String) JSONObject.parseObject(userInfo).get("avatar_url");
        // 放入請求域
        map.put("name",name);
        map.put("avatar_url",avatar_url);
        return "success";
    }

    /**
     * 獲取用戶資訊
     */
    private String getUserInfo(String accessKey) {
        String json = "";
        OkHttpClient client = new OkHttpClient();
        // 通過該地址能夠獲取到用戶資訊
        String url = "https://gitee.com/api/v5/user?access_token=" + accessKey;
        Request request = new Request.Builder()
                .get()
                .url(url).build();
        try {
            Response response = client.newCall(request).execute();
            json = response.body().string();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return json;
    }

    /**
     * 獲取AccessKey
     */
    private String getAccessKey(String code) {
        OkHttpClient client = new OkHttpClient();
        // 通過該地址能夠獲取到access_token
        String url = "https://gitee.com/oauth/token";
        // 封裝請求引數
        RequestBody requestBody = new FormBody.Builder()
                .add("grant_type", "authorization_code")
                .add("code", code)
                .add("client_id", "52908197466cd3008db76a6018de66c8d222656056fa78b26dd58d1f4fa0a606")
                .add("redirect_uri", "http://localhost:8080/success")
                .add("client_secret", "7e84401a9752e88d22d5450c1687ca6a19bc34f45fe3452cefd33312d8153978")
                .build();

        Request request = new Request.Builder()
                .post(requestBody)
                .url(url).build();
        String accessKey = "";
        try {
            Response response = client.newCall(request).execute();
            String json = response.body().string();
            // 獲取json串中的access_token屬性
            accessKey = (String) JSONObject.parseObject(json).get("access_token");
        } catch (IOException e) {
            e.printStackTrace();
        }
        return accessKey;
    }

    @GetMapping("/")
    public String index() {
        return "index";
    }
}

success.html頁面需要顯示用戶資訊：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <h1>登錄成功！</h1>
    <h1>用戶名:<span th:text="${#request.getAttribute('name')}"></span></h1>
    <img th:src="${#request.getAttribute('avatar_url')}">
  </body>
</html>

效果如下：

事實上，登錄流程遠沒有這么簡單，當用戶取消授權時就不能讓其登錄，程式里還沒有加上這類判斷，對于從未注冊過的用戶來說，這次登錄就相當于一次注冊，所以還需要以Gitee中用戶的某些資訊作為注冊資訊進行登錄，當已經注冊過的用戶使用第三方登錄時，要讓其正常登錄，

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/292097.html

標籤：其他

上一篇：新手小白編程利器！Debug 斷點除錯工具

下一篇：CGBTN2107_DAY03復習

手把手帶你實作第三方應用登錄

什么是OAuth2.0

申請網站接入

創建SpringBoot應用

實作登錄流程