详解 Github App 的玩法

LoftySoul 发布于2019-08-23 17:52 / 1979人阅读

摘要：之前在使用搭建博客平台的时候，研究过一番如何取得授权并调用的办法。后来经过研究，总算找到了这种更为优雅的办法。网站通过上的授权码往取回。要完成上述的流程，首先必须先注册一个。此时通过授权的仓库都可以被用户通过进行读写操作了。

之前在使用 Github issues 搭建博客平台的时候，研究过一番如何取得 Github 授权并调用 API 的办法。后来选择了较简单的账号密码和 Token 的方法。但是有读者反馈这样的操作依然稍显麻烦，且在第三方的页面输入账号密码总感觉不安全。后来经过研究，总算找到了 Github App 这种更为优雅的办法。

什么是 Github App

要回答这个问题，可以直接套用官方文档的说法：

GitHub Apps are first-class actors within GitHub. A GitHub App acts on its own behalf, taking actions via the API directly using its own identity, which means you don"t need to maintain a bot or service account as a separate user.

简单翻译一下，就是 Github App 可以通过 Github 提供的认证信息去调用 Github API。

细心的读者会发现，Github 还提供了一个叫做“OAuth App”的东西，它的使用方式和 Github App 非常类似，最大的不同点是 OAuth App 所获取的权限都是固定且只读的，用户只能读取固定的数据而不能修改数据；而 Github App 几乎可以获取Github提供的所有功能权限，且所获取的权限可以被设定为“只读”，“可读可写”和“禁止访问”，对于权限的授权粒度会更细。

获取了对某些操作的权限之后，我们就可以使用这些权限去搭建一个独立的 App，比如一个第三方的 Github 客户端等等，这也是 Github App 的实用之处。

第三方登录的原理

前文提到，Github App 可以免去用户在第三方页面输入账号密码或者 Token 的操作而完成授权，那么它是怎么做到的呢？其实说白了，它也是一种 OAuth 登录的方式，只不过把获取 Token 的方式从“用户输入”变成“由 Github 提供”。

下面介绍这种登录方式的流程：

A 网站跳转到 Github 的授权页面。

Github 授权页面询问用户：“是否允许A网站获取下列权限”，用户点击“允许”，取得授权码。

Github 授权页面重定向回 A 网站，同时在URL 上带上授权码。

A 网站通过 URL 上的授权码往 Github 取回 Token。

A 网站使用这个 Token 去调用 Github API。

要完成上述的流程，首先必须先注册一个 Github App。

注册 Github App

进入 Github主页，点击用户头像，找到 Setting/Developer settings/Github Apps，然后点击“New Github App”，即可进入编辑界面：

依次填入名称（此处为 SOMEONE:BLOG ）、描述、主页 URL 以后，关键要在User authorization callback URL填入获取授权后的回调地址，然后在Permissions里面设置一些需要用到的 API 读写能力。如果你希望这个 APP 只能自己用，那么使用默认的Only on this account，否则就选择Any account，最后点击Create Github App即可。

操作成功后，就可以看到这个 APP 的信息了：

其中的 Client ID 和 Client secret 就是这个应用的身份识别码，需要记下来。

Github App 注册完毕，接下来就需要第三方网站使用这个 APP 的 Client ID 去找 Github 要授权码了。

获取授权码

第三方网站要获取授权码，只需要让页面跳转到 Github 授权页即可，其中需要在 URL 中携带两个参数，分别是 Client ID 和 Redirect URL。

const CLIENT_ID = "app 的 client id"
const REDIRECT_URL = "app 的 redirect_url"

location.href = `https://github.com/login/oauth/authorize?` + 
`client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URL}`

跳转后，Github 会询问用户是否允许这个 APP 获取某些权限：

用户确定后，会带着授权码重定向到给定的回调地址:

这时候，第三方页面（这里是 localhost:8080）已经拿到了授权码，接下来就需要凭借这个授权码以及 APP 的 Client ID 和 Client secret 去兑换 Token 了。

兑换 Token

兑换 Token 的代码如下：

router.post("/oauth", async function (ctx, next) {
  const { clientID = CLIENT_ID, clientSecret = CLIENT_SECRET, code } = ctx.request.body
  const { status, data } = await axios({
    method: "post",
    url: "http://github.com/login/oauth/access_token?" +
    `client_id=${clientID}&` +
    `client_secret=${clientSecret}&` +
    `code=${code}`,
    headers: {
      accept: "application/json"
    }
  }).catch(e => e.response)
  ctx.body = { status, data }
})

由于跨域限制，所以这部分的代码必须通过服务端实现，换句话说，A 网站拿到授权码以后，需要发往这个服务端，由服务端获取 Token 后再重新返回给 A 网站。

A 网站拿到服务端返回的 Token 以后，就可以通过设置 Header 的方式在调用 Github API 的时候使用了：

"Authorization": `Bearer ${Token}`

到目前为止，基本已经 OK 了，但还有一个很大的问题，就是目前的 Token 所拿到的数据都是“只读”的，并不能对某个 Github 仓库进行任何提交或修改的操作——这是因为此 Github APP 还未被仓库所安装，这也是和 OAuth APP 最大的不同。

安装 Github APP

以我的博客平台 jrainlau.github.io 为例，如果希望用户能够通过 API 对某条 issue 发起评论等操做，我需要在这个仓库里安装我的 Github APP：

进入 Github APP 编辑页 Setting/Developer settings/Github Apps/SOMEONE:BLOG，找到左侧的 Install App，然后选择你的账户去安装：

你可以选择账户下的所有仓库或者仅某个仓库去使用这个 APP。点击授权以后，Github APP 安装完毕。此时通过授权的仓库都可以被用户通过 API 进行读写操作了。

在博客平台里，通过这个 APP 评论的用户，其外观上的体现也会标注来自 Github APP：

参考资料

GitHub OAuth 第三方登录示例教程 ——阮一峰

idc机房托管专线服务阿里云的玩法云计算的1024种玩法 GitHub 开源的小工具「GitHub github的服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104270.html

详解 Github App 的玩法

摘要：之前在使用搭建博客平台的时候，研究过一番如何取得授权并调用的办法。后来经过研究，总算找到了这种更为优雅的办法。网站通过上的授权码往取回。要完成上述的流程，首先必须先注册一个。此时通过授权的仓库都可以被用户通过进行读写操作了。 showImg(https://segmentfault.com/img/remote/1460000019343854?w=1200&h=600); 之前在使用...

vboy1010 2019-08-05 17:08 评论0 收藏0
游戏开发

摘要：工欲善其事必先利其器游戏环境对比发表算法在游戏上超过人类之后，游戏研究迅速成为了研究热点。当然这不是网络游戏服务器架构概述一架构模型现代电子游戏，基本上都会使用一定的网络功能。每个程序员都需要知道一些游戏网络知识本文主要针对游戏的网络设计，在文章中目前主流的网络游戏实现方案都有讲解。从Peer-to-Peer 帧同步，客户端/服务器（c/s架构），客户端预测（Client-Side...

Enlightenment 2019-08-21 18:45 评论0 收藏0
小程序·云开发的云函数路由高级玩法

摘要：甚至如果你的小程序的后台逻辑不复杂，请求量不是特别大，完全可以在云函数里面做一个单一的微服务，根据路由来处理任务。介绍及用法为了方便大家试用，咱们腾讯云团队开发了，云函数路由管理库方便大家使用。李成熙，腾讯云高级工程师。2014年度毕业加入腾讯AlloyTeam，先后负责过QQ群、花样直播、腾讯文档等项目。2018年加入腾讯云云开发团队。专注于性能优化、工程化和小程序服务。微博 | ...

ASCH 2019-08-26 12:21 评论0 收藏0
阿里云前端周刊 - 第 32 期

摘要：有赞全链路压测方案设计与实施详解有赞在双十一之前完成了全链路压测方案，并把它用于大促的扩容和容量验证，取得错的成果。实现外部系统与苏宁的完美对接，使业务的处理更加高效便捷。推荐 1. Preact：一个备胎的自我修养 https://zhuanlan.zhihu.com/p/... 前一段时间由于React Licence的问题，团队内部积极的探索React的替代方案，同时考虑到之后...

LuDongWei 2019-08-21 17:49 评论0 收藏0
阿里云前端周刊 - 第 32 期

摘要：有赞全链路压测方案设计与实施详解有赞在双十一之前完成了全链路压测方案，并把它用于大促的扩容和容量验证，取得错的成果。实现外部系统与苏宁的完美对接，使业务的处理更加高效便捷。推荐 1. Preact：一个备胎的自我修养 https://zhuanlan.zhihu.com/p/... 前一段时间由于React Licence的问题，团队内部积极的探索React的替代方案，同时考虑到之后...

史占广 2019-08-05 12:28 评论0 收藏0