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]

{}