没错,用三方 Github 做授权登录就是这么简单!(OAuth2.0实战)

点击“ 程序员内点事 ”关注，选择“ 设置星标 ”

坚持学习，好文每日送达！

上一篇《OAuth2.0 的四种授权方式》文末说过，后续要来一波OAuth2.0实战，耽误了几天今儿终于补上了。

最近在做自己的开源项目（fire），Springboot + vue 的前后端分离框架才搭建完，刚开始做登录功能，做着做着觉得普通账户密码登录太简单了没啥意思，思来想去为显得逼格高一点，决定再加上 GitHub授权 和 人脸识别等多种登录方式。

在这里插入图片描述

而GitHub授权登录正好用到了OAuth2.0中最复杂的授权码模式，正好拿我这个案例给大家分享一下OAuth2.0的授权过程，我把项目已经部署到云服务，文末有预览地址，小伙伴们可以体验一下，后续项目功能会持续更新。

一、授权流程

在具体做GitHub授权登录之前，咱们再简单回顾一下OAuth2.0授权码模式的授权流程，如果 fire 网站允许 用GitHub 账号登录，流程大致如下图。

在这里插入图片描述

用户想用GitHub 账号去登录 fire 网站：

• fire 网站先让用户跳转到 GitHub 进行授权，会弹出一个授权框。
• 用户同意后，GitHub 会根据redirect_uri 重定向回 fire 网站，同时返回一个授权码code。
• fire 网站使用授权码和客户端密匙client_secret，向 GitHub 请求令牌token，检验通过返回令牌。
• 最后fire 网站向GitHub 请求数据，每次调用 GitHub 的 API 都要带上令牌。

二、身份注册

梳理完授权逻辑，接下来我们还有一些准备工作。

要想得到一个网站的OAuth授权，必须要到它的网站进行身份注册，拿到应用的身份识别码 ClientID 和 ClientSecret。

注册 传送门 https://github.com/settings/applications/1334665，有几个必填项。

• Application name：我们的应用名；
• Homepage URL：应用主页链接；
• Authorization callback URL：这个是github 回调我们项目的地址，用来获取授权码和令牌。

提交后会看到就可以看到客户端ClientID 和客户端密匙ClientSecret，到这我们的准备工作就完事了。

在这里插入图片描述

三、授权开发

1、获取授权码

为了更好的看效果，获取授权码我处理的比较粗暴，直接在JS里拼装好了授权链接，但实际工作开发中一定要考虑到安全问题。

https://github.com/login/oauth/authorize?
client_id=ad41c05c211421c659db&
redirect_uri=http://47.93.6.5:8080/authorize/redirect

前端 vue 的逻辑也非常简单，只需要 window.location.href 重定向一下。