一步步開發自己的博客 番外篇（8、第三方登錄及問題記錄）

前言廢話

《一步步開發自己的博客》這個系列已經好久沒更新了，看我博客的人都知道我最近在學習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

如果本文對您有那么一點點用處，那么請您輕輕點個贊，給我繼續作文的動力。