從 Web Site 到 Web Application,從 Web Services 到 Mobile Services

  • 6,377 views
Uploaded on

從 Web Site 到 Web Application,從 Web Services 到 Mobile Services - 談談使用與管理上的一些有趣小問題,包括前端如何使用 JavaScript 呼叫 Web Services,JSON 格式的小秘密,以及整合 OpenID/OAuth 等內容。

從 Web Site 到 Web Application,從 Web Services 到 Mobile Services - 談談使用與管理上的一些有趣小問題,包括前端如何使用 JavaScript 呼叫 Web Services,JSON 格式的小秘密,以及整合 OpenID/OAuth 等內容。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,377
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. . . Web Site -> Web Application Web Services -> Mobile Services 蘇國鈞 / Monster Su
  • 2. . . Web Site -> Web Application Web Services -> Mobile Services 蘇國鈞 monster.kcsu@gmail.com http://www.facebook.com/monster.kcsu August 2, 2013
  • 3. .. Profile 國立台灣大㈻電機工程㈻研究所畢業 現任 ㈾訊工業策進會 數位教育研究所 ㈾訊技術訓練㆗心 教㈻組長 在 Java 領域㈲㈩多年的講師教㈻經驗 熟悉 XML/Web Services、Design Patterns、EJB/JPA 等 Java EE 規格, Struts/Spring/Hibernate 等 Open Source Framework,與 JBoss AS、GlassFish 等 Application Server 目前負責雲端運算相關技術的推廣,主要包 括 Apache Hadoop、Google App Engine、 Microsoft Azure 等 Cloud Platform,與 iOS、Android、Windows Phone 等 Smart Handheld Device 端的整合運用
  • 4. .. Outline ...1 Introduction ...2 Service Invocation ...3 Data Format ...4 Resource Protection ...5 Summary
  • 5. ...1 Introduction ...2 Service Invocation ...3 Data Format ...4 Resource Protection ...5 Summary
  • 6. .. Web Site - 單向傳播 http://java.oracle.com/
  • 7. .. Web Application - 單㆒平台雙向互動 http://pixlr.com/o-matic/
  • 8. .. Web Services - SOAP http://www.webservicex.net/ws/default.aspx
  • 9. .. Web Services - RESTful http://www.programmableweb.com/
  • 10. .. Site?Application?App?Service? http://www.dailymail.co.uk/sciencetech/article-2289777/ Facebook-reveals-major-magazine-redesign-make-sharing-pictures-easier.html http://crunchify.com/facebook-likebox-plugin-is-now-upto-4x-faster/ http://skpsinha.com/add-facebook-activity-plugin-to-your-blog/
  • 11. .. Mobile Services - 多種型式雙向互動 https://www.dropbox.com/install2
  • 12. .. Web?Mobile?Cloud?Services Java EE 7 Tutorial 的解釋: Web services are client and server applications that communicate over the World Wide Web's (WWW) HyperText Transfer Protocol (HTTP). 實際㆖的情況: Client 端早就不只包括 Browser,還㈲各種 App,Service 間彼此也會串接 Service 為了應付龐大的 Request,也早就 搬到 Cloud Web、Mobile、Cloud 已經完全分不開了!
  • 13. .. Let the clouds make your life easier https://www.facebook.com/CodeChef
  • 14. .. Challenge - 15107/s,874560/m http://www.infoq.com/news/2012/11/twitter-ruby-to-java
  • 15. .. Concerns http://blogs.msdn.com/b/dachou/archive/2009/01/13/cloud-computing-and-the-microsoft-platform.aspx
  • 16. .. 開發過程㆗要面對的議題 State Persistence Caching Strategy Thread Management Asynchronous/Non-Blocking I/O … 既要能 Scale Up,又要能 Scale Out: 機器不夠好就租更好的機器 ㆟不夠強就聘更強的㆟ 機器不夠多就租更多的機器 ㆟不夠多就聘更多的㆟
  • 17. .. 想辦法 Scale Up
  • 18. .. 儘可能 Scale Out
  • 19. .. 我也只是個凡㆟…
  • 20. .. 使用與管理過程㆗要面對的議題 Service Invocation Data Format Resource Protection … 在眾神環繞的場合㆗,輕鬆聊㆒㆘凡㆟的話題: JavaScript 怎麼㈺叫後端 Web Services? JSON 格式到底在搞些什麼鬼? 怎麼用 OpenID/OAuth 控管 Resource?
  • 21. ...1 Introduction ...2 Service Invocation ...3 Data Format ...4 Resource Protection ...5 Summary
  • 22. .. JavaScript vs. Web Services JavaScript ㈺叫 RESTful Web Services: 拿到 Web Services 的 Resource URI 透過 jQuery 送出 HTTP POST/DELETE/ GET/PUT Request 去操作 Resource JavaScript ㈺叫 SOAP Web Services: 拿到 Web Services 的 WSDL 透過工具產生 Web Services 的 JavaScript Proxy 進行㈺叫 問題是:JavaScript Proxy 怎麼產生?
  • 23. .. JavaScript vs. SOAP Web Services ㉂己㊢個 JavaScript SOAP Client http://www.guru4.net/articoli/javascript-soap-client/en/ Apache CXF 的 wsdl2js 工具 http://cxf.apache.org/docs/javascript-clients.html 透過 DWR 與 Spring Framework ㈿助 https://blogs.oracle.com/sameert/entry/dwr_and_web_services Donma Hsu 的 NO2AjaxGenerator 工具 http://no2don.blogspot.com/2013/06/a-tool-for-convert-net-webserviceasmx.html …
  • 24. .. ㉂己㊢個 JavaScript SOAP Client 先透過強大的 soapUI 產生 SOAP Request/Response
  • 25. .. 透過 jQuery 收送 SOAP Message http://javascript.monstersupreme.cloudbees.net/ 1 $.ajax({ 2 url: 'http://www.webservicex.net/globalweather.asmx', 3 type: 'POST', 4 data: '<soapenv:Envelope 5 xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" 6 xmlns:web="http://www.webserviceX.NET"> 7 <soapenv:Header/> 8 <soapenv:Body> 9 <web:GetWeather> 10 <web:CityName>Taipei</web:CityName> 11 <web:CountryName>Taiwan</web:CountryName> 12 </web:GetWeather> 13 </soapenv:Body> 14 </soapenv:Envelope>', 15 contentType: 'text/xml', 16 success: function (soapResponse) { 17 $("#xml").html($(soapResponse).text()); 18 } 19 });
  • 26. .. Access-Control-Allow-Origin 問題 https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request. Origin http://localhost:8888 is not allowed by Access-Control-Allow-Origin.
  • 27. .. Same Origin Policy http://en.wikipedia.org/wiki/Same_origin_policy Web 應用程式使用的 Resource 必須出㉂同㆒個 來源,包括 Protocol、Domain Name、與 Port Number。 常見例外㈲ JavaScript <script> 的 src 屬性、CSS <link> 的 href 屬性、與 <img> 的 src 屬性,可以直接使 用外部㈾源。
  • 28. .. Chrome 的測試方式 Windows chrome.exe –args –disable-web-security Mac OS X open -a "Google Chrome" --args --disable-web-security
  • 29. .. jQuery SOAP-Related Plugins jQuery Soap Client http://archive.plugins.jquery.com/project/jqSOAPClient jQuery Soap http://plugins.jquery.com/soap/ jQuery Soap https://github.com/zachofalltrades/jquery.soap …
  • 30. .. jQuery Soap http://plugins.jquery.com/soap/ 1 $.soap({ 2 url: 'http://www.webservicex.net/globalweather.asmx', 3 method: 'GetWeather', 4 appendMethodToURL: false, 5 soap12: false, 6 SOAPAction: 'http://www.webserviceX.NET/GetWeather', 7 namespaceQualifier: 'web', 8 namespaceURL: 'http://www.webserviceX.NET', 9 params: { 10 CityName: "Taipei", 11 CountryName: "Taiwan" 12 }, 13 success: function (soapResponse) { 14 $("#xml").html(soapResponse.toString()); 15 }, 16 error: function (error) { 17 $("#error").html($(error).text()); 18 } 19 });
  • 31. .. Apache CXF 的 wsdl2js http://cxf.apache.org/docs/javascript-clients.html wsdl2js 指令: Apache CXF 2.1 版開始支援 目前只支援 SOAP 1.1 版 不支援太複雜的 XML Schema 不支援 Cross-Scripting 執行 wsdl2js 指令: wsdl2js -d WebContent/js http://www.xmlme.com/WSDailyNet.asmx?WSDL
  • 32. .. Apache CXF 的 wsdl2js 產生 JavaScript Proxy: 1 function xmlme_com_WebServices_DotnetDailyFactSoap(){ 2 this.synchronous = false; 3 this.url = null; 4 ... 5 } 6 7 function xmlme_com_WebServices_GetDotnetDailyFact_op(sCallback, eCallback){ 8 this.client = new CxfApacheOrgClient(this.jsutils); 9 ... 10 this.client.user_onsuccess = sCallback; 11 this.client.user_onerror = eCallback; 12 var closureThis = this; 13 this.client.onsuccess = function(client, responseXml){ 14 closureThis.GetDotnetDailyFact_onsuccess(client, responseXml); }; 15 this.client.onerror = function(client){ 16 closureThis.GetDotnetDailyFact_onerror(client); }; 17 ... 18 this.client.request(this.url, xml, null, this.synchronous, reqHeaders); 19 }
  • 33. .. Apache CXF 的 wsdl2js Client 端透過 JavaScript Proxy ㈺叫 Web Services: 1 <script src="js/jquery-2.0.3.js"></script> 2 <script src="js/cxf-utils.js"></script> 3 <script src="js/DotnetDailyFact.js"></script> 4 <script> 5 function doDotnetDailyFactSoap(){ 6 var dotnet = new xmlme_com_WebServices_DotnetDailyFactSoap(); 7 dotnet.url = "http://www.xmlme.com/WSDailyNet.asmx"; 8 dotnet.GetDotnetDailyFact( 9 function(response){ 10 $("#xml").html(response.getGetDotnetDailyFactResult()); 11 }, 12 function(error){ 13 $("#xml").html(error); 14 }); 15 } 16 </script>
  • 34. .. DWR + Spring vs. SOAP DWR 面對前端、Spring Framework 處理後端: Spring Framework 可以透過 XXXXProxyFactoryBean ㈹為㈺叫各種 Web Services DWR 可以為 Java 物件 (XXXXProxyFactoryBean) 在 Server 端動態產生 JavaScript Proxy,方便 Client 端透過 JavaScript ㈺叫 DWR 3.0 版還可以直接透過類似 RESTful 的方式㈺叫 產生出來的 JavaScript Proxy 跟㉂己㊢的 JavaScript Client 端是在同㆒台 Server,所以沒 ㈲ Same Origin Policy 這個問題!
  • 35. .. Spring Framework 組態設定 http://directwebremoting.org/dwr/documentation/server/integration/spring.html 1 <beans ... 2 xmlns:dwr="http://www.directwebremoting.org/schema/spring-dwr" 3 xsi:schemaLocation="... 4 http://www.directwebremoting.org/schema/spring-dwr 5 http://www.directwebremoting.org/schema/spring-dwr-3.0.xsd"> 6 <bean id="globalWeatherSoap" 7 class="org.springframework.remoting.jaxws.JaxWsPortProxyFactoryBean"> 8 <property name="wsdlDocumentUrl" 9 value="http://www.webservicex.net/globalweather.asmx?WSDL" /> 10 <property name="serviceInterface" 11 value="net.webservicex.globalweather.GlobalWeatherSoap" /> 12 <property name="namespaceUri" value="http://www.webserviceX.NET" /> 13 <property name="serviceName" value="GlobalWeather" /> 14 <property name="portName" value="GlobalWeatherSoap" /> 15 <dwr:remote javascript="JGlobalWeatherSoap"> 16 <dwr:include method="getWeather" /> 17 </dwr:remote> 18 </bean> 19 </beans>
  • 36. .. DWR 組態設定 http://directwebremoting.org/dwr/documentation/server/integration/spring.html 1 <web-app ...> 2 <servlet> 3 <servlet-name>DwrServlet</servlet-name> 4 <servlet-class> 5 org.directwebremoting.spring.DwrSpringServlet 6 </servlet-class> 7 <init-param> 8 <param-name>jsonpEnabled</param-name> 9 <param-value>true</param-value> 10 </init-param> 11 <init-param> 12 <param-name>debug</param-name> 13 <param-value>true</param-value> 14 </init-param> 15 </servlet> 16 <servlet-mapping> 17 <servlet-name>DwrServlet</servlet-name> 18 <url-pattern>/dwr/*</url-pattern> 19 </servlet-mapping> 20 </web-app>
  • 37. .. jQuery + DWR JavaScript Proxy 1 JGlobalWeatherSoap.getWeather("Taipei", "Taiwan", function(weather){ 2 $("#xml").text(weather); 3 });
  • 38. .. DWR 很犯規的 JSONP Remoting http://directwebremoting.org/dwr/introduction/remoting_options.html http://www.example.com/dwr/jsonp/className/methodName/param1/param2 1 $.ajax({ 2 type: 'POST', 3 dataType: 'json', 4 url: 'dwr/jsonp/JGlobalWeatherSoap/getWeather/Taipei/Taiwan', 5 success: function (jsonResponse){ 6 $("#dwr").text(JSON.stringify(jsonResponse)); 7 } 8 });
  • 39. .. jQuery XML to JSON Plugin http://www.fyneworks.com/jquery/xml-to-json/
  • 40. .. 把怪怪的 JSON 轉成正常的 JSON 1 $.ajax({ 2 type: 'POST', 3 dataType: 'json', 4 url: 'dwr/jsonp/JGlobalWeatherSoap/getWeather/Taipei/Taiwan', 5 success: function (jsonResponse) { 6 $("#dwr").text(jsonResponse.reply); 7 var xml = $("#dwr").text(); 8 var json = $.xml2json(xml); 9 $("#dwr").text(JSON.stringify(json)); 10 } 11 });
  • 41. .. 更犯規的 ASP.NET Web Services http://directwebremoting.org/dwr/introduction/remoting_options.html 加㆖ ResponseFormat.Json 的 Web Method: 1 [WebMethod] 2 [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 3 public User AddUser(User user) 4 { 5 user.Id = 24601; 6 user.name = "Jean Valjean"; 7 return user; 8 } 雖然是 SOAP Web Services,但是直接透過 Server 端把結果轉成 JSON 格式傳回。
  • 42. .. Donma Hsu 的 NO2AjaxGenerator http://no2don.blogspot.com/2013/06/a-tool-for-convert-net-webserviceasmx.html
  • 43. ...1 Introduction ...2 Service Invocation ...3 Data Format ...4 Resource Protection ...5 Summary
  • 44. .. JSON vs. JavaScript Object http://www.json.org/ JSON 格式的㈾料開頭結尾必須是大括號 JSON 的字串只能用雙引號括起來 JSON 的 key ㆒定要用雙引號括起來
  • 45. .. ㈲趣的 JSON - eval() 為什麼 eval 方法要求 JSON 格式的字串前後必須 加㆖圓括號: 1 var jsonString = '{"hello": "world"}'; 2 var javascriptObject = eval("(" + jsonString + ")");
  • 46. .. ㈲趣的 JSON - eval() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label JavaScript Syntax ㈲ Label 這種東西: 1 gotohell: 2 for (i = 0; hells.length; i++) { 3 console.log("加油,你可以的!"); 4 continue gotohell; 5 console.log("別傻了!"); 6 } 因為 JavaScript Interpreter 會以 Label ㊝先解 釋,{"key": value} 的 "key" 會解讀為不合法的 Label, 所以 JSON Object 會被認為 Syntax Error。 加㆖圓括號之後,({"key": value}) 就不會被 eval 方法 誤判了!
  • 47. .. ㈲趣的 JSON - JSON.parse() 如果透過 eval 方法,處理以㆘的 JSON 字串: 1 var jsonString = '{ 2 "username": "Monster", 3 "password": "Supreme" 4 });alert("Hi!"'; 5 var javascriptObject = eval("(" + jsonString + ")"); 會㈲什麼結果?
  • 48. .. ㈲趣的 JSON - JSON.parse() 建議透過內建或外掛的 JSON.parse 方法,處理以㆘ 的 JSON 字串: 1 var jsonString = '{ 2 "username": "Monster", 3 "password": "Supreme" 4 });alert("Hi!"'; 5 var javascriptObject = JSON.parse(jsonString); 這時又會㈲什麼結果?
  • 49. .. ㈲趣的 JSON - JAX-RS API 為什麼 JAX-RS 可以輕鬆㆞將 Customized Object 轉成 JSON 字串傳回,但是卻沒辦法直 接傳回 Primitive Data Type? 1 @GET 2 @Path("/getCount") 3 @Produces(APPLICATION_JSON) 4 public int getCount() 5 { 6 return books.size(); 7 } 1 @GET 2 @Path("/getBook/{bookId}") 3 @Produces(APPLICATION_JSON) 4 public Book getBook(@PathParam("bookId") int bookId) 5 { 6 return books.get(bookId); 7 }
  • 50. .. ㈲趣的 JSON - JAX-RS API http://stackoverflow.com/questions/16408950/ jax-rs-jersey-getinteger-class-and-single-json-primitive-integer-values 因為 JSON 格式的字串,必須是個大括號開頭結 尾的物件,不能夠是單㆒的值。 1 class Result<T> 2 { 3 private T data; 4 // constructors, getters, setters 5 } 6 7 // 傳回 {"data": 1} 之類的結果 8 @GET 9 @Path("/getCount") 10 @Produces(APPLICATION_JSON) 11 public Result<Integer> getCount() 12 { 13 return new Result<Integer>(books.size()); 14 }
  • 51. .. ㈲趣的 JSON - ASP.NET 為什麼 ASP.NET 傳回的 JSON 字串,㆒定是 {"d": value} 或 {"d": object} 的型式?
  • 52. .. ㈲趣的 JSON - ASP.NET 因為: JSON Array 是合法的 JavaScript 敘述 <script> 是透過 HTTP GET 觸發 可以改㊢ Array 建構式與 Object __defineSetter__ 方法 所以可以利用這些㈵性鑽漏洞: JSON is not as safe as people think it is JSON Hijacking and How ASP.NET AJAX 1.0 Avoids these Attacks Anatomy of a Subtle JSON Vulnerability JSON Hijacking
  • 53. .. ㈲趣的 JSON - ASP.NET http://encosia.com/never-worry-about-asp-net-ajaxs-d-again/ ASP.NET 避開可能的 XSS 攻擊的作法: 預設透過 HTTP POST ㈺叫 JSON Service Content-Type ㆒定要 application/json 把 Response 封裝為 JSON Object 讓 Service 傳回非 JSON Array 的結果
  • 54. .. ㈲趣的 JSON - ASP.NET http://encosia.com/never-worry-about-asp-net-ajaxs-d-again/ 透過 jQuery 解決傳說㆗的 .d 困擾: 1 $.ajax({ 2 type: "POST", 3 url: "WebService.asmx/MethodName", 4 data: "{}", 5 contentType: "application/json; charset=utf-8", 6 dataType: "json", 7 success: function(msg) { 8 if (msg.hasOwnProperty("d")) 9 // Leave the .d behind and pass the rest of 10 // the JSON object forward. 11 DoSomething(msg.d); 12 else 13 // No .d; no transformation necessary. 14 DoSomething(msg); 15 } 16 });
  • 55. .. 還記得 DWR 的怪怪 JSON 嗎? 所以,ASP.NET ㈲ .d 困擾,DWR ㈲ .reply 困擾!
  • 56. ...1 Introduction ...2 Service Invocation ...3 Data Format ...4 Resource Protection ...5 Summary
  • 57. .. Identity Management http://blog.programmableweb.com/2012/08/30/in-defense-of-oauth-2-0/
  • 58. .. ㆒大堆記不得的帳號與密碼 https://developers.google.com/appengine/articles/openid?hl=zh-tw
  • 59. .. 可不可以簡化成為㆒組? http://newsletter.ascc.sinica.edu.tw/news/read_news.php?nid=1718
  • 60. .. OpenID Single Sign-On Scheme 透過㆒個 Trusted Server 集㆗管理 User 的 Personal Data User 在各個不同的 Web Service 都使用相 同的帳號密碼 User 的帳號密碼跟各個 Web Service 是獨 立存在的關係 OpenID Server Listing http://openid.net/get-an-openid/ 比較常見的是 Google、Yahoo!、myOpenID ㆗研院也㈲ myID.tw 專案
  • 61. .. OpenID 運作方式 https://wiki.auckland.ac.nz/pages/viewpage.action?pageId=30673880
  • 62. .. 對岸某個網站的㈲趣畫面
  • 63. .. OAuth A Delegated Authorization Protocol 讓 Consumer Service 能夠存取 User 放在 Provider Service 的㈾料 User 不需直接提供帳號密碼給 Consumer Consumer 想要存取 User 放在 Provider 的 ㈾料時,流程會轉到 Provider 的登入機制 User 登入 Provider 之後,Provider 會回傳 Authorization Token 給 Consumer 之後,Consumer 就可以直接透過 Token 存 取 User 放在 Provider ㆖的㈾料 比較常見的是 Facebook、Twitter 等等
  • 64. .. OAuth 運作方式 http://www.ubelly.com/2010/02/building-a-simple-oauth-twitter-application/
  • 65. .. Spring Security vs. OpenID/OAuth OpenID: 透過 openid4java ㈿助,網址是 http://code.google.com/p/openid4java/ OAuth: 透過 Spring Security OAuth ㈿助,網址是 http://www.springsource.org/spring-security-oauth 對 Consumer Service 與 Provider Service 都㈲提供支援 也支援 Two-Legged OAuth 與 OAuth 2.0
  • 66. .. pac4j 可以大幅簡化複雜度 https://github.com/leleuj
  • 67. .. 申請 OpenID 帳號 https://www.myopenid.com/
  • 68. .. 建立㆒個 Facebook App https://developers.facebook.com/
  • 69. .. Facebook App 的 Permission 列表 https://developers.facebook.com/docs/reference/fql/permissions/
  • 70. .. 決定請求哪些 Permission https://developers.facebook.com/apps
  • 71. .. 刪除 Facebook App 的授權 https://www.facebook.com/settings?tab=applications
  • 72. .. One-Time/Persistent Authentication https://www.myopenid.com/sites
  • 73. .. Spring Security + pac4j 設定 1 <beans ... 2 <security:http pattern="/fb/**" entry-point-ref="facebookEntryPoint"> 3 <security:custom-filter after="CAS_FILTER" ref="clientFilter" /> 4 <security:intercept-url 5 pattern="/facebook/**" access="IS_AUTHENTICATED_FULLY" /> 6 </security:http> 7 8 <security:http pattern="/form/**" entry-point-ref="formEntryPoint"> 9 <security:custom-filter after="CAS_FILTER" ref="clientFilter" /> 10 <security:intercept-url 11 pattern="/form/**" access="IS_AUTHENTICATED_FULLY" /> 12 </security:http> 13 14 <security:http pattern="/**" entry-point-ref="myOpenIdEntryPoint"> 15 <security:custom-filter after="CAS_FILTER" ref="clientFilter" /> 16 <security:intercept-url 17 pattern="/openid/**" access="IS_AUTHENTICATED_FULLY" /> 18 <security:intercept-url 19 pattern="/**" access="IS_AUTHENTICATED_ANONYMOUSLY" /> 20 </security:http> 21 </beans>
  • 74. .. Spring Security + pac4j 設定 1 <beans ... 2 <bean id="facebookClient" class="org.pac4j.oauth.client.FacebookClient"> 3 <property name="key" value="Facebook App 的 key" /> 4 <property name="secret" value="Facebook App 的 secret" /> 5 </bean> 6 7 <bean id="authenticator" 8 class="org.pac4j.http.credentials.MyUsernamePasswordAuthenticator" /> 9 10 <bean id="formClient" class="org.pac4j.http.client.FormClient"> 11 <property name="loginUrl" 12 value="http://localhost:8080/SpringSecurityDemo/login.jsp" /> 13 <property name="usernamePasswordAuthenticator" ref="authenticator" /> 14 </bean> 15 16 <bean id="openIdClient" class="org.pac4j.openid.client.MyOpenIdClient" /> 17 </beans>
  • 75. .. 透過 pac4j 擷取㈾料 1 <body> 2 <h1>Facebook OAuth Authorization</h1> 3 <hr /> 4 <% ClientAuthenticationToken token = (ClientAuthenticationToken) 5 SecurityContextHolder.getContext().getAuthentication(); %> 6 Profile : <%= token.getUserProfile() %> 7 <% UserProfile profile = token.getUserProfile(); 8 Iterator<String> keys = 9 profile.getAttributes().keySet().iterator(); 10 StringBuffer buffer = new StringBuffer(); 11 buffer.append("<p>"); 12 while (keys.hasNext()) 13 { 14 String key = keys.next(); 15 Object value = profile.getAttribute(key); 16 buffer.append(key + ": " + value.toString() + "<br />"); 17 } 18 buffer.append("</p>"); %> 19 <%= buffer.toString() %> 20 </body>
  • 76. .. Authentication vs. Authorization Authentication 驗證你是不是某個 User Authorization 授與 A 服務使用你放在 B 平台㈾料的權利 所以: OpenID 確認你是某個 User OAuth SlideShare (A) 擁㈲在你 Facebook 塗鴉牆 (B) 貼文的權利,但 SlideShare 並不是你, 也無法用你的㈴義貼文到其他㆟的塗鴉牆
  • 77. ...1 Introduction ...2 Service Invocation ...3 Data Format ...4 Resource Protection ...5 Summary
  • 78. .. Apps - Devices - Services http://blogs.msdn.com/b/dotnet/archive/2013/07/16/ responsible-for-a-million-dollar-software-project-but-don-t-know-where-to-start.aspx
  • 79. .. ㈾策會教研所 ㈾訊技術訓練㆗心 http://www.iiiedu.org.tw/taipei
  • 80. 謝謝大家! Slide 與 Demos: http://www.slideshare.net/KuoChunSu/ web-site-web-application-web-services-mobile-services http://javascript.monstersupreme.cloudbees.net http://social.monstersupreme.cloudbees.net