此篇是介紹如何透過Facebook Javascript SDK來取得登入者的社團及粉絲頁資訊，
前一篇我們介紹了授權功能，但授權的資訊是存在於Facebook端，
這篇我們需要將所需的資訊儲存在本地端的資料庫，
之後才能利用本地端的資料庫進行發文粉絲頁或社團的動作。
首先下方程式碼是利用FB.api來進行溝通，
取得社團資訊是使用 '/me/groups' ，
粉絲頁部份則是 '/me/accounts' 。
注意的是粉絲頁需要額外的Token來進行要求，
故 accessTokenEpire 必須是登入時請求 manage_pages,publish_pages這兩項權限的token才能成功請求。
社團及粉絲頁會將回傳資料整理成input checkbox 形式放入到div標簽中，
提供給使用者進行圈選希望發文的目標。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| var groups1; | |
| var groups2; | |
| FB.api('/me/groups',function(response){ | |
| if(!response || response.error){ | |
| message("取得社團資訊失敗"); | |
| }else{ | |
| groups1 = response.data; | |
| //可以使用groups1進行後續動作 | |
| var checkbox1; | |
| var value; | |
| if(groups1 != null){ | |
| //將checkbox選項塞到div.row中 | |
| for(var i=0;i<groups1.length;i++){ | |
| value = "group"+i; | |
| checkbox1 = $("<div class=\"6u 12u$(small)\"><input type=\"checkbox\" id=\""+value+"\" name=\"ids\" value=\""+groups1[i].id+"\"><label for=\""+value+"\" id=\"\" >"+groups1[i].name+"</label></div>") | |
| output.append(checkbox1); | |
| } | |
| } | |
| } | |
| }); | |
| var accessTokenEpire; //accessTokenEpire 登入時獲得的token | |
| FB.api('/me/accounts',{access_token:accessTokenEpire},function(response){ | |
| if(!response || response.error){ | |
| message("取得粉絲頁資訊失敗"); | |
| }else{ | |
| groups2 = response.data; | |
| //可以使用groups2進行後續動作 | |
| var output = $("div.row"); | |
| var checkbox; | |
| var value2; | |
| if(groups2 != null){ | |
| //將checkbox選項塞到div.row中 | |
| for(var i=0;i<groups2.length;i++){ | |
| value2 = "account"+i; | |
| checkbox = $("<div class=\"6u 12u$(small)\"><input type=\"checkbox\" id=\""+value2+"\" name=\"ids\" value=\""+groups2[i].id+"\"><label for=\""+value2+"\" id=\""+groups2[i].access_token+"\" >"+groups2[i].name+"</label></div>") | |
| output.append(checkbox); | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| <div class="row uniform"> | |
| </div> |
當使用者選則完畢後點選儲存按鍵會呼叫callSave()，
此function會將input上選取得值一一記錄，
並將其轉為json格式後傳送到test2.jsp進行處理。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <input type="checkbox" id="group1" name="ids" value="社團ID"><label for="group1"> | |
| <input type="checkbox" id="group2" name="ids" value="社團ID"><label for="group2"> | |
| <input type="checkbox" id="account1" name="ids" value="粉絲頁ID"><label for="account1" id="粉絲頁token"> | |
| <input type="checkbox" id="account2" name="ids" value="粉絲頁ID"><label for="account2" id="粉絲頁token"> | |
| <a id="saveclick" href="#" onclick="callSave();">儲存資訊！</a> | |
| <script> | |
| function callSave(){ | |
| var arr = new Array(); | |
| $("input[name='ids']").each(function(){ | |
| if($(this).prop("checked")){ | |
| var obj = new Object; | |
| obj.id = $(this).val(); | |
| obj.name = $(this).next().html(); | |
| obj.token = $(this).next().attr("id"); | |
| arr.push(obj); | |
| } | |
| }); | |
| if(arr != null){ | |
| var tokenid = $("input#createID").val(); | |
| if(tokenid.length != 0){ | |
| var obj = new Object; | |
| obj.id = tokenid; | |
| obj.name = "FBdata index"; | |
| arr.push(obj); | |
| jQuery.ajax({ | |
| type : 'POST', | |
| url : 'test2.jsp', | |
| dataType: "json", | |
| data : {'jsondata' : JSON.stringify(arr)}, | |
| success : function(data){ | |
| var errorMessage = data.errorMessage; | |
| if(errorMessage != null && typeof(errorMessage) != 'undefined'){ | |
| message(errorMessage); | |
| }else{ | |
| message("完成儲存"); | |
| } | |
| }, | |
| error : function(XMLHttpRequest,error,errorThrown){ | |
| message("粉絲頁、社團資訊回存失敗"); | |
| } | |
| }); | |
| }else{ | |
| message("無法取得token_id"); | |
| } | |
| }else{ | |
| message("沒有選擇任何社團或粉絲頁"); | |
| } | |
| } | |
| function message(content){ | |
| alert(content); | |
| } | |
| </script> |
要注意的是粉絲頁的回傳值比社團多了Token值，
此Token是交換過的粉絲頁專用token，要記得儲存下來。
下方程式碼是透過解析json的方式儲存至資料庫，
FBData 是我個人針對table寫的儲存function。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <%@page import="org.dspace.app.webui.util.UIUtil"%> | |
| <%@page import="org.dspace.core.Context"%> | |
| <%@page import="edu.nccu.friedriceapi.content.FBData"%> | |
| <%@page import="java.util.Map"%> | |
| <%@page import="java.util.HashMap"%> | |
| <%@page import="org.json.JSONArray"%> | |
| <%@page contentType="text/html" pageEncoding="UTF-8"%> | |
| <%@ page language="java" import="org.json.JSONObject" %> | |
| <% | |
| Context context = UIUtil.obtainContext(request); | |
| String data = request.getParameter("jsondata"); | |
| if(data == null || "".equals(data)){ | |
| map.put("errorMessage","有任何資料進行儲存"); | |
| }else{ | |
| Map<String,Object> map = new HashMap<String,Object>(); | |
| try{ | |
| JSONArray jsonarray = new JSONArray(data); | |
| int jsonL = jsonarray.length(); | |
| FBData fbdata = FBData.create(context); | |
| JSONArray list = new JSONArray(); | |
| for(int i=0;i<jsonL-1;i++){ | |
| list.put(jsonarray.get(i)); | |
| } | |
| fbdata.setMetadata("資料庫table", list.toString()); | |
| fbdata.update(); | |
| context.commit(); | |
| }catch(Exception e){ | |
| out.println(e.getMessage()); | |
| } | |
| } | |
| JSONObject json = new JSONObject(map); | |
| out.print(json.toString()); | |
| %> |
以上是這篇的介紹，
提供給大家做參考。
文章標籤
全站熱搜
留言列表
軟體技術 (2)
