WEB站内应用开发入门教程

跳转至: 导航搜索

本教程教你从零开始创建一个Web应用,并教你如何调用人人网开放平台提供的一些常用接口。

注意本教程在前端页面上基于JavaScript SDK来实现,而在服务器端基于Java SDK来实现。如果你在服务器端使用其它语言来实现,可以到人人网开源项目下载相应的SDK协助你完成实现。


目录

搭建一个web server模拟你的应用服务器

在开始开发人人网应用之前,你首先需要搭建一个web server作为你的应用服务器。搭建web server的详细过程在这里略去不讲。如果你使用Java语言来进行服务器编程,那么你可以选择使用Tomcat做服务器,你可以先参考Tomcat配置教程来启动你的web server,并保证在80端口监听服务,然后再回到本教程。

搭建的web server环境可能是多种多样的,服务器编程环境也可能是多种多样的,如使用Java、PHP、Python等。在这个教程中,我们使用Java代码做示例。

在本教程中,我们假设你的应用服务器的访问地址是www.yourdomain.com,在实际动手操作时请替换成你的真实域名。

如果你没有正式注册的域名而又想尝试本教程,可以自己选择一个测试用的域名,并在hosts文件中将该域名绑到你的测试服务地址,如127.0.0.1。


为你的Web应用在开放平台申请和配置应用

任何应用为了接入开放平台,都需要在开放平台申请一个应用,并做出相应的配置。

申请应用并配置基本属性

请先按照申请应用并配置基本属性完成描述的步骤,然后回到本教程继续下面的配置。

注意:

配置站内应用相关属性

在左边选择“站内应用”那个Tab,配置Web站内应用特有的一些选项:

  • Canvas Page Name:用于访问站内应用的别名。例如,如果这个值填为“yourapp”,那么用户就可以在人人网上通过http://apps.renren.com/yourapp/访问到你的应用。
  • Callback URL:应用服务的实际地址,当用户访问你的应用的时候,人人网服务器或浏览器会向该地址发送请求获取应用内容显示在人人网。
  • 应用访问URL:是你的应用在人人网的入口页面地址,用于从菜单、新鲜事、应用中心中访问你的应用。
  • Canvas 类型:建议选择“Iframe”类型。如果选择“Iframe”类型,你的应用页面是以iframe的方式嵌套的应用页面中,如果选择“XNML”类型,你的应用服务器返回的页面需要符合XNML的标签语法。
720px-App canvas tab webapp.jpg


关于Canvas URL和Callback URL的关系,按上面图中的填写举一个例子如下:

如果用户访问http://apps.renren.com/yourapp/some_path/some_page.html

则你的应用服务器上的这个页面会被访问:

http://www.yourdomain/yourapp/some_path/some_page.html

引导用户授权你的应用

建立第一个应用页面

下面我们使用Java语言来创建第一个动态页面。如果你使用其它语言(如PHP/C#)进行服务器端编程,请跳过此节的描述。但是,请使用相应的技术使得通过HTTP协议的地址:http://www.yourdomain.com/renrenapp/welcome能够访问到这个页面。

为了简单起见,我们不用任何Web框架,直接使用Servlet接口进行编程。这需要你获得一个servlet-api.jar包。这个jar包可以在你的tomcat安装目录下的lib目录中找到;或者也可以在Media:servlet-api.jar下载。将这个jar包放置到/WEB-INF/lib目录下,并在工程编译时把这个jar包放到build path中。

  • 修改web.xml文件内容如下:
<source lang="xml"> <?xml version="1.0" encoding="ISO-8859-1"?> <web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee web-app_2_4.xsd" version="2.4"> <display-name>Renren Webcanvas Demo for a Tutorial</display-name> <servlet> <servlet-name>WelcomeServlet</servlet-name> <servlet-class>com.yourdomain.webcanvas.WelcomeServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>WelcomeServlet</servlet-name> <url-pattern>/renrenapp/welcome</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> <welcome-file>index.html</welcome-file> </welcome-file-list> <error-page> <error-code>404</error-code> <location>/404.html</location> </error-page> </web-app> </source>

以上配置文件配置了一个路径“/renrenapp/welcome”可以访问到的Servlet。

  • 创建一个Servlet类(com.yourdomain.webcanvas.WelcomeServlet),如下:
<source lang="java"> package com.yourdomain.webcanvas; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @SuppressWarnings("serial") public class WelcomeServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, java.io.IOException { RequestDispatcher welcomeDispatcher = request.getRequestDispatcher("/views/welcome.jsp"); welcomeDispatcher.forward(request, response); } } </source>
  • 创建一个jsp页面(在Web工程下的路径是/views/welcome.jsp),内如如下:
<source lang="jsp"> <%@ page contentType="text/html;charset=UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Renren Webcanvas Demo -- Welcome</title> </head> <body> Hi, Welcome! </body> </html> </source>
  • 修改tomcat配置文件/conf/server.xml,将新建立的Web工程地址配置进去(如果你用的不是tomcat,请在你使用的Servlet容器中做相应的配置)。例如,如果你的工程地址位于D:\renren_webcanvas_tutorial,那么你可以在server.xml文件最后(</Engine>节点前面),增加如下配置(appBase为工程的解压路径,docBase是工程目录名):
<source lang="xml"> <Host name="www.yourdomain.com" appBase="D:/" unpackWARs="true" autoDeploy="true"> <Context path="/" docBase="renren_webcanvas_tutorial" debug="0"/> </Host> </source>

好了,一起都配置好了,让我们在浏览器中访问http://www.yourdomain.com/renrenapp/welcome ,会看到显示“Hi, Welcome! ”字样,这说明第一步已经成功了。

在用户不授权的情况下访问应用页面

让我们通过人人网的Canvas URL直接访问刚刚创建的页面:http://apps.renren.com/yourapp/welcome ,这样,我们第一个应用页面就这样创建好了。如下图所示:

600px-Web canvas welcome no auth.jpg

如果查看页面源代码,我们会发现,应用服务器上的页面是通过一个iframe嵌到父页面里的:

<source lang="html"> <iframe name="iframe_canvas" id="iframe_canvas" src="http://www.yourdomain.com/renrenapp/welcome? xn_sig_in_iframe=1&xn_sig_method=get&xn_sig_time=1308106350405&xn_sig_added=0& xn_sig_api_key=02acbca93cd94983b8bc2cbf62912147&xn_sig_app_id=144142&xn_sig_domain=renren.com& xn_sig=6b30b3f952c01c54bdf80f0e3ca5b38b" frameborder="0" class="smart_sizing_iframe"></iframe> </source>

从传的参数里可以看出,没有任何参数将人人网用户的身份信息传给应用服务器。这是因为用户还没有授权你的应用。

为什么要引导用户授权

为了保护用户隐私,只有用户授权了你的应用能够访问Ta的个人信息,人人网才会把用户的身份等信息传给你的应用服务器。

实际上,根据你的应用功能,你可能需要用户授权,也可能不需要。比如,一个只做内容展示的应用,可能并不需要用户的身份,这样就不需要引导用户授权。再如,一个应用可能允许用户先进去看一看,可以在匿名状态下先使用一小段时间,如果用户觉得不错,还可以继续授权这个应用,然后可以使用应用提供的更丰富的功能。总之,要不要引导用户授权,以及在什么时机引导用户授权,第三方应用是可以自己决定的。

从技术上讲,你的应用必须引导用户授权成功后,才能调用Rest API;但即使没有用户授权也可以使用Widget API提供的社交特性。

下载JavaScript SDK

人人网的应用授权遵守标准的OAuth 2.0协议,但是人人网提供一些SDK已经把协议的具体细节封装起来了,使得调用者可以不用关心具体细节。

下面,为了完成引导用户授权这件事情,我们到人人网开源项目去下载JavaScript SDK:可以下载zip格式的enren-api-javascript-sdk.zip‎压缩包并解压到选定的目录,也可以在官方代码库使用Hg获取最新的代码。

在Web工程根目录下创建子目录“/js/renren_js_sdk”,然后将下载到的JavaScript SDK中的build/js目录下的renren.js文件拷贝到新创建的目录下面(也可以选择renren-gc.js或renren-yc.js,这两个文件使用不同工具对renren.js进行压缩得到的版本)。

使用弹框的方式进行授权

我们修改welcome.jsp的代码,在里面加入JavaScript代码,调用JavaScript SDK提供的Renren.ui函数,弹出授权框。修改后的welcome.jsp代码如下:

<source lang="js"> <%@ page contentType="text/html;charset=UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Renren Webcanvas Demo -- Welcome</title> <script type="text/javascript" src="/js/renren_js_sdk/renren.js"></script> </head> <body> <script type="text/javascript"> var uiOpts = { url : "http://graph.renren.com/oauth/authorize", display : "iframe", params : {"response_type":"token","client_id":"${requestScope.appId}"}, onSuccess: function(r){ top.location = "http://apps.renren.com/yourapp/home"; }, onFailure: function(r){} }; Renren.ui(uiOpts); </script> Hi, Welcome! </body> </html> </source>

在上面的代码中,调用了JavaScript SDK中定义的Renren.ui函数。这个函数封装了调用Dialog API的逻辑,而OAuth 2.0的授权框可以看做是一种Dialog。调用的各个参数含义如下定义:

  • url:Dialog请求地址,这里传入的值是OAuth 2.0的授权endpoint地址。因为apps.renren.com是http协议而不是https,所以这里也用的是http协议的地址。
  • display:显示模式,这里的"iframe"表示是显示在一个嵌入弹层的iframe中。
  • params:传给Dialog请求地址的其它参数。response_type的值为"token",表示采用的是User-Agent Flow;client_id的值为应用的App ID。
  • onSuccess:Dialog确认成功后调用的回调函数。在这里面,我们做的动作是:在用户授权成功后页面跳转到http://apps.renren.com/yourapp/home这个地址,继续进行授权以后的显示。
  • onFailure:发生错误或用户取消后调用的失败处理函数。

更多更详细的参数定义参见JavaScript SDK的docs目录下的文档。

在上面代码中有一个JSP变量${requestScope.appId}还没有赋值,那么为了给它赋值,我们定义几个常量。创建一个常量类com.yourdomain.webcanvas.config.AppConfig,代码如下:

<source lang="java"> package com.yourdomain.webcanvas.config; public final class AppConfig { public static final String APP_ID = "144142"; public static final String API_KEY = "02acbca93cd94983b8bc2cbf62912147"; public static final String APP_SECRET = "402666202e694ec78c031ebb3cef32fc"; } </source>

注意:上面的几个常量的值一定要分别修改成你的应用的AppId、API Key和Secret。这几个值的来历请参考申请应用并配置基本属性

然后修改com.yourdomain.webcanvas.WelcomeServlet这个类的代码,设置appId变量的值。修改后的类代码如下:

<source lang="java"> package com.yourdomain.webcanvas; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.yourdomain.webcanvas.config.AppConfig; @SuppressWarnings("serial") public class WelcomeServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, java.io.IOException { request.setAttribute("appId", AppConfig.APP_ID); RequestDispatcher welcomeDispatcher = request.getRequestDispatcher("/views/welcome.jsp"); welcomeDispatcher.forward(request, response); } } </source>

由于授权成功后会跳转到一个新的页面http://apps.renren.com/yourapp/home,所以下面建立这个页面。首先,在web.xml文件中加入如下Servlet配置:

<source lang="xml"> <servlet> <servlet-name>HomeServlet</servlet-name> <servlet-class>com.yourdomain.webcanvas.HomeServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>HomeServlet</servlet-name> <url-pattern>/renrenapp/home</url-pattern> </servlet-mapping> </source>

然后创建一个新的Servlet类:com.yourdomain.webcanvas.HomeServlet。类得代码如下:

<source lang="java"> package com.yourdomain.webcanvas; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.yourdomain.webcanvas.config.AppConfig; @SuppressWarnings("serial") public class HomeServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, java.io.IOException { request.setAttribute("appId", AppConfig.APP_ID); RequestDispatcher welcomeDispatcher = request.getRequestDispatcher("/views/home.jsp"); welcomeDispatcher.forward(request, response); } } </source>

再创建一个jsp页面(在Web工程下的路径是/views/home.jsp),内如如下:

<source lang="jsp"> <%@ page contentType="text/html;charset=UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Renren Webcanvas Demo -- Home</title> </head> <body> Hi, This is home page! </body> </html> </source>

现在重启web server并重新访问:http://apps.renren.com/yourapp/welcome ,发现弹出授权框。如下:

600px-Web canvas auth dialog.jpg

在确认之后,会跳转到http://apps.renren.com/yourapp/home,如下所示:

600px-Web canvas after auth dialog home.jpg

注意:之前很多应用使用弹框式的授权,就是在一个白页面上显示一个弹框,就如同本例所展示的差不多。请注意本例只是演示代码,如果你的应用计划正式上线,那么应该好好修饰一下你的授权页面,例如加个漂亮的背景图;或者在进入应用以后在适当时机再弹出授权框。

使用跳转的方式进行授权

做为可选的方式,你也可以采用页面跳转的方式进行授权。如果你不想使用跳转的方式,请接下来略过此节的描述。

跳转授权方式可以基于JavaScript SDK,也可以不基于JavaScript SDK:

  • 如果使用JavaScript SDK,则上面实现中的welcome.jsp需要做两处修改:
  1. 一个是将display参数由"iframe"改成"page"
  2. 另一个是在params参数中添加:"redirect_uri":"http://apps.renren.com/yourapp/home"

修改后的welcome.jsp内容如下:

<source lang="jsp"> <%@ page contentType="text/html;charset=UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Renren Webcanvas Demo -- Welcome</title> <script type="text/javascript" src="/js/renren_js_sdk/renren.js"></script> </head> <body> <script type="text/javascript"> var uiOpts = { url : "http://graph.renren.com/oauth/authorize", display : "page", params : {"response_type":"token","client_id":"${requestScope.appId}", "redirect_uri":"http://apps.renren.com/yourapp/home"}, onSuccess: function(r){ top.location = "http://apps.renren.com/yourapp/home"; }, onFailure: function(r){} }; Renren.ui(uiOpts); </script> Hi, Welcome! </body> </html> </source>
  • 如果不使用JavaScript SDK,则直接在welcome.jsp中运行JavaScript代码进行跳转。将welcome.jsp代码改为如下内容:
<source lang="jsp"> <%@ page contentType="text/html;charset=UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Renren Webcanvas Demo -- Welcome</title> </head> <body> <script type="text/javascript"> top.location="http://graph.renren.com/oauth/authorize?client_id= ${requestScope.appId}&response_type=token&display=page&redirect_uri=" + encodeURIComponent("http://apps.renren.com/yourapp/home"); </script> Hi, Welcome! </body> </html> </source>

使用这种跳转授权方法重新访问:http://apps.renren.com/yourapp/welcome ,发现跳到授权页面如下所示:

720px-Web canvas after auth page.jpg

在确认之后,会跳转到http://apps.renren.com/yourapp/home,如下所示:

600px-Web canvas name picture.jpg

用户授权后有何变化?

我们可以发现,在用户授权以后,apps.renren.com的父框架在嵌套应用服务器页面时会多传很多表示用户信息的参数,例如xn_sig_user, xn_sig_session_key等参数,如下:

<source lang="html"> <iframe name="iframe_canvas" id="iframe_canvas" src="http://www.yourdomain.com/renrenapp/home?xn_sig_in_iframe=1& xn_sig_method=get&xn_sig_time=1308244714057&xn_sig_user=240650143&xn_sig_expires=1308250800& xn_sig_session_key=2.5d5f6e4379580a168a5944ac5a469789.3600.1308250800-240650143&xn_sig_added=1& xn_sig_api_key=02acbca93cd94983b8bc2cbf62912147&xn_sig_app_id=144142&xn_sig_domain=renren.com& access_token=14414%7C6.5d8e35954d8945c7c01dbddb360362b9.2592000.1369450800-223548124& access_token_expires=2594498 xn_sig_user_src=rr&xn_sig=dcb81aa2a011cc1c1085df575360bf95" frameborder="0" class="smart_sizing_iframe"></iframe> </source>

其中access_token参数可用于调用API。[推荐使用]

其中的xn_sig_session_key参数也可用于调用API,但是获取的session_key一小时后过期,需要进行浏览器刷新操作。 [不推荐使用,只用来兼容老应用]

API 文档参考:Rest API

sessionkey、uid等参数的获取

xn_sig参数是指开放平台服务器回调第三方服务器时发送的数字签名参数,这些参数都是以xn_sig作为前缀的:关于xn_sig参数


在你的Web应用中显示用户姓名和头像

在上一章完成用户授权之后,即可以调用Rest API接口,获取到用户的姓名、头像等个人信息。

下载Java SDK

为了获取用户信息,我们需要调用Rest API来完成,但是人人网提供的Java SDK已经将调用细节进行了封装。

下面,我们到人人网开源项目去下载Java SDK:可以直接下载jar包,也可以下载源文件压缩包或在官方代码库使用Hg获取最新的代码。

注意:Java SDK依赖一个称为json-simple的jar包,用于处理Rest API返回的JSON格式的响应文本。如果直接用jar包的话,可以到Java_SDK_jar包下载去下载renren-api-java-sdk.jar和json-simple-1.1.jar并放置到/WEB-INF/lib目录下,并在工程编译时把这个jar包放到build path中。

初始化Java SDK

Java SDK在使用前需要初始化一些重要参数,如API Key以及Secret等。这个初始化只需要执行一次,所以我们放在ServletContextListener中去执行。

创建一个ServletContextListener(类名:com.yourdomain.webcanvas.ApiInitListener),内如如下:

<source lang="java"> package com.yourdomain.webcanvas; import javax.servlet.ServletContextEvent; import javax.servlet.ServletContextListener; import com.renren.api.client.RenrenApiConfig; import com.yourdomain.webcanvas.config.AppConfig; public class ApiInitListener implements ServletContextListener{ @Override public void contextDestroyed(ServletContextEvent arg0) { //Nothing to do } @Override public void contextInitialized(ServletContextEvent arg0) { RenrenApiConfig.renrenApiKey = AppConfig.API_KEY; RenrenApiConfig.renrenApiSecret = AppConfig.APP_SECRET; } } </source>

在这个listener中,我们初始化了API Key和Secret值。

下面把这个listenner配置到web.xml中。在web.xml中添加如下配置:

<source lang="xml"> <listener> <listener-class>com.yourdomain.webcanvas.ApiInitListener</listener-class> </listener> </source>

调用users.getInfo接口

修改com.yourdomain.webcanvas.HomeServlet类,修改后内如如下:

<source lang="java"> package com.yourdomain.webcanvas; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.simple.JSONArray; import org.json.simple.JSONObject; import com.renren.api.client.RenrenApiClient; import com.yourdomain.webcanvas.config.AppConfig; @SuppressWarnings("serial") public class HomeServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, java.io.IOException { String sessionKey = request.getParameter("xn_sig_session_key"); String renrenUserId = request.getParameter("xn_sig_user"); if (sessionKey != null && renrenUserId != null) { RenrenApiClient apiClient = new RenrenApiClient(sessionKey); JSONArray userInfo = apiClient.getUserService().getInfo(renrenUserId, "name,headurl"); if (userInfo != null && userInfo.size() > 0) { JSONObject currentUser = (JSONObject) userInfo.get(0); if (currentUser != null) { String userName = (String) currentUser.get("name"); String userHead = (String) currentUser.get("headurl"); request.setAttribute("userName", userName); request.setAttribute("userHead", userHead); } } } request.setAttribute("appId", AppConfig.APP_ID); RequestDispatcher welcomeDispatcher = request.getRequestDispatcher("/views/home.jsp"); welcomeDispatcher.forward(request, response); } } </source>

上述代码首先从xn_sig参数中获取了Session Key和用户ID,然后创建了一个RenrenApiClient对象用于调用Rest API的用户信息接口(具体接口是users.getInfo接口)。接口调用的的返回结果是一个JSON数组,从里面的恰当的节点中拿到了用户姓名和头像地址。

将用户信息在页面展示

修改/views/home.jsp,增加对于用户姓名和头像的展示。修改后/views/home.jsp的内如如下所示:

<source lang="jsp"> <%@ page contentType="text/html;charset=UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Renren Webcanvas Demo -- Home</title> </head> <body> <img src="${requestScope.userHead}"/> <p>你好,${requestScope.userName}</p> </body> </html> </source>

现在重启web server,访问 http://apps.renren.com/yourapp/home ,结果如下:

600px-Web canvas name picture.jpg

在你的Web应用中显示好友列表

在这一章中,我们通过调用Rest API的另一接口,获取到好友列表信息。这样,用户就可以基于人人网的Social Graph进行好友互动。

调用friends.getFriends接口

我们还是使用Java SDK,来调用Rest API的friends.getFriends接口。再次修改com.yourdomain.webcanvas.HomeServlet类,修改后内如如下:

<source lang="java"> package com.yourdomain.webcanvas; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.simple.JSONArray; import org.json.simple.JSONObject; import com.renren.api.client.RenrenApiClient; import com.yourdomain.webcanvas.config.AppConfig; @SuppressWarnings("serial") public class HomeServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, java.io.IOException { String sessionKey = request.getParameter("xn_sig_session_key"); String renrenUserId = request.getParameter("xn_sig_user"); if (sessionKey != null && renrenUserId != null) { RenrenApiClient apiClient = new RenrenApiClient(sessionKey); //获取用户信息 JSONArray userInfo = apiClient.getUserService().getInfo(renrenUserId, "name,headurl"); if (userInfo != null && userInfo.size() > 0) { JSONObject currentUser = (JSONObject) userInfo.get(0); if (currentUser != null) { String userName = (String) currentUser.get("name"); String userHead = (String) currentUser.get("headurl"); request.setAttribute("userName", userName); request.setAttribute("userHead", userHead); } } //获取好友列表数据 JSONArray friendsList = apiClient.getFriendsService().getFriends(1, 30);//最多取30个好友 request.setAttribute("friendsList", friendsList); } request.setAttribute("appId", AppConfig.APP_ID); RequestDispatcher welcomeDispatcher = request.getRequestDispatcher("/views/home.jsp"); welcomeDispatcher.forward(request, response); } } </source>

上述代码在获取当前用户信息之后,又通过apiClient.getFriendsService().getFriends(1, 30)这步调用获得了当前用户的30个好友。好友数据可以分页获取,这里的表用表示取第1页数据,每页最多取30个。

在页面展示好友头像列表

下面需要修改/views/home.jsp,在其中添加好友头像列表的展示。为了做这个展示,我们会用到JSTL,因此需要再下载两个JSTL的jar包。

JSTL的jar包你可以到 http://jstl.java.net/download.html 下载,也可以在这里下载:Media:jstl-api-1.2.jarMedia:jstl-impl-1.2.jar

将这两个jar包放置到你的web工程的WEB-INF/lib目录下。

修改/views/home.jsp,修改后的内如如下:

<source lang="jsp"> <%@ page contentType="text/html;charset=UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Renren Webcanvas Demo -- Home</title> </head> <body> <img src="${requestScope.userHead}"/> <p>你好,${requestScope.userName}</p> <p>下面是你的一部分好友:</p> <c:forEach var="friend" items="${requestScope.friendsList}"> <img src="${friend.tinyurl}"/> </c:forEach> </body> </html> </source>

现在重启web server,重新访问 http://apps.renren.com/yourapp/home ,结果如下:

600px-Web canvas name picture friends.jpg

在你的Web应用中邀请好友

在这一章中,我们演示如何利用Request Dialog接口,实现邀请好友的功能。

给单个好友发邀请

Request Dialog支持先选定一个好友,然后给Ta发送应用邀请。 下面我们再次修改/views/home.jsp文件,实现点击好友头像发送邀请的功能。修改后的/views/home.jsp文件内如如下:

<source lang="jsp"> <%@ page contentType="text/html;charset=UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Renren Webcanvas Demo -- Home</title> <script type="text/javascript" src="/js/renren_js_sdk/renren.js"></script> <script type="text/javascript"> function sendRequest(toId) { var uiOpts = { url : "request", display : "iframe", params : {"accept_url":"http://apps.renren.com/yourapp/welcome","accept_label":"接受邀请", "to":toId}, style : { "width":500, "height":350 }, onSuccess: function(r){}, onFailure: function(r){} }; Renren.ui(uiOpts); } </script> </head> <body> <script type="text/javascript">Renren.init({appId:${requestScope.appId}});</script> <img src="${requestScope.userHead}"/> <p>你好,${requestScope.userName}</p> <p>下面是你的一部分好友:</p> <c:forEach var="friend" items="${requestScope.friendsList}"> <a href="javascript:sendRequest(${friend.id})"><img src="${friend.tinyurl}"/></a> </c:forEach> </body> </html> </source>

在上面的代码中:我们在<head>中引用了renren.js(即JavaScript SDK),在<body>开始调用Renren.init对JavaScript SDK进行了初始化,将appId传了进去。最后在用户点击每张好友头像的时候,调用sendRequest函数(里面封装了对于JavaScript SDK的Renren.ui函数的调用)给该好友发送邀请(被邀请人的用户ID使用“to”参数传入)。

另外,可以看到,我们用style参数指定了Request Dialog的宽度和高度分别是500和300。

现在我们重新访问 http://apps.renren.com/yourapp/home ,点击某个好友的头像,就会弹出邀请发送确认框,如下:

600px-Web canvas send one2one request.jpg

给多个好友发邀请

Request Dialog还支持同时给多个好友发送邀请。

我们再次修改/views/home.jsp,修改后内如如下:

<source lang="jsp"> <%@ page contentType="text/html;charset=UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Renren Webcanvas Demo -- Home</title> <script type="text/javascript" src="/js/renren_js_sdk/renren.js"></script> <script type="text/javascript"> function sendRequest(isSendToMany, toId) { var params = {"accept_url":"http://apps.renren.com/yourapp/welcome","accept_label":"接受邀请"}; var style = null; if (isSendToMany) { params["actiontext"] = "邀请好友来玩吧"; } else { params["to"] = toId; style = { "width":500, "height":350 }; } var uiOpts = { url : "request", display : "iframe", params : params, style : style, onSuccess: function(r){}, onFailure: function(r){} }; Renren.ui(uiOpts); } </script> </head> <body> <script type="text/javascript">Renren.init({appId:${requestScope.appId}});</script> <img src="${requestScope.userHead}"/> <p>你好,${requestScope.userName}</p> <p>下面是你的一部分好友:<a href="javascript:sendRequest(true)">邀请更多好友...</a></p> <c:forEach var="friend" items="${requestScope.friendsList}"> <a href="javascript:sendRequest(false, ${friend.id})"><img src="${friend.tinyurl}"/></a> </c:forEach> </body> </html> </source>

在上面的代码中,我们调整了sendRequest函数的实现,使得它可以同时适应给单个和多个好友发送邀请的情况:第一个参数isSendToMany如果是true,则表示给多个好友发送邀请,如果是false则表示给单个好友发送邀请,这时就需要传一个被邀请人的toId参数。

我们依然访问 http://apps.renren.com/yourapp/home ,发现多了一个触发多人邀请的链接“邀请更多好友”,如下:

600px-Web canvas before send one2many request.jpg

点击链接“邀请更多好友”后,如下:

600px-Web canvas send one2many request.jpg

收到邀请的好友在哪里接受邀请?

接收到邀请的好友在左侧菜单上的“应用请求”中会产生一个计数,点击进入就可以好友发来的请求:

150px-Web canvas received request count.jpg

在你的Web应用中发送新鲜事

在本章中,我们通过JavaScript SDK调用Feed Dialog来发送新鲜事。

新鲜事是应用非常重要的传播手段,当一个用户发送出新鲜事之后,Ta的好友在人人网首页都会看到这个新鲜事。

新建一个页面发送新鲜事

这一次,我们新创建一个静态html页面,来展示如何使用JavaScript SDK发送新鲜事。

创建/renrenapp/feed.html,内如如下:

<source lang="html"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Renren Webcanvas Demo -- Feed</title> <script type="text/javascript" src="/js/renren_js_sdk/renren.js"></script> <script type="text/javascript"> function sendFeed() { var uiOpts = { url : "feed", display : "iframe", params : { "url":"http://apps.renren.com/yourapp/welcome", "name":"新鲜事测试,这里是标题", "description":"现在我正在测试人人网新鲜事功能,不要理我", "image":"http://at-img4.tdimg.com/board/2011/5/46465.jpg", "action_name": "过来一起玩", "action_link":"http://apps.renren.com/yourapp/welcome" }, onSuccess: function(r){}, onFailure: function(r){} }; Renren.ui(uiOpts); } </script> </head> <body> <script type="text/javascript">Renren.init({appId:144142});</script> <a href="javascript:sendFeed();">点此发送新鲜事</a> </body> </html> </source>

注意:上面传给Renren.init函数的appId参数,需要修改成你的应用的AppId。这个值的来历请参考申请应用并配置基本属性


上述代码仍然是调用Renren.ui函数完成的,可见各种Dialog的调用方式是基本相似的。

确认通过 http://www.yourdomain.com/renrenapp/feed.html 地址可以访问到这个页面。

然后访问 http://apps.renren.com/yourapp/feed.html ,点击链接“点此发送新鲜事”,如下:

600px-Web canvas send feed.jpg


注意:在上图中点击“确定”完成发送之后,你会在你自己的个人主页上看到这条新鲜事。但是,在你的应用被审核通过之前,你的好友是看不到新鲜事的;一旦你的应用被审核通过,发送的新鲜事好友就可以看到了。审核相关的信息请参阅:将你的Web应用提交审核

将你的Web应用提交审核

在开发和测试完你的应用之后,应该提交给人人网进行审核。

在你的应用被审核通过之前,访问人数会受到一定的限制。等到你的应用被审核通过后,所有限制会取消,并且从审核通过第二天开始你的应用会出现在人人网的应用列表页。

提交审核步骤

在应用“编辑属性”里面,选择“应用提交”的Tab,最后补充各项开发者信息,点击“保存开发者信息”进行保存。最后点击“提交应用”,如下图:

Ios tutorial project audit submit.png

在提交审核之后,可以随时查看应用的审核进度:

400px-Ios tutorial project audit status lookup.png

在你的Web应用中集成更多社交功能

本教程是基于人人网提供的JavaScript SDK和Java SDK制作的,里面只演示了人人网开放平台提供的部分功能。

即使在你的应用被审核通过并上线以后,你仍然可以(而且应该)不断地对应用进行改进,来保证持续地提升用户体验。

如果你想在改进的过程中集成更多人人网开放平台提供的功能,那么可以参考人人网开放平台技术架构,人人网开放平台提供的所有接口和SDK都是基于它来实现的。

如果你想对本教程中使用的JavaScript SDK的各个函数有更详细的了解(如参数定义,功能,返回结果定义等),请参考JavaScript SDK源代码中的docs目录下的接口定义文档。


本教程对应的最新的代码可以在这里下载。


感兴趣吗?自己去创建一个WEB站内应用吧~