前面我們講過我們自己設計的評論系統。多次有人提議，應該加個匿名評論和第三方登入評論。本來想，自己新開的獨立部落格肯定沒什麼通路量，更不會有什麼人去評論。意外的是，還真有幾個人評論了，如果要評論還需特意去注冊。為了友善和大家交流，我覺得有必要提前把第三方登入評論做掉，說做就做
前言廢話
《一步步開發自己的部落格》這個系列已經好久沒更新了，看我部落格的人都知道我最近在學習javascript。并不是說不更新"嗨-部落格"了，而現在學習javascript就是了為了更好的寫好"嗨-部落格"。其實，這是個"死循環"。系統學習javascript是為了更好的寫好"嗨部落格"，而寫"嗨部落格"同樣也是為了發現自己哪些地方不足進而加以學習。打算寫完javascript系列後，把"嗨部落格"的前端好好的重構重構，現在的頁面也太矬了一點。
已經好久沒有寫這樣的"廢話"了，最近的javascript系列也是，要麼直接進入主題，要麼直接用demo引入。自以為這樣的"幹貨"大家會更加喜歡。其實不然，我們很多的時候并不是那麼喜歡純技術，偶爾潤潤色、扯扯淡可能更容易接受。
搞技術的時間真的是不夠用啊，青春都獻給了無盡的知識吸收。前段日子買了kindle下載下傳了很多"課外書"，有心理的、哲學的、小說等等，然發現并沒有多少時間可以用來消費。每天都在給自己敲警鐘，想拿高薪就的好好學習，前端這麼菜，趕緊把《javascript進階程式設計》看完并用部落格記錄總結。唉~~一個星期又一個星期的過去了，現在才第六篇閉包，後面還有好多呢。不行，得加快速度。（本想看看課外書的，最終也隻是想想）。時間都去哪兒了，時間都獻給了技術。
還是不抱怨了，時間隻有那麼多，我們能做的就是怎樣最有效的利用。廢話就到此結束，進入今天的主題。
-------------------------------------------以上廢話分割線------------------------------------------
前面我們講過我們自己設計的評論系統。多次有人提議，應該加個匿名評論和第三方登入評論。本來想，自己新開的獨立部落格肯定沒什麼通路量，更不會有什麼人去評論。意外的是，還真有幾個人評論了，如果要評論還需特意去注冊。為了友善和大家交流，我覺得有必要提前把第三方登入評論做掉，說做就做。
一、第三方授權登入
什麼是第三方授權登入，就是一些大家都會有的帳号如QQ、微信、淘寶、微網誌等賬戶。通過那些巨頭公司提供的api直接實作登入。
當然，我們是不可能得到你的使用者名和密碼的。不了解的人，可能會存在這個疑慮。我們可以通過第三方授權登入得到如昵稱、性别、注冊位址、年齡、頭像等基本資訊。當然，我們也可以得到你賬戶因為的唯一編碼，就是OAuthId。什麼是OAuth技術？大家自行了解，這裡就不細講了。
二、Demo分析
我這裡主要是做了QQ和新浪微網誌的授權登入，其他的沒弄了。因為，現在的網民基本上人手幾個QQ号，其實有QQ授權就完全足夠了。但是，避免有些人疑惑安全問題，而使用平時不常用的微網誌，是以還加了一個微網誌授權。
這裡主要是參考了園友天真的好藍啊（直接下demo把，原文連結好像被原部落客删掉了）的博文，說是參考，其實是完全拿來主義。因為他寫得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" class="but_open" 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。
好了，暫時問題就需要這麼些，先記錄到這裡了。
-----------------------------------------更新20171024---------------------------------------------
如果非得ajax之後打開新頁面，而不被攔截。可以：
<script type="text/javascript">
$("button").click(function () {
var newPage = window.open();
$.get("HtmlPage2.html", null, function () {
newPage.location.href = "http://www.baidu.com";
});
});
</script> -------------------------------------------以下廢話分割線------------------------------------------
原本計劃寫完這篇博文繼續我的javascript學習之路。然，因為一些個人原因想換工作。然後想要拿到自己想要的薪資，就必須面試能夠順利。面試要順利，就要有豐富的項目經驗和深厚的知識積累。是以，不得不停下javascript這個系列，暫時先備戰面試。（本來打算堅持繼續學習javascript系列的，經Learning hard的提醒，現在确實應該備戰一下）
決定再開一個系列《備戰面試之深入了解XXX》，暫定主題委托和事件、反射、多線程、依賴注入和控制反轉、設計模式等。
其實像上面的這些主題說不會吧，平時要用，一些基本的還是可以用的來。要是面試真正問起細節和原理，還真不知道了。特别是設計模式，一般的代碼程式設計，我還真沒用過什麼所謂的設計模式。當然，我也确實不了解。趁着這次統統過一遍吧。
其實，我覺得我們都應該做好随時跳槽的心理準備。這樣，我們時刻都是在準備着，不至于安樂于現狀。最後送大家一句話，機會總是給有準備的人。
示範位址：http://www.haojima.net/UserManage/Login
部落格源碼：http://git.oschina.net/zhaopeiym/Hi-Blogs
如果您有更好的處理方式，希望不要吝啬賜教。
歡迎加入開源部落格Q群：469075305 (入群須知)
一步步開發自己的部落格 .NET版系列：http://www.cnblogs.com/zhaopei/tag/Hi-Blogs/
本文連結：http://www.cnblogs.com/zhaopei/p/5044935.html
如果本文對您有那麼一點點用處，那麼請您輕輕點個贊，給我繼續作文的動力。
- 學習本是一個不斷抄襲、模仿、練習、創新的過程。
- 雖然，園中已有本人無法超越的同主題博文，為什麼還是要寫。
- 對于自己，博文隻是總結。在總結的過程發現問題，解決問題。
- 對于他人，在此過程如果還能附帶幫助他人，那就再好不過了。
- 由于部落客能力有限，文中可能存在描述不正确，歡迎指正、補充！
- 感謝您的閱讀。如果文章對您有用，那麼請輕輕點個贊，以資鼓勵。
- 工控物聯Q群：995475200