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、2、3、4、5、13、14、16、17、18、19、20、21、22、23、24、25、26、27、28、29、32
Google	1、2、3、4、5、6、13、14、15、22、23、24、25、26、27、28、29、30、31、32
Facebook	1、2、4、5、6、7、10、13、14、15、16、22、27
Dropbox	1、22、23、24、25、26、27、28、29、32
twitter	1、2、4、5、6、7、8、9、10、11、12
Yahoo!	1、2、5
Instagram	1、2、4、5、11、12、15
Linkedin	1、2、4、5、6、7、9、11、12
Soundcloud	1、2、4、5
FourSquare	1、2、4、5
Github	1、2、4、5、10
Flckr	1、2、4、5、13、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]

{}