2012年8月26日 星期日

[Facebook]我也要用FaceBook帳號來登入我的網站-PartII

※ 事前的準備就是先架好你的伺服器(有個Domain)、申請APP ID、了解基本的Javascript、Html語法
這一篇的重點有兩個,
(1)利用FB.login()來登入FB。
(2)使用FB.api('/me', function(response){}); 這個API來取得使用者的資訊。

有別於上一篇,使用getUserLoginStatus來取得Auth,這邊是用FB.login,取得的資訊應該是差不多的,這點,可以看FB.getLoginStatus 與 FB.login 的介紹。

程式碼應該也算是滿簡潔的,Html部分,放一個Button和Div來做為呼叫和顯示用,
Javascript的部分主要有二個:fblogin()以及fblogout()
不過在下面的範例,我沒有呼叫fblogout(),實際使用時,可以依照個人需求,加在登入->取得使用者資訊 之後自動登出。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://connect.facebook.net/zh_TW/all.js"></script>
    <title>My Facebook Login Page</title>
    <script type="text/javascript">
        // 初始化 & 登入
        function oplogin() {
            FB.init({ appId: '你的app id', status: true, cookie: true, xfbml: true, channelUrl: 'http://www.你的Domain.com.tw/channel.html' }); //appid請去FB申請應用程式
            fblogin();
        }
        function fblogin() {
            FB.login(function (response) {
                if (response.authResponse) {
                    //登入成功
                    FB.api('/me', function (response) {
                        var html = '<table>';
                        for (var key in response) {
                            html += ('<tr>' + '<th>' + key + '</th>' + '<td>' + response[key] + '</td>' + '</tr>');
                        }
                        document.getElementById('me').innerHTML = html + '</table>';
                    });
                }
                else {
                    //登入失敗
                    alert("登入失敗。");
                }
            });
        }
        //登出
        function fblogout() {
            FB.getLoginStatus(function (response) {
                if (response.status === 'connected') {
                    FB.logout(function (response) {
                        // user is now logged out
                        document.getElementById('loginform').submit();
                    });
                } else if (response.status === 'not_authorized') {
                    // the user is logged in to Facebook,
                    // but has not authenticated your app
                    FB.logout(function (response) {
                        // user is now logged out
                        alert("請重新登入!");
                    });
                } else {
                    // the user isn't logged in to Facebook.
                    alert("請重新登入!");
                }
            });
        }
    </script>
</head>
<body>
    <input type="button" id="btn2" onclick="javascript:oplogin();return false;" value="取得Facebook登入者資訊(PartII)" />
    <div id="me">
    </div>
</body>
</html>

2012年5月8日 星期二

[HTML]基礎入門,連幼稚園程度的網頁設計師都該會?!

最近的工作常常有機會和美術部門(後稱美術)合作
內容不外乎就是美術設計CSS版本,由我們的部門來套程式
舉例:留言版、活動內容、最新消息等等...

不過常常會有遇到一些我說有,你說沒有之類的怪問題,我想把幾個我認為值得記錄的問題記錄於此:

1.我(美術)的網頁怎麼變亂碼了??

這個算是滿常見的問題,由於我沒有事前就和美術約定好網頁的編碼為何,
所以,常常拿到手上的HTML檔會有複數的ChartSet設定,不外乎就是utf-8或是Big5

這個時候,我會以Index為準去修改我所提供的ASP檔編碼
初設計時,以為只要在我的ASP內頁的Meta加上Chartset="utf-8" 或 Chartset="Big5" 即可,
了不起再後端再加上
response.Charset="big5"
Session.codepage=950
或是
response.Charset="utf-8"
Session.codepage=65001
就可以解決了。
但是後來發現,這當中的奧秘不只於此,我還需要注意檔案的編碼是否符合我的需要,
這個檔案編碼方式用記事本也能夠設定,只需另存新案,並且選好你需要用的編碼方式。

2.我(美術)的透明背景去哪了?
第二常見的問題,解決的辦法在網路上也都找得到,比較單純的情形是HTML頁面裡,嵌入一個Iframe,希望這個iframe裡的背景是透明的,需要注意的部分如下:
假設我在index.html 嵌了iframe-inside.html的話
  2-1.index.html要注意:
    2-1-1.背景用圖片。
    2-1- 2.不能用backgound-color。
     2-1- 3.在iframe裡加上 allowtransparency="true"的屬性
  2-2 . iframe-index.html要注意的,就是在IE6,7,8上要正常的話,需在body的style加上 background-color:transparent

但是!!!! 另外我發現在某種情形下,透明背景會失效
那就是加上了HTML的註解(<!--這是註解的樣子-->)在<html> 標籤的前面時,會讓背景變成白色...這是為什麼呢?不知道,但我測試過後,發現只要加了就失效,移除了就正常透明..
是因為我在套ASP程式時,常常會用VS的Ctrl K+C來把文字變註解,寫Function時,除了從網頁的第一行開始之外,也會把一個Function寫成這這:
<!--功能:就是IIF-->
<%
Function HelloWorld()
      HelloWorld = "HelloWorld"
End Function
%>
所以,變成這樣,算是自找的吧......

最後的最後,把HTML的設定寫成範例供參考:
Index.html的內容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=big5" />
    <title>無標題文件</title>
    <style type="text/css">
        body
        {
            /* 注意:這邊不能設定body的background-color否則會失敗。 */
        }
    </style>
</head>
<body style="background-image:url('background.png');background-color: transparent">
    <div style=" ">
        1.背景用圖片。<br />
        2.不能用backgound-color。<br />
        3.在iframe裡加上 allowtransparency="true"的屬性。<br />
    </div>
    <iframe width="495" height="165" src="iframe-inside.html" frameborder="2" allowtransparency="true">
    </iframe>
</body>
</html>
iframe-inside.html的內容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=big5" />
    <title>無標題文件</title>
    </head>
    <body style="background-color:transparent; font-weight:bolder; color:Orange;">
    這是子頁。<br />
    要在body的style加上 background-color:transparent。<br />
    好像是在IE6,7,8才需要這樣
    </body>
    </html>
以及使用到的圖片



2012年4月2日 星期一

[VB.NET]加入HTTPS的服務參考遇到的問題

呼叫公司的驗證帳密WebService時遇到的問題
花了我一天的時間才解決,在這邊記錄一下,免得以後忘記。

主題:呼叫https開頭的WebService時,必需要做的三件事。

前言:
原本我以為,加入一個「服務參考」是一件再簡單不過的事情了
以網站為例,只要在方案總管裡,對著Root的項目按右邊,接著選「加入服務參考...」
再來只要把你的WebService路徑(EX:https://192.168.0.11/Service.asmx)輸入到路徑,按下搜尋
或是確定,基本上就沒有問題了

但這一次,算是遇到了不少問題,以下一一道來…

(1). 無法辨認的屬性 'decompressionEnabled'。請注意,屬性名稱必須區分大小寫。 (~\web.config line 182)
解決方法:到Web.Config裡,移除掉圖一的[1]所示的屬性即可。

(2). 無法載入合約 'Service.WSWEBSoap' 的端點組態區段,因為找到多個該合約的端點組態。請以名稱指示偏好的端點組態區段。
 解決方法:到Web.Config裡,移除掉圖一的[2]所示的整段節點即可。

(3). 無法利用授權 'xxx.xxx.xxx.xxx' 為 SSL/TLS 安全通道建立信任關係。
解決方法:問題的原因可以參考這裡,大意是說無法建立這個服務的授權,所以乾脆自己創造一個授權,但前提是你必需要確定,你呼叫的Service是可信任的。 這個問題花了比較多的時間找VB.NET的Solution,C#倒是滿好找的= =",所以這邊就把兩個找到的方式就列出來,因為我的專案是用vb開發的,所以c#就留待以後再測試囉。

VB.NET
1.先引用必要的類別庫:
Imports System.Net
Imports System.Security.Cryptography.X509Certificates
Imports System.Net.Security

2.自己定義一個驗證服務的副程式。
    Private Function ValidateCertificate(ByVal sender As Object, ByVal certificate As X509Certificate, ByVal chain As X509Chain, ByVal sslPolicyErrors As SslPolicyErrors) As Boolean
        'Return True to force the certificate to be accepted.
        Return True
    End Function

3.在FormLoad或是PageLoad的時間點呼叫[2]所定義的副程式,這個部分的呼叫方式,在C#那邊可能比較好理解,就是委派一個新的副程式來取代原有的驗證方法。
ServicePointManager.ServerCertificateValidationCallback = New RemoteCertificateValidationCallback(AddressOf ValidateCertificate)
--完成--

C#.NET
1.先引用必要的類別庫:
using System.Net;
using System.Security.Cryptography.X509Certificates;
using System.Net.Security;

2.自己定義一個驗證服務的副程式。
    private static bool RemoteCertificateValidate(object sender, X509Certificate cert,X509Chain chain, SslPolicyErrors error)
    {
        // trust any certificate!!!
        System.Console.WriteLine("Warning, trust any certificate");
        return true;
    }


3.只要在你要呼叫WebService的方法前加上這一段就行了,可在FormLoad或是PageLoad的時間點呼叫[2]所定義的副程式,這個部分的呼叫方式,在C#那邊可能比較好理解,就是委派一個新的副程式來取代原有的驗證方法。
ServicePointManager.ServerCertificateValidationCallback += RemoteCertificateValidate;
--完成--
圖一、問題1&2修改註記。

2012年2月2日 星期四

[Facebook]我也要用FaceBook帳號來登入我的網站

辛苦了兩天,總算找到了如何使用「新版」的Facebook API來製作



首先,要做這個之前,需要到developers.facebook申請帳號,取得APP ID
流程如下:
1.登入 developers.facebook ,如果需要獨立的帳號,請申請。
2.點選「應用程式」,並點「建立新的應用程式」。
 3.決定你的應用程式名稱
 4.輸入驗證碼。
 5.輸入你的網站是屬於哪個Domain底下(EX:如果我網站是在http://Myweb.hinet.net/XXXXX/index.htm,那我就填上http://Myweb.hinet.net/即可)。
如果上面的動作都沒有問題,那恭喜你,就可以開始寫你的網頁了,如果有任何一個地方,出現了FaceBook的貼心提醒,說你什麼不行,基本上,他都會有提示,看不懂可以上網查,或在這邊問。

接著,最好是對JavaScript與基本的Html語法都有一定程度的了解(起碼知道怎麼呼叫Function)。
最後,就是實做的了,我所使用的程式碼都是可以從FaceBookDeveloper裡找得到,只不過把他整合起來在這邊做個記錄罷了:

<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      
      <title>My Facebook Login Page</title>      
      <script>
//引入Facebook的API,需要修改的部分,就是把你在第一步取得的APP ID貼上去 
 (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/zh_TW/all.js#xfbml=1&appId=APPID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

//取得登入者的資料。
function GetStatus(){
var
  div    = document.getElementById('me'),
  showMe = function(response) {
    if (response.status !== 'connected') {
      div.innerHTML = '<em>Not Connected</em>';
    } else {
      FB.api('/me', function(response) {
        var html = '<table>';
        for (var key in response) {
          html += (
            '<tr>' +
              '<th>' + key + '</th>' +
              '<td>' + response[key] + '</td>' +
            '</tr>'
          );
        }
        div.innerHTML = html;
      });
    }
  };
FB.getLoginStatus(function(response) {
  showMe(response);
  FB.Event.subscribe('auth.sessionChange', showMe);
});
}

    </script>
    </head>
    <body>
    
<div id="fb-root"></div>
 <div class="fb-login-button" data-show-faces="true" data-scope="email,user_checkins">使用Facebook帳號登入</div>
 <hr/>
 <input type="button" id="btn1" onClick="javascript:GetStatus();return false;" value="取得Facebook登入者資訊" text="1234" />
 <div id="me"></div>
  </body>
 </html>