demoshop

demo, trying to be the best_

官方網站
http://en.gravatar.com/

之前 demo 有寫過一篇關於 Gravatar 的應用,Gravatar全世界通用的留言圖像因為他的共用性極高,demo還真的滿推薦大家都來去註冊一下的,而現在要介紹的是對於開發人員要怎麼把 Gravatar 應用在自己網站上的方式。

官方提供了相當多的語言範例【連結】甚至還有ASP.NET 的 Server Control可以用實在是非常的貼心,不過這裡 demo 挑選了一個最簡單容易上手的方式來實作 Gravatar 頭像,使用 URL 的 API 可以利用 Get 的方式呼叫 Gravatar 給予對應的圖型相當的方便。


基於資訊安全與個人隱私 Gravatar 在判斷 Email 的時候並不會使用明碼傳送,開發者必須要將留言者的 Email 轉換為 MD5 編碼,這樣子就可以保障留言者的 Email 不會被公開,轉換 MD5 的語法相當簡單 demo 在這裡提供一個 HTML Helper

        /// <summary>
        /// 將傳入的EMAIL轉換為 Gravatar 頭像
        /// </summary>
        /// <param name="helper"></param>
        /// <param name="str">要被轉的字串</param>
        /// <returns></returns>
        public static string ConvertEmailToGravatar(this HtmlHelper helper, string str)
        {
            if (!string.IsNullOrEmpty(str))
                str = str.ToLower();
            else
                str = "";
            string md5 = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(str, "MD5");
            return "<img src=\"http://www.gravatar.com/avatar/" + md5.ToLower() + ".jpg\" />";
        }

不是使用MVC的可以把 this HtmlHelper helper 拿掉就一樣是可以跑的。


利用上面的例子可以很輕易的將 Email 轉為 Gravatar 輸出的 HTML 也就只是一張圖片而已

<img src="//demoblog.blob.core.windows.net/blog/580/3b3be63a4c2a439b0137asdfa87725dfce802">

如果只利用這樣子來產生的 Gravatar 圖像一定會看到許許多多的預設圖示
當 Gravatar 找不到 Email 時就是會顯示此預設圖,不過官方是有提供三種的圖型樣式可以供選擇【identicons】【monsterids】【wavatars】這些圖片是在留言者沒有輸入 Email 或是者他沒有在 Gravatar 註冊 Email 時顯示的圖片,但是這圖片並不是隨機的,如果使用者有輸入 Email 但沒有 Gravatar 頭像時 系統會依據他輸入的 email 給他一組固定的頭像,這樣子就還是可以做一點識別了(當然這還是有可能重複的)  是否要使用就看各位的選擇了。


再來介紹參數設定,每個網站的分級以及畫面擺設都不一定會一樣,預設的圖片都是80×80一定無法滿足所有人的需求,因此額外參數就顯得重要。

  • S(圖片的大小,預設為80×80)
  • R(圖片的分級制度,預設為G,如果使用者的圖片不符合你設定的分級就不會顯示出來。)
    • G----普遍級
    • PG--輔導級
    • R----限制級
    • X----限制級(無碼)
  • D(找不到圖片的替代圖片,可以使用上面介紹的三種圖庫,也可以自行輸入一個圖片位置)

用幾個圖像來示範,馬上你就能掌握了。

<img src="//demoblog.blob.core.windows.net/blog/580/3b3be63a4c2a439b013787725dfce802?d=identicon">

<img src="//demoblog.blob.core.windows.net/blog/580/3b3be63a4c2a439b013787725dfce802?d=identicon&s=20">

 

<img src="//demoblog.blob.core.windows.net/blog/580/3b3be63a4c2a439b013787725dfce802?d=monsterid&s=48&r=x">

因為我也不知道誰有設定x等級的圖片所以很難示範,就把參數打出來而已

官方完整的介紹在這裡想要了解更多也是可以去參考的【連結


知道了參數後再回頭把 Class 修改一下補上自己要設定的參數後就可以完美的使用 Gravatar  服務了

回應討論