Github登录实战流程

前言

功能其实早已经实现了，一直没有做记录，没办法，实在是懒啊！近段时间武汉比较艰难, 疫情肆虐，城都封了，在家里憋了好久，终于想着该弄弄博客了，好吧，把之前没来得及写的补上！

在做登录之前，博客大致的功能基本都已经实现的差不多了，剩下的应该都是一些细节上的完善，我觉得一个像样的博客，登录还是必不可少的，我又不想做那种老套的账号密码，给人体验也不好，做第三方登录似乎是最快捷也最实在的，点点按钮就搞定，你好我好大家都好，下面进入正题！

先看看效果:

 

梳理流程

github登录大致的流程分为以下几步：

• 设置Github的OAuth Apps
• 获取临时code
• 通过code向Github请求用户信息
• 拿到用户信息做后续处理

 

设置Github的OAuth Apps

登录自己的Github账号，依次点击右侧头像---Settings---Developer settings---OAuth Apps---New OAuth Apps

进行设置，页面如下图：

第一栏填写名字，第二栏是你博客的访问地址，第三栏描述，第四栏是第一次请求Github获取临时code的回调地址，简单说就是获取code后返回的显示页面，设置好了之后可以拿到你的client_id和client_secret，后面会用到。

 

获取临时code

这一步很简单，发送请求获取code，请求成功后返回的是你上面设置的回调地址，并带上参数code值给你，所以我们需要做的就是请求后跳转到返回的回调地址，并且接收code，然后拿code去请求用户信息

需要注意的是在请求发送之前最好缓存一下当前页面，后续完成登陆流程后需要跳回到这个页面，以免影响用户体验

以vue为例，请求Github获取code：

methods: {
    //登录
    login(){
    //保存当前页面路由
    localStorage.setItem("currentRoute",this.$route.path)
    //github请求code
    const url = '/github/login/oauth/authorize?client_id=你的client_id&redirect_uri=你的redirect_uri'
    //路径跳转
    window.location.href = url
}

调用后台接口请求用户信息：

created() {
  var code = this.$route.query.code
  //请求github获取用户信息,
  this.getToken(code)
},
methods: {
  //后台获取用户信息接口
  getToken(code){
    getToken(code).then((res) => {
      if(res.code == 200){
        this.$message({
          type: 'success',
          center: true,
          message: '登录成功!'
        });
        //跳转回之前的路由路径
        var path = localStorage.getItem("currentRoute")
        //保存用户信息
        localStorage.setItem('userinfo',res.data)
        that.$router.push(path);
        //清除延迟执行
        clearTimeout(this.timer);     
        //延迟执行
        this.timer = setTimeout(()=>{
          location.reload()
        },500);
      }
    })
  }
}

 

通过code像Github请求用户信息

以java为例，获取用户信息：

public String githubSign(String code) {
    String userinfo = "";
    //获取access_token
    Map<String, String> tokenMap = new HashMap<>();
    tokenMap.put("client_id",GITHUB_CLIENT_ID);                 //client_id
    tokenMap.put("client_secret",GITHUB_CLIENT_SECRET);         //client_secret
    tokenMap.put("code",code);                                  //code
    String access_token = HttpUtil.doGet(GET_GITHUB_TOKEN,tokenMap);
    //如果access_token存在
    if(StringUtils.isNotBlank(access_token)){
        //拼接,请求用户信息
        String path = "https://api.github.com/user?" + access_token;
        userinfo = HttpUtil.doGet(path);
    }
    log.info("userinfo: " + userinfo);
​
    return userinfo;
}

 

拿到用户信息做后续处理

拿到用户信息后返回给前端，后续怎么处理就随便你咯。

 

结语

以上就是Github登录的完整流程，由于之前被攻击的经历还历历在目，不方便提供源码支持，如有疑问可以在下方留言，或者直接联系本人，至于怎么联系，登录后自然就知道啦！

 

标题：Github登录实战流程

地址：http://blog.ivan.group/article/19

文章转载自:Ivan | 晏飞个人博客 [http://blog.ivan.group]