你的位置:首页 > ASP.net教程

[ASP.net教程]一步步开发自己的博客 番外篇(8、第三方登录及问题记录)


前言废话

《一步步开发自己的博客》这个系列已经好久没更新了,看我博客的人都知道我最近在学习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、http://www.haojima.net 。

这样问题就来了,我们在上面设置授权登录时需要设置一个回调地址:如 http:haojima.net/hi_login.html ,这样我们在访问 http://www.haojima.net 是授权登录,而回调地址是没有带www。本来这样也是没有问题的,可是我的处理是,在回调页面设置父页面的href如: window.opener.location.href = "/" ;这样 window.opener.location.href 访问的其实就是 www.haojima.net 域名,而我们回调页面地址域名是 haojima.net 。这里就会自己报错了,错误信息每个浏览器都不同,原因就是跨域了。跨域了就不允许通信。这也是浏览器的一种安全机制。

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

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

方案一

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

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

方案二

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

这样我们访问如: http://haojima.net/UserManage/Login 就自动301到了 http://www.haojima.net/UserManage/Login ,如此一来我们只用设置对应的域名下的回调地址了。

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

<system.webServer>  <!--重定向到带www的Url--> <rewrite>  <rules>   <rule name="WWW Redirect" stopProcessing="true">    <match url=".*" />    <conditions>     <add input="{HTTP_HOST}" pattern="^haojima.net$" />    </conditions>    <action type="Redirect" url="http://www.haojima.net/{R:0}"    redirectType="Permanent" />   </rule>  </rules> </rewrite>....

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

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

五、问题三:弹框拦截

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

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

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

<input type="button" value="but" onclick="but()"/><script type="text/javascript">     function but() {    $.get("temp.html", null, function () {//这里就是回调自动执行函数      window.open("temp.html", 'newWindow', 'height=400, width=600, top=100, left=300, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');    });  }    </script>

那我们怎么解决这个问题呢?手动触发弹出就不会拦截了。

<input type="button" value="but" /><script type="text/javascript">  $(function () {    $.get("temp.html", null, function () {      $(".but_open").click(function () {//这里需要手动点击才会触发        window.open("temp.html", 'newWindow', 'height=400, width=600, top=100, left=300, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');      })    });  });</script>

页面上看起来效果都是点击,但是这样实现的话,就不会被拦截了。有人会问,为什么要发ajax请求,项目里面需要请求后的结果做为open的url。

好了,暂时问题就需要这么些,先记录到这里了。

-------------------------------------------以下废话分割线------------------------------------------

原本计划写完这篇博文继续我的javascript学习之路。然,因为一些个人原因想换工作。然后想要拿到自己想要的薪资,就必须面试能够顺利。面试要顺利,就要有丰富的项目经验和深厚的知识积累。所以,不得不停下javascript这个系列,暂时先备战面试。(本来打算坚持继续学习javascript系列的,经Learning hard的提醒,现在确实应该备战一下)

决定再开一个系列《备战面试之深入理解XXX》,暂定主题委托和事件、反射、多线程、依赖注入和控制反转、设计模式等。

其实像上面的这些主题说不会吧,平时要用,一些基本的还是可以用的来。要是面试真正问起细节和原理,还真不知道了。特别是设计模式,一般的代码编程,我还真没用过什么所谓的设计模式。当然,我也确实不了解。趁着这次统统过一遍吧。

其实,我觉得我们都应该做好随时跳槽的心理准备。这样,我们时刻都是在准备着,不至于安乐于现状。最后送大家一句话,机会总是给有准备的人

 

演示地址:http://www.haojima.net/UserManage/Login    

如果您有更好的处理方式,希望不要吝啬赐教。

欢迎加入开源博客Q群:469075305 (入群须知)

一步步开发自己的博客 .NET版系列:http://www.cnblogs.com/zhaopei/tag/Hi-Blogs/

本文链接:http://www.cnblogs.com/zhaopei/p/5044935.html

如果本文对您有那么一点点用处,那么请您轻轻点个赞,给我继续作文的动力。