谈谈基于Github的OAuth2第三方登录实现

上篇文章介绍了OAuth2.0的基本知识,这篇文章将介绍怎么通过github来实现OAuth2.0第三方登录

注册OAuthApp

https://github.com/settings/developers

1.新建OAuth App

2.填写应用信息

homepageURL为主页地址,Authorization Callback URL为回调地址,当用户同意授权后,会回调该地址,并将ActionCode拼接到地址后面。

3.注册完毕获取clientId与client Secret

代码实现

github对外接口

上一篇文章说过,OAuth2.0的授权码模式要调用两次认证服务器来获取accessToken。github对于OAuth2.0的授权码登录提供了以下接口:

接口URL接口类型接口作用
https://github.com/login/oauth/authorizeGET获取授权码code
https://github.com/login/oauth/access_tokenPOST通过授权码获取accessToken
https://api.github.com/userGET通过accessToken获取用户信息

这些接口的传参可以参照官方文档:授权 OAuth 应用 - GitHub 文档,我们可以用这些接口来实现OAuth2.0的登录。

前端主页面

使用了github提供的获取授权码Code的接口,clientId是上面创建OAuthApp后显示的,redirect_uri代表回调地址。用户进行授权成功后,会跳转到该uri地址,并且在地址后面拼接授权码code。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>第三方登录</title>
    <meta name="description" content=""/>
</head>
<body>
<h1>github登录</h1>
<!-- 获取授权码接口-->
<a href="https://github.com/login/oauth/authorize?client_id=xxx&redirect_uri=http://localhost:8080/callback&state=1&scope=user">点击授权登录</a>
</body>
</html>

后端回调接口

回调地址拿到授权码code后,通过授权码code来交换得到accessToken,然后再用accessToken获取用户信息

 @RequestMapping(value = "/callback")
    public String callBack(@RequestParam("code")String code) throws Exception{

        //获取accessToken
        String getAccessTokenUrl="https://github.com/login/oauth/access_token";
        JSONObject param=new JSONObject();
        param.put("client_id","xxx"); //OAuthApp页面对应的clientId
        param.put("client_secret","xxxx");//OAuthApp页面对应的client_secret
        param.put("code",code);

        Map<String, String> headers=new HashMap<>(2);
        headers.put(HttpUtils.CONTENT_TYPE,"application/json");
        headers.put("Accept","application/json");
        String resultStr=HttpUtils.postJsonStr(getAccessTokenUrl,headers,param.toJSONString());
        JSONObject jsonObject=(JSONObject)JSON.parse(resultStr);
        System.out.println("accessToken Return:"+jsonObject.toJSONString());

        //获取用户信息
        String getUserInfoUrl="https://api.github.com/user";
        Map<String, String> headers2=new HashMap<>(2);
        String token="Bearer "+jsonObject.getString("access_token");
        headers2.put("Authorization",token);
        String userInfo= HttpUtils.httpGet(getUserInfoUrl,headers2,null);
        System.out.println("userInfo:"+userInfo);
        return userInfo;
    }

运行效果

1.前端页面授权登录

2.GitHub用户名与密码登录

3.GitHub授权登录

4.回调显示用户信息