Web应用接入Github登录

现在很多站点都支持第三方登录功能。
作为一个技术博客，目标受众项是一批程序员，第三方登录的就选中了github。
这篇文章注意是讲一讲如何给自己的博客添加github自动登录功能。

OAuth 2.0

说到第三方登录，不得不提的一个知识点就是 oauth 2.0。

OAuth（开放授权）是一个开放标准，允许用户让第三方应用访问该用户在某一网站上存储的私密的资源（如照片，视频，联系人列表），而无需将用户名和密码提供给第三方应用。 ---- 百度百科

这个协议在认证和授权的时候涉及到：

• 服务提供方，例如 GitHub，GitHub上储存了用户的登录名，Email，昵称，头像等信息
• 用户
• 客户端，例如我的博客就是一个客户端，需要服务方向我提供用户的一些基本信息

OAuth 协议的认证和授权的过程如下：

• 用户打开我的博客后，我想要通过GitHub获取改用户的基本信息
• 在转跳到GitHub的授权页面后，用户同意我获取他的基本信息
• 博客获得GitHub提供的授权码，使用该授权码向GitHub申请一个令牌
• GitHub对博客提供的授权码进行验证，验证无误后，发放一个令牌给博客端
• 博客端使用令牌，向GitHub获取用户信息
• GitHub 确认令牌无误，返回给我基本的用户信息

如何使用GitHub提供的 OAuth 服务

• 打开 Setting > Developer setting > OAuth applications
• 点击 Register a new application
• 填入基本的app信息
• 创建成功，会有如下页面

红框中的是返回值，得注意填写

这里的各项配置具体的作用，我们还是看一看GitHub提供的文档 OAuth GitHub Developer Guide

具体流程

1. 转跳到 GitHub 用户授权页面， client_id 必须传
   其他参数如果有需要就传，例如我这里需要获取用户的邮箱信息，就加了一个 scope=user:email
   最终拼成的URL如下:

https://github.com/login/oauth/authorize?client_id=myclient_id&scope=user:email

2. 当用户同意授权后，链接地址就会转跳到 我们配置页面内的 Authorization callback URL 所填写的URL地址，并且会带上一个 code参数，这个参数在后面获取用户token是必须的一个参数。
   获取到这个code参数后，我会将这个code传到服务器的后台，然后后台调用 https://github.com/login/oauth/access_token 这个api，传入 client_id, client_secret, code 这三个参数，可以获取到一个 access_token。

3. 获取到 access_token 后， 再调用 https://api.github.com/user?access_token=access_token 这个API，就可以获取到基本的用户信息了。 用户的基本信息内容如下所示， 根据第一步传入的不同的 scope，获取到的用户信息也是不同的。博客后台使用 login 字段作为用户的唯一标示，因为email 可能为空，之前用email发生了一些bug。

下面直接给出代码：

@Controller
public class LoginController {
    //github的clientid
    @Value("${GITHUB_CLIENT_ID}")
    private String GITHUB_CLIENT_ID;
    //github的clientsecret
    @Value("${GITHUB_CLIENT_SECRET}")
    private String GITHUB_CLIENT_SECRET;


    @RequestMapping("/")
    public String toLoginPage(){
        return "redirect:login.jsp";
    }


    @RequestMapping("/github/login")
    public String getAhthcode(){

        String path = "https://github.com/login/oauth/authorize?client_id="+GITHUB_CLIENT_ID+"&scope=user:email";
        return "redirect:"+path;
    }

    @RequestMapping("/github/login/callback")
    public String doGithubLogin(Model model, String code) throws IOException {

        Map heads = new HashMap<>();
        heads.put("User-Agent","Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36");

        Document doc = Jsoup.connect("https://github.com/login/oauth/access_token").ignoreContentType(true).headers(heads)
                .data("client_id",GITHUB_CLIENT_ID)
                .data("client_secret",GITHUB_CLIENT_SECRET)
                .data("code",code)
                .header("User-Agent","Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36")
                .get();
        Element body = doc.body();
        String access_token = body.text().substring(body.text().indexOf("=")+1,body.text().indexOf("&"));



        Document userDetail = Jsoup.connect("https://api.github.com/user").ignoreContentType(true).headers(heads)
                .data("access_token",access_token)
                .header("User-Agent","Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36")
                .get();
        model.addAttribute("userDetail",userDetail.body().toString());

        return "welcome";
    }

}

效果如下图：

这样就能拿到你的信息了，至于用java还是用ajax具体看业务的需求了，这里用jsoup并不是很方便，还不如用js