摘要：創(chuàng)建引用之后，就可以通過(guò)往節(jié)點(diǎn)中寫入任何合法的數(shù)據(jù)讀取數(shù)據(jù)讀取數(shù)據(jù)是通過(guò)綁定回調(diào)函數(shù)來(lái)實(shí)現(xiàn)的。提供終端用戶唯一標(biāo)識(shí)的過(guò)程被稱為終端用戶認(rèn)證。好了，了解這點(diǎn)就可以開始做排行榜了。

填寫應(yīng)用名稱和應(yīng)用ID就可以創(chuàng)建了。應(yīng)用ID需要全網(wǎng)唯一

創(chuàng)建成功之后就可以在控制面板看到應(yīng)用了.

1.引入SDK

2.創(chuàng)建引用

ref =  Wilddog("https://.wilddogio.com/")
//將替換成申請(qǐng)的應(yīng)用ID
ref =  Wilddog("https://fullstack-top-demo.wilddogio.com/")

因?yàn)閣ilddog是以key-value的形式存儲(chǔ)數(shù)據(jù)，創(chuàng)建引用會(huì)定位到根節(jié)點(diǎn)。若要定位到子節(jié)點(diǎn)，只需在url后追加路徑即可，例如：

user_ref =  Wilddong("https://fullstack-top-demo.wilddogio.com/user/")

野狗也提供了child()方法來(lái)獲取子節(jié)點(diǎn)的引用。

ref =  Wilddog("https://fullstack-top-demo.wilddogio.com/")
user_ref = ref.child("user")

這兩種方法是一樣的效果

1.寫入數(shù)據(jù)。
創(chuàng)建 Wilddog 引用之后，就可以通過(guò)set() 往節(jié)點(diǎn)中寫入任何合法的JSON數(shù)據(jù)

user_ref.set({
    name : "lixiaohao",
    age  : ,
    blogurl : "ghost.fullstack.top"
})

2.讀取數(shù)據(jù)
讀取數(shù)據(jù)是通過(guò)綁定回調(diào)函數(shù)來(lái)實(shí)現(xiàn)的。假設(shè)我們按照上面的代碼寫入了數(shù)據(jù)，那么就可以使用on()函數(shù)來(lái)讀取user對(duì)象的值。

user_ref.on("value", function(datasnapshot) {
  console.dir(datasnapshot.val());   // 結(jié)果會(huì)在 console 中打印出剛剛set的對(duì)象
})

回調(diào)函數(shù)的參數(shù)是一個(gè)DataSnapshot對(duì)象類型，調(diào)用它的val()函數(shù)得到數(shù)據(jù)對(duì)象。上邊這個(gè)例子中，value這個(gè)事件會(huì)在初次讀取到數(shù)據(jù)的時(shí)候被觸發(fā)一次，此后每當(dāng)數(shù)據(jù)發(fā)生改變，都會(huì)被觸發(fā)。

若要只讀取一次，不在之后每次數(shù)據(jù)發(fā)生變化的時(shí)候觸發(fā)回掉函數(shù)，可以使用once()函數(shù)替代on()函數(shù)。

3.用戶認(rèn)證

**絕大多數(shù)應(yīng)用都需要一套終端用戶賬號(hào)體系。對(duì)終端用戶進(jìn)行唯一標(biāo)識(shí)之后，才能對(duì)用戶進(jìn)行個(gè)性化的用戶體驗(yàn)，控制用戶對(duì)數(shù)據(jù)的訪問(wèn)權(quán)限。提供終端用戶唯一標(biāo)識(shí)的過(guò)程被稱為終端用戶認(rèn)證。WildDog為開發(fā)者提供了多種用戶認(rèn)證方式。
野狗提供了多種用戶登錄方式，具體可查看 官方文檔**

這里要注意的一點(diǎn)就是，第三方登錄一定要設(shè)置OAuth跳轉(zhuǎn)域名白名單

當(dāng)時(shí)因?yàn)檫@個(gè)沒有配置這個(gè)白名單折騰了一下午。不過(guò)在本地環(huán)境下用localhost 或127.0.0.1 訪問(wèn)的話不會(huì)有影響。

好了，了解這3點(diǎn)就可以開始做排行榜了。

我們可以去網(wǎng)上找一個(gè)html5的小游戲，稍微研究下代碼應(yīng)該就可以找到游戲成績(jī)的結(jié)算方法，在游戲結(jié)束時(shí)給我們的refset()一個(gè)值就可以啦。

這里以我寫過(guò)的一個(gè)demo為例

 //創(chuàng)建根節(jié)點(diǎn)的引用
 wilddog =  Wilddog(https://.wilddogio.com/");
 var wilddogAuthData; //野狗用戶登錄信息
//監(jiān)聽登錄狀態(tài)變化
wilddog.onAuth(function() {
    //如果已登錄則將用戶數(shù)據(jù)存儲(chǔ)到全局變量方便調(diào)用
    wilddogAuthData = data;
     (wilddogAuthData) {
        console.log(wilddogAuthData);
    }  {
        //未登錄則調(diào)用野狗登錄方法，這里只是簡(jiǎn)單的使用微博授權(quán)登錄，其他登錄方法查看官方文檔。
        // 彈出新浪微博OAuth認(rèn)證
        wilddog.authWithOAuthRedirect("weibo", authHandler);
    }
});
// 創(chuàng)建一個(gè)回調(diào)來(lái)處理終端用戶認(rèn)證的結(jié)果，微博登錄成功后的回調(diào)方法
function authHandler(error, data) {
     (error) {
        console.log("Login Failed!", error);
    }  {
        console.log("Authenticated successfully with payload:", data);
    }
}

授權(quán)登錄成功后可獲得用戶信息

獲取游戲結(jié)果

在游戲結(jié)束方法里加入

//打破自己的記錄才上傳，一般html5游戲會(huì)將最佳成績(jī)存在localstorage中，根據(jù)實(shí)際情況做修改即可
(score > bestScore){
    (!wilddogAuthData){alert("你沒有使用微博賬號(hào)登陸,無(wú)法計(jì)入成績(jī)!");return false;}
     ts =  Date().getTime();
    wilddogRef.child("rank").child(wilddogAuthData.auth.uid).({
        //這里的字段根據(jù)自己需求定義
        uid:    wilddogAuthData.auth.uid
        //為了盡量避免偽造數(shù)據(jù)這里將score做加密處理并放在偽造的token字段里混淆視聽，取出成績(jī)時(shí)再解密比較token與score字段即可,并不能從根本上防止作弊。
        token:  sjcl.encrypt(ts+,score+),
        score:  score,
        ts:     ts,
        rank:   t++(3000000000000-ts),
        UA:     navigator.userAgent
    });
}

rank字段用于orderByChild()方法，該方法對(duì)字符串按照字典順序來(lái)排的。這里的t是在score前面補(bǔ)0到6位數(shù)方便排序 ，score=100 則 t=000100，這樣組合之后可以確定高分在前，分?jǐn)?shù)相同則先達(dá)到該分?jǐn)?shù)的用戶在前
獲取排行榜

//獲取數(shù)據(jù)，并按照對(duì)象中的 rank 字段排序返回結(jié)果集中的后10位
wilddogRef.child(k").orderByChild(k").limitToLast().on("value", function(users) {
     html = [];
    users.forEach(function (user) {
         item = user.();
        //比較score與加密的"score"，不匹配則忽略
        (sjcl.decrypt(item.ts+,item.token) == item.score) {
        // .orderByChild()方法是升序，所以這里使用的是"unshift"方法
            html.unshift("
[站外圖片上傳中……()]
"+ item.name +"
"+ item.score +" 分
");
        }
    });
    document.getElementById("rank-list").innerHTML = html.join("");
});

完成了!

有興趣的同學(xué)可以玩一下，完全實(shí)時(shí)的哦。簡(jiǎn)單demo沒有做過(guò)多優(yōu)化，打開頁(yè)面后會(huì)直接彈出微博授權(quán)頁(yè)。 游戲傳送門
這是一篇轉(zhuǎn)載的文章。原作者是:李昊。點(diǎn)擊進(jìn)入 李昊個(gè)人博客。

想研究源碼之后移植到自己的應(yīng)用上的小伙伴,plz 戳這里,李昊哥哥的github,歡迎star。