在Cordova开发的app里复用web Oauth登录功能

原由

一直在开发如何应对信息过载里说到的工具Follow Center。

因为都是社交媒体的碎片内容，没必要端坐在电脑面前来看，随时打开手机，时不时刷一刷，看看美女，收藏需要细看和延申阅请的内容，这才是最有效的方式。

原网页简单做了响应式，但用手机浏览器打开慢且chrome自动数据缓存记录总会有些妨碍。

用Cordova做app，所有的js和html都打包到app里了，用起来很快。但是原本的登录是个问题，我懒，所以要想办法来复用原本做好的oauth，最好没什么改动就能用。
认证持有问题

---

原本的网页，Oauth登录成功后，server会设置一个cookie过来，client持有cookie来标记自己已登录了。
Cordova的app其实都是本地的文件，file://的方试来访问的，启用cookie不是不行，但是非常非常的麻烦，不信邪的同学自行去stackoverflow翻吧。
最后决定用Http Basic Authentication的方试来记录已登录，Follow Center早已启用了https，安全方面是没什么问题的了。

加密过的key存在localstorage里。
server的认证要对应改一改，除了从cookie里找，还要从headers也找一找（用的是tornado，这里需要帮忙的给我留言)。
Oauth登录跳转问题

---

网站的Oauth的服务自然是针对一个网圵的，比如用github的Oauth，最后还是加上code，回调到我的网站的一个url上，再做后续处理。
回调是不能用本地的地圵的，且为了改动最小不影响原有网站功能，这一块不能动。
所以难点主要在这里，先来理一理会遇到的问题：

1. 一但点了Oauth的按钮，进到对应的网站(github qq twitter ...) 登录，再回调回server的某个url，此时Cordova打开的已经是外部网站了，再也无法访问file://打头的本地资源了，这是浏览器一去不回头的安全机制，出去可以，回来不行了。这样变成直接用Codova访问网站了，包app没什么意义了。
2. server 回调完成，取到了user的key，要告诉Cordova，让其设置到localstorage里，但是怎么告诉呢？

对问题1，因为出去就回不来了，自然不能用主进程来打开Oauth，好在Cordova有个插件cordova-plugin-inappbrowser，用这个插件可以打开一个子页，Oauth完成后关闭子页就可以，不会出现出去回不来的情况。
点击Oauth按钮后，调用这段代码：

  function login(oauth) {
    var ref = cordova.InAppBrowser.open('https://follow.center/'+ oauth, '_blank', 'location=no,hidden=yes');
    ref.addEventListener('loadstop', function() {
        ref.show()
        ref.executeScript({ code: "secure_user_id" }, 
          function (params) {
            window.localStorage.setItem('user_id', params[0]);
            ref.close();
            ref = undefined;
            window.location = 'index.html'
          }
        );
    });
  }

loadstop指在子页加载完成后，触发的事件。加上对应的回调函数来搞定第2个问题。
ref.show()把子页显示出来，比如这时需要用户输入github的用户名密码来授权Oauth。
ref.executeScript指在子页里嵌入一段js代码，并可以又有对应的回调函数。user的key就通过这里的办法来传递回来，并设置到localStorage里。
这样第2个问题也搞定了。

server端也要对应改一下，检测到是手机过来的请求，就返回带js code的html，如果是，和以前一样设置cookie，重定向页面就可以了。

如果要实际试一下，可以下follow_center.apk，不过我只调通了github的oauth。