Hello.js參考1

原文來自http://adodson.com/hello.js/#hellojs

Hello.js是一個客戶端JavaScript SDK，用於OAuth2認證Web服務以及請求它們的REST Api。HelloJS標準化了路徑，並響應常見的API，好比說Google Data Services、Facebook Graph以及Windows Live Connect。它們是模塊，因此這個列表還在增加中。不再須要意大利麪條式的代碼。

我什麼也不懂，怎麼辦？

別懼怕，這裏有一個簡單的演示文檔，演示了一個基本的請求：經過一個服務鏈接用戶，它們屬於

功能

1. Get 取得我的信息
2. Get 列出個人好友
3. Get 列出個人聯繫人
4. Get 列出fo個人人
5. Get 列出我fo的人
6. Get 列出我最近的狀態消息
7. Post 發佈一條狀態消息
8. Post 發佈一條狀態消息並上傳一個媒體文件
9. Post 分享一條已有的消息
10. Get 取得一個我點「贊」、點「妙」、加「星」過的內容列表
11. Post 對一些內容點「贊」，點「妙」、加「星」
12. Delete 對一些內容棄「贊」、棄「妙」、去「星」
13. Get 列出個人相冊
14. Get 列出個人某個相冊中的圖片
15. Get 列出個人全部的圖片
16. Get 列出個人某個一個ID的圖片
17. Post 建立一個相冊
18. Delete 刪除一個相冊
19. Post 向相冊中上傳圖片
20. Post 經過URL向相冊添加圖片
21. Delete 從一個相冊中刪除一個圖片
22. Get 列出個人文件
23. Get 列出文件夾
24. Post 建立一個文件夾
25. Get 取得一個文件夾內容
26. Delete 刪除一個文件夾
27. Get 取得一個文件夾中的全部文件
28. Post 上傳個人文件
29. Post 把一個DataURL上傳爲文件
30. Put 更新文件內容
31. Put 移動文件位置
32. Delete 刪除個人文件

網站	方法
Windows	一、二、三、四、五、1三、1四、1六、1七、1八、1九、20、2一、2二、2三、2四、2五、2六、2七、2八、2九、32
Google	一、二、三、四、五、六、1三、1四、1五、2二、2三、2四、2五、2六、2七、2八、2九、30、3一、32
Facebook	一、二、四、五、六、七、十、1三、1四、1五、1六、2二、27
Dropbox	一、2二、2三、2四、2五、2六、2七、2八、2九、32
twitter	一、二、四、五、六、七、八、九、十、十一、12
Yahoo!	一、二、5
Instagram	一、二、四、五、十一、十二、15
Linkedin	一、二、四、五、六、七、九、十一、12
Soundcloud	一、二、四、5
FourSquare	一、二、四、5
Github	一、二、四、五、10
Flckr	一、二、四、五、1三、15

安裝方法

下面HelloJS或者HelloJS最小功能版

編譯版源碼，包含了全部的模塊，能夠從GitHib。源碼文件可這裏上找到。

瀏覽安裝包

# Install the package manager, bower
npm install bower

# Install hello
bower install hello

必須把瀏覽安裝包安裝在上述的「/src」和「/dest」目錄下。該「/src」目錄提供了個性化的模塊，它能夠按你想要的功能打包。

注意：一些服務要求OAuth1或者服務器端OAuth2認證，所以，HelloJS用一個OAuth代理實現通信。

幫助和支持

• 到GitHib報告bug以及請求功能。
• 到Gitter上得到幫助
• 在Stack Overflow上使用Hello.js標籤
• 做者Freddy Hariis的主頁

快速起步

快速起步向你演示瞭如何從零開始載入一個用戶名和頭像。就像上面的演示文檔那樣：

1. 註冊你的應用域名
2. 在代碼中插入Hello.js腳本
3. 建立一個登陸按鈕
4. 設置用於登陸和取得用戶信息的監聽器
5. 初始化客戶端Id以及全部的監聽器

1.註冊

在下面的網站上註冊你的應用（至少註冊一個）。確保你註冊正確的域名，由於它們可能至關挑剔的。

• facebook
• Windows Live
• Google

2.在網頁中包含Hello.js腳本代碼

HTML<script src='./dist/hello.all.js'></script>

3.建立登陸按鈕

只須要添加一個onclick事件，可調用hello(network).login()。你能夠按你本身的喜愛樣式化按鈕。我一直用zocial css。不過網上還有不少別的圖標樣式和字體。

HTmL<button onclick="hello('windows').login()">windows</button>

4.爲用戶登陸添加監聽器

讓咱們定義一個簡單的函數，它能夠在用戶登陸、以及網頁刷新以後，把用戶我的信息載入到網頁上。下面是事件監聽器，它能夠監聽認證事件的變化，併爲數據製做一個API調用。

javascripthello.on('auth.login', function(auth) {

    // Call user information, for the given network
    hello(auth.network).api('/me').then(function(r) {
        // Inject it into the container
        var label = document.getElementById('profile_' + auth.network);
        if (!label) {
            label = document.createElement('div');
            label.id = 'profile_' + auth.network;
            document.getElementById('profile').appendChild(label);
        }
        label.innerHTML = '<img src="' + r.thumbnail + '" /> Hey ' + r.name;
    });
});

5.用你本身的客戶ID配置Hello.js，並初始化全部的監聽器

如今，能夠用到你在第一步時得到的註冊信息了。向hello.init函數傳遞參數[key:value,...]，等等。

javascripthello.init({
    facebook: FACEBOOK_CLIENT_ID,
    windows: WINDOWS_CLIENT_ID,
    google: GOOGLE_CLIENT_ID
}, {redirect_uri: 'redirect.html'});

好了，上面這段代碼使演示文檔真正可用了。開始吧，沒有什麼藉口。

核心方法

Hello.init()

初始化環境。添加應用證書。

hello.init({facebook:id,windows:id,google:id,...});

參數

credentials：
鍵值對對象。object(key=>value,...)
key type:string,example:"windows","facebook"or "google", description:App name
value type:string,example:"0000000AB1234",description:ID of the service to connect to

options：設置默認options，就像用在hello.login()中那樣。

示例

javascripthello('facebook').logout().then(function() {
    alert('Signed out');
}, function(e) {
    alert('Signed out error: ' + e.error.message);
});

hello.getAuthResponse()

取得當前的會話狀態。這是一個同步的請求，全部的可能過時的會話cookies都不可用。

hello.getAuthResponse(network)

參數

network：
字符串類型
示例:"windows","facebook"
說明：服務項目之一
可選參數
默認值：current

返回值

{access_token: /^\\S+$/,expires: /\\d/}

示例

javascriptvar online = function(session) {
    var currentTime = (new Date()).getTime() / 1000;
    return session && session.access_token && session.expires > currentTime;
};

var fb = hello('facebook').getAuthResponse();
var wl = hello('windows').getAuthResponse();

alert((online(fb) ? 'Signed' : 'Not signed') + ' into Facebook, ' + (online(wl) ? 'Signed' : 'Not signed') + ' into Windows Live');

hello.api()

語法

hello.api([path],[method],[data],[callback(json)]);

參數

name	type	example	description	argument	default
path	string	"/me","/me/friends"	Path or URI of the resource, Can ba prefixed with the name of the service.	required	null
method	string	"get","post","delete","put"	HTTP request method to use	optional	"get"
data	object	{name:"Hello",description:"Fandelicious"}	A JSON object of data, FormData,HTMLInputElement,HTMLFormElement to be sent along with a "get","post"or "put" request	optional	null
callback	function	function(json){console.log(json);}	A function to call with the body of the response returned in the first parameter as an object, else boolean false.	optional	null

Get取得我的信息

調用方法

hello.api("/me","get",[data]).then([callback]);
hello.api("/me","get",[data],[callback]);

回調函數取得的[data]

{name: /^[\\w\\d\\s\\.\\-]+$/,id: /^[\\w\\d\\@\\.\\-]+$/,thumbnail: /^(https?\\:\\/\\/|$)/}

Get列出個人好友

調用方法

hello.api("/me/friends","get",[data]).then([callback]);
hello.api("/me/friends","get",[data],[callback]);

[data]

{limit:/^\\S+$/}

回調函數取得的[data]

{id:/^[\\w\\d\\@\\.\\-]+$/,name:/^[\\w\\d\\s\\.\\-]+$/,thumbnail:/^https?\\:\\/\\//}

Get列出個人聯繫人

調用方法

hello.api("/me/contacts","get",[data]).then([callback]);
hello.api("/me/contacts","get",[data],[callback]);

[data]

{limit:/^\\S+$/}

回調函數取得的[data]

{id:/^[\\w\\d\\@\\.\\-]+$/,name:/^[\\w\\d\\s\\.\\-]+$/,thumbnail:/^https?\\:\\/\\//}

Get列出fo個人人

調用方法

hello.api("/me/followers","get",[data]).then([callback]);
hello.api("/me/followers","get",[data],[callback]);

[data]

{limit:/^\\S+$/}

回調函數取得的[data]

{id:/^[\\w\\d\\@\\.\\-]+$/,name:/^[\\w\\d\\s\\.\\-]+$/,thumbnail:/^https?\\:\\/\\//}

Get列出我fo的人

調用方法

hello.api("/me/following","get",[data]).then([callback]);
hello.api("/me/following","get",[data],[callback]);

[data]

{limit:/^\\S+$/}

回調函數取得的[data]

{id:/^[\\w\\d\\@\\.\\-]+$/,name:/^[\\w\\d\\s\\.\\-]+$/,thumbnail:/^https?\\:\\/\\//}

Get列出我最近的狀態消息

調用方法

hello.api("/me/share","get",[data]).then([callback]);
hello.api("/me/share","get",[data],[callback]);

[data]

{limit:/^\\S+$/}

回調函數取得的[data]

{}