Github第三方登陸詳細流程及實現

一、流程圖

二、具體實現步驟

Ⅰ、創建OAuth App

我們首先需要創建一個OAuth App，根據下圖的步驟點擊即可

依次填寫信息，然后點Register application

然后我們可以看到會生成一個id和密碼，后面我們會用得到，盡量不要讓別人看到了（我這里是測試用的，后續會刪除）

Ⅱ、寫后台代碼，我這里用Spring Boot

寫一個超鏈接用作登陸按鈕，以及兩個實體類

<a href="https://github.com/login/oauth/authorize?client_id=你的client_id&redirect_uri=http://localhost:8080/callback&state=1">登陸</a>

public class AccessTokenDto {
    private String client_id; //客戶端ID。
    private String client_secret; //客戶端密鑰
    private String code; //作為對步驟 1 的響應而接收的代碼。
    private String redirect_uri; //應用程序中的用戶在授權后發送的URL
    private String state; //在步驟 1 中提供的不可猜測的隨機字符串
    //省略getter setter
}

public class GithubUser {
    private Long id;
    private String name;
    private String bio;
    //省略getter setter
}

Controller

@Controller
public class AuthoriseController {

    @Autowired
    private GithubProvider githubProvider;

    @Autowired
    private GithubParams githubParams;

    @GetMapping("/callback")
    public String callback(@RequestParam("code") String code,
                           @RequestParam("state") String state){
        AccessTokenDto accessTokenDto = new AccessTokenDto();
        accessTokenDto.setClient_id(githubParams.getClient_id());
        accessTokenDto.setClient_secret(githubParams.getClient_secret());
        accessTokenDto.setCode(code);
        accessTokenDto.setRedirect_uri(githubParams.getRedirect_uri());
        accessTokenDto.setState(state);
        //獲取access_token
        String access_token = githubProvider.getAccessToken(accessTokenDto);
        //根據accessToken獲取用戶信息
        GithubUser githubUser = githubProvider.getGithubUser(access_token);
        System.out.println(githubUser.getName());

        return "index";
    }
}

你需要導入兩個maven依賴

<!--引入OKHTTP，發送請求-->
<dependency>
    <groupId>com.squareup.okhttp3</groupId>
    <artifactId>okhttp</artifactId>
    <version>3.6.0</version>
</dependency>

<!--引入fastjson-->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>

GithubProvider（用於獲取access_token和user信息）

@Component
public class GithubProvider {
    @Autowired
    private GithubParams githubParams;

    /**
     * 獲取AccessToken
     */
    public String getAccessToken(AccessTokenDto accessTokenDto) {
        OkHttpClient client = new OkHttpClient();
        MediaType mediaType = MediaType.parse("application/json; charset=utf-8");
        //將accessTokenDto轉為json字符串傳入參數
        RequestBody body = RequestBody.create(mediaType, JSON.toJSONString(accessTokenDto));
        Request request = new Request.Builder()
                .url(githubParams.getToken_uri())
                .post(body)
                .build();
        try (Response response = client.newCall(request).execute()) {
            String str = response.body().string();
            //得到的是類似這樣的字符串，我們需要將它分割，只要access_token部分
            //access_token=9566ba3483a556c610be42d44338f3fd16a3b8d1&scope=&token_type=bearer
            return str.split("&")[0].split("=")[1];
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * 根據access_token獲取用戶信息
     */
    public GithubUser getGithubUser(String access_token) {
        OkHttpClient client = new OkHttpClient();
        Request request = new Request.Builder()
                .url(githubParams.getUser_uri() + "?access_token=" + access_token)
                .build();

        try (Response response = client.newCall(request).execute()) {
            //得到的是json字符串，因此需要轉為GithubUser對象
            return JSON.parseObject(response.body().string(), GithubUser.class);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
}

GithubParams，配置參數

@Component
@ConfigurationProperties(prefix = "github")
public class GithubParams {

    private String client_id;
    private String client_secret;
    private String redirect_uri;
    private String token_uri;
    private String user_uri;
    //省略getter setter
}

配置文件application.properties

server.port=8087
github.client_id=你生成的id
github.client_secret=你生成的密碼
github.redirect_uri=http://localhost:8887/callback
github.token_uri=https://github.com/login/oauth/access_token
github.user_uri=http://localhost:8887/callback