当前位置: 首页 > Web前端 > HTML5

GithubApp玩法详解

时间:2023-04-05 13:11:43 HTML5

在使用Githubissues搭建博客平台之前,研究了如何获取Github授权和调用API。后来选择了更简单的账号密码和Token方式。不过也有读者反映,这样的操作还是有点麻烦,总觉得在第三方页面输入账号密码不安全。后来经过研究,终于找到了一个更优雅的GithubApp方式。什么是GithubApp要回答这个问题,可以直接套用官方文档:GitHubAppsarefirst-classactorswithinGitHub。GitHub应用代表自己行事,直接使用自己的身份通过API采取行动,这意味着您无需将机器人或服务帐户作为单独的用户进行维护。简单翻译一下,GithubApp可以使用Github提供的认证信息来调用GithubAPI。细心的读者会发现,Github也提供了一个叫做“OAuthApp”的东西,这个东西和GithubApp非常相似,最大的区别就是OAuthApp获取的权限是固定的,只读的,用户只能读取固定的数据,不能读取修改数据;GithubApp可以获得几乎所有Github提供的功能权限,并且获取的权限可以设置为“只读”、“可读写”和“禁止访问”,权限的授权粒度会更细。在获得了某些操作的权限后,我们就可以利用这些权限来构建一个独立的app,比如第三方的Github客户端等,这也是GithubApp的实用性所在。第三方登录的原理上面说到GithubApp不需要用户在第三方页面输入账号密码或者Token就可以完成授权,那么它是怎么做到的呢?其实说白了也是一种OAuth登录的方式,只不过把Token的获取方式从“用户输入”改为了“Github提供”。这种登录方式的流程如下:网站A跳转到Github的授权页面。Github授权页面询问用户:“是否允许网站A获取以下权限?”用户点击“允许”获取授权码。Github授权页面使用URL上的授权代码重定向回网站A。网站A通过URL上的授权码从Github上取回Token。网站A使用这个Token调用GithubAPI。要完成上述过程,首先要注册一个GithubApp。注册GithubApp进入Github主页,点击用户头像,找到Settings/Developersettings/GithubApps,然后点击“NewGithubApp”进入编辑界面:填写名称(这里是SOMEONE:BLOG),描述,而主页依次在URL之后,关键是在User授权回调URL中填写获得授权后的回调地址,然后在Permissions中设置一些需要的API读写能力。如果你想让这个APP只给自己使用,那就使用默认的Onlyonthisaccount,否则选择Anyaccount,最后点击CreateGithubApp。运行成功后,可以看到这个APP的信息:ClientID和Clientsecret是这个应用的标识码,需要记下来。GithubApp注册后,第三方网站需要使用本APP的ClientID从Github上找一个授权码。获取授权码在第三方网站上获取授权码,只需要将页面重定向到Github授权页面,URL中需要携带两个参数,ClientID和RedirectURL。constCLIENT_ID='appclientid'constREDIRECT_URL='appredirect_url'location.href=`https://github.com/login/oauth/authorize?`+`client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URL}`跳转后Github会询问用户是否允许该APP获取某些权限:用户确认后,会重定向到给定的回调地址,并附上授权码:此时第三方页面(这里是localhost:8080)现在你已经获得了授权码,接下来需要使用这个授权码和APP的ClientID和Clientsecret来兑换Token。Token交换Token交换代码如下:router.post('/oauth',asyncfunction(ctx,next){const{clientID=CLIENT_ID,clientSecret=CLIENT_SECRET,code}=ctx.request.bodyconst{status,data}=awaitaxios({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:'Authorization':`Bearer${Token}`调用GithubAPI时就可以使用了问题是当前Token获取的数据是“只读”的,不能提交或修改到某个Github仓库——这是因为GithubAPP还没有被仓库注册。安装,这也是与OAuthAPP最大的区别。安装GithubAPP以我的博客平台jrainlau.github.io为例。如果我想让用户通过API评论一个issue,我需要在这个仓库里安装我的GithubAPP:进入GithubAPP编辑页面Setting/Developersettings/GithubApps/SOMEONE:BLOG,找到左边的InstallApp,然后选择你的账号安装:你可以选择账号下的所有仓库或者只选择某个仓库来使用这个APP。点击Authorize后,GithubAPP安装完成。至此,用户可以通过API对授权仓库进行读写操作。在博客平台上,通过本APP发表评论的用户也会从GithubAPP的外观上进行标注:参考GitHubOAuth第三方登录示例教程——阮一峰