使用 Popup Window 做新浪微博登入與授權

最近做了一的大陸那邊的案子，需要串新浪微博的 API，記錄一下最後採用的方法，以免之後忘了。基本的問題是：前端(不管 js 或 as)按下開始/登入按鈕， Popup window 做微博登入與授權，然後接著登入後的遊戲。

首先要到新浪微博開放平台註冊為微博開發者。麻煩的地方在需要有大陸那邊的手機號碼接收認證碼後兩分鐘內輸入才能完成註冊。接著到它的管理中心開一個"應用"，若是之後要採用 js SDK 的站外應用，則要開一個"網站"，分別由左邊的"我的應用"與"我的網站"進入開設。開設完可以找到 App Key 與 App Secret，這個後面需要用到。

接著進入程式開發的部分。一開始因為前端是 Flash 遊戲，所以理所當然找了一下 Flash SDK 。試用了一下發現沒辦法運作，主要問題應該在它的 proxy.php ，作者的說明是這程式要放在支援 https 連線以及 PHP 的 Server 上，但怎麼試都沒用，最後放棄。

第二次嘗試 Javascript SDK ，要注意的是如果是站外的網站在一開始要選擇開設"我的網站"，這在前面有提到。這次登入成功了，但是，在 IE8 (含)以前的瀏覽器登入後沒有反應，也沒有對取消登入偵測的方法，同時有些 API 是不支援的，例如 upload 圖片，需要另外靠 PHP SDK 來完成，所以最後也是放棄。

最後來嘗試 PHP SDK　，一開始不想用它的原因是它的登入流程通常是跳轉到一個登入網址，登入受權完再導回我們指定的 callback 頁面，然後再轉到登入後的頁面，這跟我們一開始想用 Popup Window 的方式相違背。但這點可以用一些些 Javascript 來克服。 第一步請先下載 官方Demo ，按照上面的指示到應用那邊設定登入回調頁，並且打開 config.php ，輸入應用的 App Key ， App Secret ，以及回調頁網址。接著在我們的頁面(index.php)最上方加入 PHP 程式碼：

getAuthorizeURL( WB_CALLBACK_URL );
?>

作用大致上是：開啟 Session ； include 兩支程式， config.php 剛剛介紹過了是做些基本設定， saetv2.ex.class.php 是 PHP SDK 程式主要檔案；產生一個 SaeTOAuthV2 實體，登入與授權相關的功能由它負責； $code_url 則是授權的連結，等等要呼叫時用的。再來是寫幾個 Javascript function ：

當我們需要登入時呼叫 doLogin ，這時我們以 Popup Window 方式開啟前面 PHP 取得的登入授權頁，並且用 childWindow 變數來追蹤，這時我們對 Popup Window 還沒有控制權，因此使用一個 timer 去偵測 childWindow 是否關閉了，以防使用者在登入過程中關閉了 Popup Window 。偵測功能就是 checkChildWindow 。 afterLogin 與 cancelLogin 分別是登入成功與取消時要執行的功能，上面是呼叫 flash 裡面相對應的 function 去做事，若前端是 js 可直接去作相對應的操作。至於登入是否成功的程式碼則寫在 callback.php 裡面。請注意 callback.php 會出現在 Popup Window 裡，會在登入或取消時回調。這時我們要將 token 記錄到 session 裡，並且要呼叫登入後相對應的 function ，最後這時已有 Popup Window 控制權，可以直接處理視窗的關閉：

getAccessToken( 'code', $keys ) ;
 } catch (OAuthException $e) {
 }
}

if ($token) {
 $_SESSION['token'] = $token;
 setcookie( 'weibojs_'.$o->client_id, http_build_query($token) );
?>

前面 session 與 include 就不提了，接著就是將 token 存進 session ，供之後呼叫其他 API 時用。後面依照是否有 token 來判斷是否登入成功，分別呼叫 window.opener 所設定的 function ，最後關閉視窗。

登入處理完後，就可以在需要的時候呼叫 API 去做事，例如我們寫一支 upload.php 的程式來做上傳圖文發佈的動作， js 就使用 AJAX 呼叫他， as 則是使用 URLLoader 呼叫。 upload.php 程式碼如下：

upload( '測試測試', 'https://dl.dropboxusercontent.com/u/9231233/blog/131225_weibo/upload.jpg');
?>

SaeTClientV2 用來做 API 呼叫，我們使用它的 upload 方法來上傳文字與圖片。

我手上沒有 PHP Server 可以放 Demo ，有需要的請下載檔案。這是一個 flash 專案，最後發佈的檔案在 bin 資料夾裡面。照前面步驟開設完應用，修改 config.php 後就可以使用了。