原由
一直在开发如何应对信息过载里说到的工具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上,再做后续处理。
回调是不能用本地的地圵的,且为了改动最小不影响原有网站功能,这一块不能动。
所以难点主要在这里,先来理一理会遇到的问题:
- 一但点了Oauth的按钮,进到对应的网站(github qq twitter ...) 登录,再回调回server的某个url,此时Cordova打开的已经是外部网站了,再也无法访问
file://
打头的本地资源了,这是浏览器一去不回头的安全机制,出去可以,回来不行了。这样变成直接用Codova访问网站了,包app没什么意义了。 - 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。