第三方登录之Github登录篇

前言

在前面项目的学习中用来练手的都是本地的项目，进行一个用户名和密码登录即可，也做过一些的限制操作等，比如在登录时候对于用户名（电话号码的验证等等）详情见秒杀项目登录设计，但也都是本地的登录，不需要验证码，也不需要授权等，也就没有上线的可能性。所以就想着来记录和写一些关于第三方授权登录的文章。之前也做过关于短信验证码的登录，但是短信验证购买的是腾讯一年的短信验证服务（后续会出一个教程和demo），这里就不作具体的介绍。今天这里来介绍一下Github第三方验证登录，后续的还有gitee，QQ和邮箱验证登录。我也会做成小的demo放在Github，供大家学习。
首先来看一下自己的社区登录图，其中有注册邮箱登录，和第三方登录。

正文

既然学习到如何使用Github来做第三方登录，就需要我们先去官网查看文档，一般对于网站可以用来接入第三方的登录，在网站下方都会有一个API其中有一个具体的授权登录等，这里就直接贴出具体的地址Github第三方登录文档英文好的小伙伴可以直接观看原生文档，就是一个单点登录，有学习和了解过基础的原理的看起来应该不算是困难。

在大致完成了文档的阅读之后，下面就直接开始介绍具体的流程：

创建App

这里就不再具体贴图如何进入到这个页面（Settings->Developer Settings->Oauth Apps）

进入之后，点击新建，填写下面的信息：

解释：Homepage URl 就是我们网站后续上线之后的上线地址，下面的Authorization callback URL原本填写应该是https://community.maycope.cn/callback，但是现在没有服务器用来部署项目，我们就可以写成本地项目地址和端口号，在调用时候，就会调用本地进行验证登录。
点击Register application，上传自己的app的头像即可，注意可以先将ID和 Secret复制下来。

若是以上图片可能讲解不是很清楚可以查看如下具体创建app创建app

图解流程：

1. 首先我们用户访问网站首页，点击登录时候进行的是1.1 就是自己逻辑的构造，将那些client ID 和redirect_uri进行一个处理，然后才会发送到Github上的https://github.com/login/oauth/authorize（这些信息文档里都有写到），进行验证授权，这个时候，Github会回调我们的redirect-uri，携带code信息，如1.2.1
   
2. 本地收到地址之后，解析出code，然后再度调用https://github.com/login/oauth/access_token 携带code和secret和下面的所有信息，这里进行了一个封装的处理。
   
3. 在完成了调用之后，如果携带的access_token是正确的，Github会返回这个具体的access_token，网站（我们的）就可以根据这个返回回来的进行调用用户的具体信息，这里我们可以进行模拟生成一个access_token看看网站会给我们返回什么信息：
   1.如下我们生成一个access_token,选择下方的user，这里没有截图完整。
   
   2. 将生成的进行复制。
      
   3. 访问如下网址，并且携带上自己的token信息。可以看到返回给我们的信息1，有id，name等。
      
4. 前面返回的access_token，就可以用来调用user信息。
   
5. 就可以将用户的信息存入到数据库里面并且对用户的状态进行更新处理。
6. 返回给用户，登录成功，进入到系统中。
   
7. 以上就是全部的流程处理信息。具体变成如下。

编程实现

以上完成了讲解之后，其实发现并不难理解，就是第一次接触可能会有一些困难，这里就将这部分代码集成到miaosha_2模块，因为对于模块二也是登录设置，可以进行同时的学习，这部分代码会放到我的个人仓库，地址如下【超链接】，先暂时完成一个小模块（对于数据库模块，可以保存到数据库中，表的设计也有实现，但是就是对于用户信息更改的情况，这里暂时没有做一个编写，大家可以自行对用户数据更改的情况进行设计）

授权登录获取access_token

首先来看具体的登录按钮设计,就如我们前面所讲，访问authorize时候携带上code和redirect_uri

<div style="margin-top: 25px">
		<h4>第三方账号登录</h4>
		<a th:href="@{https://github.com/login/oauth/authorize(client_id=${@environment.getProperty('github.client_id')},redirect_uri=${@environment.getProperty('github.redirect_uri')},scope='user',state='githubl