GitHub OAuth App怎么跳转到用户授权之前的页面？

最近完成了博客的评论系统，第三方登录使用了GitHub OAuth App。至于教程或者示例，随便谷歌、百度一下都是一大片，或许正是因为查的太多了，以至于所有的教程都在告诉你怎么注册、怎么调用API、怎么用XXX后端获取数据等等等等…

但是他们好像都忽略了一个问题：

—— 在获取Token或者用户信息之后，客户端要怎么跳转回用户授权之前的页面？

先声明一下，这篇文章不会教你怎么注册或使用GitHub OAuth App，如果你还不熟悉它，可以先阅读一下官方文档，如果你不太喜欢英语，可以看看阮一峰的GitHub OAuth 第三方登录示例教程或者其他大佬/论坛的教程。

好了，先看一下GitHub OAuth的流程：

1. 浏览器带 client_id 和 redirect_uri 跳转到GitHub
2. 如果用户同意授权，GitHub会返回一个code参数，形式为 https://redirect_uri?code=xxxxxxxxxxxxx
3. 客户端带code client_id 和 client_secret发送POST请求到GitHub获取 token
4. 客户端使用 token 获取用户信息

如果用URL的跳转来表现的话大概就是这样：

blog.com/post/01.html
    ---->
https://github.com/login/oauth/authorize?client_id=xxx&redirect_uri=xxx
    ---->
api.blog.com/?code=xxx        # api.blog.com就是你填在GitHub OAuth App的Callback URL
    ----> POST
https://github.com/login/oauth/access_token
    ---->
???

对！问题来了！

怎么跳转？跳哪里？

作为开发者，我肯定是想跳回blog.com/post/01.html实现无缝体验对吧…

然而就这个问题，不管是CSDN，还是Stack Overflow，甚至官方文档，

全都没有！

终于，在死了不知道多少脑细胞后，我想出了如下实现过程：

1. 假设用户在blog.com/post/01.html这张页面上点击了GitHub登录按钮，这个登录按钮不要直接跳转到GitHub授权页面，先跳转到你自己设置的GitHub OAuth App的Callback URL，这里假设是api.blog.com，把当前页面的URL传给api.blog.com，例如：api.blog.com?url=blog.com/post/01.html

2. 这样在跳转到api.blog.com的时候，你就知道了点击登录的是哪张页面了，这时候可以把传过来URL记录到localStorage或者Cookie，甚至是后端的Session，反正不管怎么样，找个地方记录一下就可以了，因为这时候我们还要跳转到github.com，不记录的话就丢失了数据

3. 用户在github.com完成授权后，还是会跳转到api.blog.com，因为跳转前记录了授权前传来的页面URL，在你获取到Token之后，你可以把URL再读取出来：

   // localStorage 这么用 window.localStorage.getItem('URL'); // Cookie 这么用 // 这个function w3c抄来的 function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } getCookie('URL');

获取用户信息的请求可以在api.blog.com做，也可以像我一样带着token回到blog.com/post/01.html去做。

因为自己的博客URL特殊，又是Hash又是URL Param(原本是单页App，现在已调整为纯静态，但是不影响思路)，而且也不想用户在回到页面的时候，URL后面跟着一个长长的token，我还新加了一个跳转页面 blog.com/r.html，这个页面负责接收token和跳转的页面，将token写入浏览器存储（上面说的localStorage或者Cookie）之后再进行跳转，在blog.com/post/01.html完成用户信息的调用后删除记录在浏览器存储里面的token。

虽然流程跑通了，但是我还是很好奇为什么GitHub官方文档里完全找不到这一部分的说明，在搜索引擎上也找不到相关文章…

随便吧，现在看起来，只能这样解决…