前言废话

《一步步开发自己的博客》这个系列已经好久没更新了，看我博客的人都知道我最近在学习javascript。并不是说不更新"嗨-博客"了，而现在学习javascript就是了为了更好的写好"嗨-博客"。其实，这是个"死循环"。系统学习javascript是为了更好的写好"嗨博客"，而写"嗨博客"同样也是为了发现自己哪些地方不足进而加以学习。打算写完javascript系列后，把"嗨博客"的前端好好的重构重构，现在的页面也太矬了一点。

已经好久没有写这样的"废话"了，最近的javascript系列也是，要么直接进入主题，要么直接用demo引入。自以为这样的"干货"大家会更加喜欢。其实不然，我们很多的时候并不是那么喜欢纯技术，偶尔润润色、扯扯淡可能更容易接受。

搞技术的时间真的是不够用啊，青春都献给了无尽的知识吸收。前段日子买了kindle下载了很多"课外书"，有心理的、哲学的、小说等等，然发现并没有多少时间可以用来消费。每天都在给自己敲警钟，想拿高薪就的好好学习，前端这么菜，赶紧把《javascript高级程序设计》看完并用博客记录总结。唉~~一个星期又一个星期的过去了，现在才第六篇闭包，后面还有好多呢。不行，得加快速度。（本想看看课外书的，最终也只是想想）。时间都去哪儿了，时间都献给了技术。

还是不抱怨了，时间只有那么多，我们能做的就是怎样最有效的利用。废话就到此结束，进入今天的主题。

-------------------------------------------以上废话分割线------------------------------------------

前面我们讲过我们自己设计的评论系统。多次有人提议，应该加个匿名评论和第三方登录评论。本来想，自己新开的独立博客肯定没什么访问量，更不会有什么人去评论。意外的是，还真有几个人评论了，如果要评论还需特意去注册。为了方便和大家交流，我觉得有必要提前把第三方登录评论做掉，说做就做。

一、第三方授权登录

什么是第三方授权登录，就是一些大家都会有的帐号如QQ、微信、淘宝、微博等账户。通过那些巨头公司提供的api直接实现登录。

当然，我们是不可能得到你的用户名和密码的。不了解的人，可能会存在这个疑虑。我们可以通过第三方授权登录得到如昵称、性别、注册地址、年龄、头像等基本信息。当然，我们也可以得到你账户因为的唯一编码，就是OAuthId。什么是OAuth技术？大家自行了解，这里就不细讲了。

二、Demo分析

我这里主要是做了QQ和新浪微博的授权登录，其他的没弄了。因为，现在的网民基本上人手几个QQ号，其实有QQ授权就完全足够了。但是，避免有些人疑惑安全问题，而使用平时不常用的微博，所以还加了一个微博授权。

这里主要是参考了园友天真的好蓝啊的博文，说是参考，其实是完全拿来主义。因为他写得demo完全可以直接运行了。并且内含QQ、微博、淘宝等授权登录，淘宝的我没有测试，QQ和微博是完全没问题的。

他的demo是放在github上的，下载速度比较慢。我这里提供一个网盘下载地址。

三、问题一：刷新和强制刷新

上面的demo是完全没问题的，不过在我实际使用过程中遇到了些许问题。这里和大家分享下。

首先，我们在登录成功后，会根据授权得到的用户昵称和OAuthId创建一条用户信息存数据库，并存session里面作为登录标识。接着本应该刷新当前页面，显示登录详细如：XXX登录成功。

一般我们在浏览器的用js刷新当前页面会使用 window.location.href = window.location.href; 或是 window.location.reload(); 然后会出现一下问题。

当使用 window.location.reload(); Status直接返回一个304,而使用 window.location.href = window.location.href; Size是(from cache)

显然，都使用了缓存。

根据我的理解，第一种是去服务器确认了一次缓存有效性，然后服务器给浏览器304 Not Modified而使用缓存。第二种200(from cache)直接在浏览器端使用缓存，根本就没去服务器。

不管怎么说，都是没有真正刷新而取到服务器更新的数据。我们可以使用 window.location.reload(true); //强制刷新（从服务器重新加载）

四、问题二：跨域问题

我们在域名绑定的时候一般都会直接绑定和加www绑定如： http://haojima.net、 。

这样问题就来了，我们在上面设置授权登录时需要设置一个回调地址：如  ;这样 window.opener.location.href 访问的其实就是  域名，而我们回调页面地址域名是 haojima.net 。这里就会自己报错了，错误信息每个浏览器都不同，原因就是跨域了。跨域了就不允许通信。这也是浏览器的一种安全机制。

什么叫跨域？如下图，我们就是这种情况。

那我们如何解决这个问题。

方案一

我们可以设置两个回调地址，以QQ授权登录为例。

然后我们程序里面判断，如果当前访问地址带有www，那么我们就使用带有www的回调地址，反之则使用没有www的回调地址。

方案二

我们可以直接把网站所有url域名统一指向带www的域名或是统一指向不带www的域名。

这样我们访问如：  ，如此一来我们只用设置对应的域名下的回调地址了。

我们可以直接在iis里面设置，可以在web.config里面设置。因为我使用的免费阿里云，没有iis只能设置config了。

redirectType ....

以上两种方案都可以完美解决我们遇到的跨域问题，不过这里又有个疑问。我们是把www301到不带www的url，还是把不带www301到带www的url。

所以，我们还是都带上www。我看博客园就是都执行了www，还有一些大的网站都是指向了www。

五、问题三：弹框拦截

什么是弹窗？就是我们从当前页面点击一个按钮或标签的时候打开一个新的页面。如：

遇到这种问题，我们一般都会骂坑爹的怎么拦截了，我就是想要弹框怎么办。像这种发到网上的页面，有很多人没注意这个拦截提示又或者看到了不知道怎么弹出来，那岂不是悲剧了。

其实也是只用安全措施把，避免有人恶意在网页不停的弹窗。为什么会出现这种拦截，因为我们是让代码自动弹的如：