demoshop

官方網站

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  服務了