站内应用开发指南

站内应用授权

新版站内应用授权流程遵守标准oauth2.0协议。本指南前端页面使用最新推出的 JavaScript SDK

注意:2012年3月7日起新注册的应用,必须使用新版站内应用授权,以前注册的应用开发,请参考 旧版组件接入开发



当用户访问您的应用,开心网站内应用框架会通过HTTP POST 发送signed_request 参数到您的应用首页URL。signed_request参数的内容是base64url 编码的JSON object。

用户未授权signed_request 包含如下字段:

字段名类型说明
userarray
algorithmstring现在只支持HMAC-SHA256
issued_atint服务端生成时间, unix timestamp格式

用户未授权,需要应用自行判断,并调用授权弹层,引导用户进行授权。如何判断用户是否已授权

用户已授权signed_request 包含如下字段:

字段名类型说明
user用户对象
algorithmstring现在只支持HMAC-SHA256
issued_atinttoken生成时间,unix timestamp格式
expiresinttoken 过期时间,unix timestamp格式
oauth_tokenstringoauth2.0的access_token
user_idunit用户ID

如何判断用户是否已授权

当用户进行授权操作后,用户浏览器将被重定向到应用首页(即http://www.kaixin001.com/!您的应用域名/),这时您的应用首页就能接收到包含access_token的signed_request参数。 以下代码演示了如何解析signed_request参数,并判断用户是否授权:

<?php
session_start();
require_once('config.php');
require_once('kxClient.php');
$access_info = '';
$base64String = $_POST['signed_request'];
$kxOauthBase = new KXOauthBase(KX_AKEY, KX_SKEY, KX_CALLBACK_URL);
$access_info = $kxOauthBase->parseSignedRequest($base64String);
if(empty($access_info["user_id"])){
    include "auth.php";
	exit;
}else{
	$_SESSION['access_token'] = $access_info["oauth_token"];
	$_SESSION['user_id'] = $access_info["user_id"];
	header("Location:demolist.php");
}
?>

如何调用授权弹层

开发者需要在弹出授权弹层的页面引用JS SDK的url:

<script src="http://s.kaixin001.com.cn/js/openapp-8.js" language="JavaScript"></script>

调用JS SDK的授权函数:

<style>
body{
	background:url("")no-repeat; //页面背景图
}
</style>
function openAuthDlg()
{
        var p = {"app_id":<?=KX_APPID ?>,"display":"iframe","redirect_uri":"<?=KX_CALLBACK_URL ?>","scope":"basic create_records friends_intro send_message"};
        KX.login(p);
}
</script>
<body onload="openAuthDlg();">

注意:
1、为了提供更好的用户体验,您的授权页面背景最好用一张应用背景填充。
2、这里的redirect_uri参数只是与Oauth2.0保持一致,没有实际作用。用户授权后只会跳转到应用页
3、scope如果不是basic,如本例所示,请在应用上线前联系技术支持额外设置,上线后如有修改也需联系技术支持进行设置。

如何实现iframe高度自适应

开发者只需要在页面中引用JS SDK的url即可:

<script src="http://s.kaixin001.com.cn/js/openapp-8.js" language="JavaScript"></script>

注意:

  1. 回调地址页面html代码要有 <!DOCTYPE
  2. 回调地址页面的高度不要设置为100%,否则高度自适应代码会失效

API2.0调用示例

完成用户授权之后,就可以使用API2.0,获取用户个人信息、好友关系等数据了。以下例子基于 PHP DEMOJavaScript SDK,请到开源SDK下载

PHP DEMO的演示

获取用户个人信息
<?php
$access_token = $_SESSION['access_token'];
$kxopenApi =  new KXOpenApi($access_token);
$ret = $kxopenApi->users_show($_GET['uids']);
$users_show_return = $ret['response']; //返回的是数组
$users_show_return = json_encode($users_show_return); //转成json对象
?>
获取用户好友关系
<?php
$access_token = $_SESSION['access_token'];
$kxopenApi =  new KXOpenApi($access_token);
$ret_friends = $kxopenApi->friends_me();
$friends_me_return = $ret_friends['response']; //返回的是数组
$friends_me_return = json_encode($friends_me_return);
?>
发布好友动态
<script>
function openFeedDlg()
{
	/*  参数说明:
		app_id		申请应用时获得的APPID
		display	dialog弹出框的展示方式(iframe--弹出层的方式 popup--新窗口方式)
		redirect_uri 	回调地址 
		linktext 	动态里面的链接文字,不超过15个汉字。例如,去帮忙 
		link 		动态里的链接地址,必须以http或https开头。 
		text 		发送动态所使用的文案,不超过60个汉字,否则会被截断。该文案可以有{_USER_} {_USER_TA_}变量,解析时会被替换为当前用户名字和他/她。例如,动态文案:{_USER_} 在做XX任务时遇到了强大的XX,快去帮帮{_USER_TA_}! 
		picurl 	发送动态所使用的图片地址,如果动态分享中需要发布图片,则此项必填。图片尺寸为80×80,否则会被压缩/拉伸为80×80 
		cb 		js回调函数
	*/
        var p = {"app_id":<?=KX_APPID ?>,"display":"iframe","redirect_uri":"<?=KX_CALLBACK_URL ?>","linktext":"去帮忙","link":"http://www.kaixin001.com", "text":"{_USER_} 在做XX任务时遇到了强大的XX,快去帮帮{_USER_TA_}!"};
        p.cb = function(v){console.log(v);};
        KX.feed(p);
}
</script>
<input type="button" name="feed" value="发布动态" onclick="openFeedDlg();" />
给好友发送安装邀请
<script>
function openInvitationDlg()
{
	/*  参数说明:
		app_id		申请应用时获得的APPID
		display	dialog弹出框的展示方式(iframe--浮层的方式 popup--新窗口方式)
		redirect_uri 	回调地址 
		text 		发送系统消息所使用的文案,不超过60个汉字,否则会被截断。该文案可以有{_USER_} {_USER_TA_}变量,解析时会被替换为当前用户名字和他/她。例如,动态文案:{_USER_} 在做XX任务时遇到了强大的XX,快去帮帮{_USER_TA_}!
		cb 		js回调函数
	*/
        var p = {"app_id":<?=KX_APPID ?>,"display":"iframe","redirect_uri":"<?=KX_CALLBACK_URL ?>","text":"这个组件很好玩的,可以试试"};
        p.cb = function(v){console.log(v);};
        KX.invitation(p);
}
</script>
<input type="button" name="invitation" value="发送邀请" onclick="openInvitationDlg();" />
发送系统消息
<script>
function openSysNewsDlg()
{
	/*  参数说明:
		app_id		申请应用时获得的APPID
		display	dialog弹出框的展示方式(iframe--弹出层的方式 popup--新窗口方式)
		redirect_uri 	回调地址 
		linktext 	系统消息里面的链接文字,不超过15个汉字。例如,去帮忙
		link 		系统消息里的链接地址,必须以http或https开头。 
		text 		发送系统消息所使用的文案,不超过60个汉字,否则会被截断。该文案可以有{_USER_} {_USER_TA_}变量,解析时会被替换为当前用户名字和他/她。例如,动态文案:{_USER_} 在做XX任务时遇到了强大的XX,快去帮帮{_USER_TA_}!
		picurl 	发送系统消息所使用的图片地址,如果动态分享中需要发布图片,则此项必填。图片尺寸为80×80,否则会被压缩/拉伸为80×80
		cb 		js回调函数
	*/
        var p = {"app_id":<?=KX_APPID ?>,"display":"iframe","redirect_uri":"<?=KX_CALLBACK_URL ?>","linktext":"去帮忙","link":"http://www.kaixin001.com", "text":"{_USER_} 在做XX任务时遇到了强大的XX,快去帮帮{_USER_TA_}!"};
        p.cb = function(v){console.log(v);};
        KX.sysnews(p);
}
</script>
<input type="button" name="sysnews" value="发送系统消息" onclick="openSysNewsDlg();" />
支付
<script>
function openPayDlg()
{
	/*  参数说明:
		app_id			申请应用时获得的APPID
		display			dialog弹出框的展示方式(iframe--弹出层的方式 popup--新窗口方式)
		callback 		支付成功的回调地址,通知第三方支付已经成功。不要使用本地测试地址 
                redirect_uri 		前端回调地址 
		pname 			商品名称。 
		pnumber 		商品数量。 
		pcode 			商品code 
		amount 			价值开心币(与开心币的兑换关系) 
		orderid 		己方生成的订单号,为将来对账用,请保证唯一 
		sig			签名参数
                cb			前端回调函数
	*/
        var p = {"app_id":<?=KX_APPID ?>,"display":"iframe","callback":"<?=KX_CALLBACK_URL ?>","redirect_uri":"<?=KX_CALLBACK_URL ?>","pname":"iphone 4s","pnumber":"1", "pcode":"1","amount":"1","orderid":"<?=$orderid?>","sig":"<?=$sig?>"};
        p.cb = function(v){console.log(v);};
        KX.pay(p);
}
</script>
<input type="button" name="pay" value="支付" onclick="openPayDlg();" />