github接入三方登录vue+egg+ts(踩坑)

1.什么是三方登录?
三方登录就是通过第三方应用程序的账号密码, 快速的获取用户相关的信息实现登录
例如: QQ登录
点击QQ登录按钮之后,就会要求用户输入QQ的账号和密码
只要用户输入了QQ的账号和密码, 我们就可以拿到用户的QQ信息
我们就可以通过用户的QQ信息来实现注册登录

2.三方登录存在的问题
如果让用户在我们的网站上输入QQ的账号和密码,
那么我们就可以窃取用户的QQ号, 做一些见不得人的事

3.如何解决这个问题?
通过OAuth协议进行授权

4.什么是OAuth协议?(Open Authorization)
OAuth协议为用户资源的授权提供了一个安全的、开放而又简易的标准。
与以往的授权方式不同之处是OAuth的授权不会使第三方触及到用户的帐号信息（如用户名与密码），
即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，
因此OAuth是安全可靠的

5.OAuth授权流程
（1）第三方应用请求资源所有者(用户)授权。
（2）资源所有者同意给第三方应用授权。
（3）第三方应用使用步骤2中获得的授权，向授权服务器申请令牌。
（4）授权服务器对第三方应用进行认证并确认无误后，同意发放令牌。
（5）第三方应用使用步骤4中发放的令牌向资源服务器申请获取资源。
（6）资源服务器确认令牌无误后，向第三方应用开放资源访问。

OAth授权实现流程

(1)去到需要接入的网站申请接入
例如: 要实现Github登录, 就去到Github申请接入
https://github.com/settings/applications/new

注意上图有误:回调url应该是请求的后端服务器,而不是前端服务器
(2)申请完接入之后会得到一个Id和Secret
例如: 申请完Github登录, 我们会得到
Client ID:xxx
Client Secret:xxxx
(3)在自己的网站放上对应的第三方登录按钮

 <li class="iconfont icon-github" style="color: #000">
          <a href="http://127.0.0.1:7001/github"></a>
  </li>

(4)当用户点击登录按钮之后, 按照文档要求带着申请到的id获取登录界面,为什么要带id, 因为需要知道是你有没有接入权限,因为要告诉用户是给谁授权