SlideShare a Scribd company logo
1 of 21
Being Social

A quick introduction to integrating
          with Facebook


                                         Kim Ross
                                      @kimbertles
                                           #ljcjug
Who am I?




               Kim Ross
            @kimbertles
                 #ljcjug
Facebook Integration
•   http://developers.facebook.com/
•   Website
•   Mobile
•   Apps




                                         Kim Ross
                                      @kimbertles
                                           #ljcjug
http://apps.facebook.com/ljc-presentation




                                               Kim Ross
                                            @kimbertles
                                                 #ljcjug
I, Robot
Kim Ross
@kimbertles
     #ljcjug
Kim Ross
                                                                  @kimbertles
http://developers.facebook.com/docs/authentication/server-side/        #ljcjug
FacebookController
@RequestMapping("/fb/")
public String fb(
     @RequestParam(value = "signed_request") String signedRequest, Model model)

1. Check signed request signature

String[] parts = signedRequest.split(".", 2);
Base64 decoder = new Base64(true); // Gotcha - decoder must be base64 URL
String sig = new String(decoder.decode(parts[0].getBytes()));
checkSignature(sig, parts[1]);
 String data = new String(decoder.decode(parts[1].getBytes()))




                                                                       Kim Ross
                                                                    @kimbertles
                                                                         #ljcjug
2. Check if already authorised


    JSONObject sReq = new JSONObject(data);
     if (sReq.has("user_id")) {
           model.addAttribute("accessToken", sReq.getString("oauth_token"));
           return "facebook";
     }




                                                                            Kim Ross
                                                                         @kimbertles
                                                                              #ljcjug
3. If not authenticated, request permissions

StringBuilder redirectUrl = new StringBuilder(
     "http://www.facebook.com/dialog/oauth/?client_id=");
redirectUrl.append(FacebookConstants.APP_ID);
redirectUrl.append("&redirect_uri=");
redirectUrl.append(URLEncoder.encode(
          "http://apps.facebook.com/ljc-presentation/auth/", "UTF-8"));
redirectUrl.append("&state=");
redirectUrl.append("MYSTATE");
redirectUrl.append("&scope=");
redirectUrl.append("email,user_likes");
return "redirect:" + redirectUrl.toString();




                                                                             Kim Ross
                                                                          @kimbertles
                                                                               #ljcjug
Kim Ross
                                                                  @kimbertles
http://developers.facebook.com/docs/authentication/server-side/        #ljcjug
Getting the access token
String code = request.getParameter("code");
StringBuilder accessTokenUri = new StringBuilder(
     "https://graph.facebook.com/oauth/access_token?client_id=");
accessTokenUri.append(FacebookConstants.APP_ID);
accessTokenUri.append("&redirect_uri=");
accessTokenUri.append(URLEncoder.encode(
     "http://apps.facebook.com/ljc-presentation/auth/", "UTF-8")); **
accessTokenUri.append("&client_secret=");
accessTokenUri.append(FacebookConstants.APP_SECRET);
accessTokenUri.append("&code=");
accessTokenUri.append(URLEncoder.encode(code, "UTF-8"));

HttpClient client = new HttpClient();
GetMethod getter = new GetMethod(accessTokenUri.toString());
client.executeMethod(getter);

String response = getter.getResponseBodyAsString();
String accessToken = response.substring(
     response.indexOf("=") + 1, response.indexOf("&expires"));             Kim Ross
model.addAttribute("accessToken", accessToken);                         @kimbertles
                                                                             #ljcjug
FacebookController.fb
@RequestMapping("/fb/auth/")
public String auth(HttpServletRequest request, Model model)


if (request.getParameter("error") != null) { // User denied app
      return "aww";
}




                                                                     Kim Ross
                                                                  @kimbertles
                                                                       #ljcjug
Kim Ross
                                                                  @kimbertles
http://developers.facebook.com/docs/authentication/server-side/        #ljcjug
The “Beautiful” app




<a href="/ljc-facebook/me?accessToken=${accessToken}">Me</a>
<br>
<a href="/ljc-facebook/likes?accessToken=${accessToken}">Likes</a>
<br>
<a href="/ljc-facebook/friends?accessToken=${accessToken}">Friends</a>




                                                                            Kim Ross
                                                                         @kimbertles
                                                                              #ljcjug
InfoController
private String facebookCall(String uri) throws HttpException, IOException {
     HttpClient client = new HttpClient();
     GetMethod getter = new GetMethod(uri);
     client.executeMethod(getter);
     return getter.getResponseBodyAsString();
}




responseBody.jsp

${response}




                                                                                 Kim Ross
                                                                              @kimbertles
                                                                                   #ljcjug
Me
@RequestMapping("/me")
public String me(@RequestParam accessToken, Model model)
     String body = facebookCall(
          "https://graph.facebook.com/me?access_token=" + accessToken);
     model.addAttribute("response", body);
     return "responseBody";
}
Likes
@RequestMapping("/likes")
public String likes(@RequestParam accessToken, Model model) {
     String body = facebookCall(
          "https://graph.facebook.com/me/likes?access_token=" + accessToken);
     model.addAttribute("response", body);
     return "responseBody";
}
Friends
@RequestMapping("/friends")
public String friends(@RequestParam accessToken, Model model) {
     String body = facebookCall(
          "https://graph.facebook.com/me/friends?access_token=" + accessToken);
     model.addAttribute("response", body);
     return "responseBody";
}
Thanks for listening!

http://developers.facebook.com/
https://github.com/kross/ljc-facebook

     @kimbertles




                                           Kim Ross
                                        @kimbertles
                                             #ljcjug

More Related Content

Viewers also liked

Final draft powerpoint
Final draft powerpointFinal draft powerpoint
Final draft powerpoint
sgillott
 
Paparazzi and their impact
Paparazzi and their impactPaparazzi and their impact
Paparazzi and their impact
buaa92
 

Viewers also liked (9)

Final draft powerpoint
Final draft powerpointFinal draft powerpoint
Final draft powerpoint
 
Bridging the New Digital Divide: Innovation in Mobile Education �
Bridging the New Digital Divide: Innovation in Mobile Education �Bridging the New Digital Divide: Innovation in Mobile Education �
Bridging the New Digital Divide: Innovation in Mobile Education �
 
PlayScience INplay 2012 - PLAY Across Platforms
PlayScience INplay 2012 - PLAY Across PlatformsPlayScience INplay 2012 - PLAY Across Platforms
PlayScience INplay 2012 - PLAY Across Platforms
 
PlayScience - Reframe the Game: The State and Future of Kids' Mobile Play
PlayScience - Reframe the Game: The State and Future of Kids' Mobile PlayPlayScience - Reframe the Game: The State and Future of Kids' Mobile Play
PlayScience - Reframe the Game: The State and Future of Kids' Mobile Play
 
Instagram per valorizzare la città, i prodotti e le aziende #StanzoniDigitali
Instagram per valorizzare la città, i prodotti e le aziende #StanzoniDigitaliInstagram per valorizzare la città, i prodotti e le aziende #StanzoniDigitali
Instagram per valorizzare la città, i prodotti e le aziende #StanzoniDigitali
 
Paparazzi and their impact
Paparazzi and their impactPaparazzi and their impact
Paparazzi and their impact
 
Pleadings (1)
Pleadings (1)Pleadings (1)
Pleadings (1)
 
19112014 Paparan Pedoman RKA Kemenhub
19112014 Paparan Pedoman RKA Kemenhub19112014 Paparan Pedoman RKA Kemenhub
19112014 Paparan Pedoman RKA Kemenhub
 
PlayScience Forham Millenial Parents & Tech March2014
PlayScience Forham Millenial Parents & Tech March2014PlayScience Forham Millenial Parents & Tech March2014
PlayScience Forham Millenial Parents & Tech March2014
 

Similar to LJC- Introduction to FB Integration

Using the SugarCRM REST API
Using the SugarCRM REST APIUsing the SugarCRM REST API
Using the SugarCRM REST API
Asa Kusuma
 

Similar to LJC- Introduction to FB Integration (20)

Google & Bing App Indexing - SMX Munich 2016
Google & Bing App Indexing - SMX Munich 2016Google & Bing App Indexing - SMX Munich 2016
Google & Bing App Indexing - SMX Munich 2016
 
Why Deep Linking is the Next Big Thing: App Indexing - SMX East 2015
Why Deep Linking is the Next Big Thing: App Indexing - SMX East 2015Why Deep Linking is the Next Big Thing: App Indexing - SMX East 2015
Why Deep Linking is the Next Big Thing: App Indexing - SMX East 2015
 
Why Deep Linking is the Next Big Thing: App Indexing - SMX East 2015
Why Deep Linking is the Next Big Thing: App Indexing - SMX East 2015Why Deep Linking is the Next Big Thing: App Indexing - SMX East 2015
Why Deep Linking is the Next Big Thing: App Indexing - SMX East 2015
 
New Features of JSR 317 (JPA 2.0)
New Features of JSR 317 (JPA 2.0)New Features of JSR 317 (JPA 2.0)
New Features of JSR 317 (JPA 2.0)
 
Introduction to Facebook Graph API and OAuth 2
Introduction to Facebook Graph API and OAuth 2Introduction to Facebook Graph API and OAuth 2
Introduction to Facebook Graph API and OAuth 2
 
SearchLove Boston 2016 | Emily Grossman | Mobile Jedi Mind Tricks: Master the...
SearchLove Boston 2016 | Emily Grossman | Mobile Jedi Mind Tricks: Master the...SearchLove Boston 2016 | Emily Grossman | Mobile Jedi Mind Tricks: Master the...
SearchLove Boston 2016 | Emily Grossman | Mobile Jedi Mind Tricks: Master the...
 
Hands on AngularJS
Hands on AngularJSHands on AngularJS
Hands on AngularJS
 
Using the SugarCRM REST API
Using the SugarCRM REST APIUsing the SugarCRM REST API
Using the SugarCRM REST API
 
Modern android development
Modern android developmentModern android development
Modern android development
 
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
 
Increasing App Installs With App Indexation By Justin Briggs
Increasing App Installs With App Indexation By Justin BriggsIncreasing App Installs With App Indexation By Justin Briggs
Increasing App Installs With App Indexation By Justin Briggs
 
Jersey
JerseyJersey
Jersey
 
Using ArcGIS Server with Ruby on Rails
Using ArcGIS Server with Ruby on RailsUsing ArcGIS Server with Ruby on Rails
Using ArcGIS Server with Ruby on Rails
 
Testing ASP.net Web Applications using Ruby
Testing ASP.net Web Applications using RubyTesting ASP.net Web Applications using Ruby
Testing ASP.net Web Applications using Ruby
 
Api
ApiApi
Api
 
Denver emberjs-sept-2015
Denver emberjs-sept-2015Denver emberjs-sept-2015
Denver emberjs-sept-2015
 
Intro to Sail.js
Intro to Sail.jsIntro to Sail.js
Intro to Sail.js
 
Mobile Jedi Mind Tricks: Master the Multi-Screen Universe
Mobile Jedi Mind Tricks: Master the Multi-Screen UniverseMobile Jedi Mind Tricks: Master the Multi-Screen Universe
Mobile Jedi Mind Tricks: Master the Multi-Screen Universe
 
CIRCUIT 2015 - Content API's For AEM Sites
CIRCUIT 2015 - Content API's For AEM SitesCIRCUIT 2015 - Content API's For AEM Sites
CIRCUIT 2015 - Content API's For AEM Sites
 
StirTrek 2018 - Rapid API Development with Sails
StirTrek 2018 - Rapid API Development with SailsStirTrek 2018 - Rapid API Development with Sails
StirTrek 2018 - Rapid API Development with Sails
 

Recently uploaded

Recently uploaded (20)

08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 

LJC- Introduction to FB Integration

  • 1. Being Social A quick introduction to integrating with Facebook Kim Ross @kimbertles #ljcjug
  • 2. Who am I? Kim Ross @kimbertles #ljcjug
  • 3. Facebook Integration • http://developers.facebook.com/ • Website • Mobile • Apps Kim Ross @kimbertles #ljcjug
  • 4. http://apps.facebook.com/ljc-presentation Kim Ross @kimbertles #ljcjug
  • 7. Kim Ross @kimbertles http://developers.facebook.com/docs/authentication/server-side/ #ljcjug
  • 8. FacebookController @RequestMapping("/fb/") public String fb( @RequestParam(value = "signed_request") String signedRequest, Model model) 1. Check signed request signature String[] parts = signedRequest.split(".", 2); Base64 decoder = new Base64(true); // Gotcha - decoder must be base64 URL String sig = new String(decoder.decode(parts[0].getBytes())); checkSignature(sig, parts[1]); String data = new String(decoder.decode(parts[1].getBytes())) Kim Ross @kimbertles #ljcjug
  • 9. 2. Check if already authorised JSONObject sReq = new JSONObject(data); if (sReq.has("user_id")) { model.addAttribute("accessToken", sReq.getString("oauth_token")); return "facebook"; } Kim Ross @kimbertles #ljcjug
  • 10. 3. If not authenticated, request permissions StringBuilder redirectUrl = new StringBuilder( "http://www.facebook.com/dialog/oauth/?client_id="); redirectUrl.append(FacebookConstants.APP_ID); redirectUrl.append("&redirect_uri="); redirectUrl.append(URLEncoder.encode( "http://apps.facebook.com/ljc-presentation/auth/", "UTF-8")); redirectUrl.append("&state="); redirectUrl.append("MYSTATE"); redirectUrl.append("&scope="); redirectUrl.append("email,user_likes"); return "redirect:" + redirectUrl.toString(); Kim Ross @kimbertles #ljcjug
  • 11.
  • 12. Kim Ross @kimbertles http://developers.facebook.com/docs/authentication/server-side/ #ljcjug
  • 13. Getting the access token String code = request.getParameter("code"); StringBuilder accessTokenUri = new StringBuilder( "https://graph.facebook.com/oauth/access_token?client_id="); accessTokenUri.append(FacebookConstants.APP_ID); accessTokenUri.append("&redirect_uri="); accessTokenUri.append(URLEncoder.encode( "http://apps.facebook.com/ljc-presentation/auth/", "UTF-8")); ** accessTokenUri.append("&client_secret="); accessTokenUri.append(FacebookConstants.APP_SECRET); accessTokenUri.append("&code="); accessTokenUri.append(URLEncoder.encode(code, "UTF-8")); HttpClient client = new HttpClient(); GetMethod getter = new GetMethod(accessTokenUri.toString()); client.executeMethod(getter); String response = getter.getResponseBodyAsString(); String accessToken = response.substring( response.indexOf("=") + 1, response.indexOf("&expires")); Kim Ross model.addAttribute("accessToken", accessToken); @kimbertles #ljcjug
  • 14. FacebookController.fb @RequestMapping("/fb/auth/") public String auth(HttpServletRequest request, Model model) if (request.getParameter("error") != null) { // User denied app return "aww"; } Kim Ross @kimbertles #ljcjug
  • 15. Kim Ross @kimbertles http://developers.facebook.com/docs/authentication/server-side/ #ljcjug
  • 16. The “Beautiful” app <a href="/ljc-facebook/me?accessToken=${accessToken}">Me</a> <br> <a href="/ljc-facebook/likes?accessToken=${accessToken}">Likes</a> <br> <a href="/ljc-facebook/friends?accessToken=${accessToken}">Friends</a> Kim Ross @kimbertles #ljcjug
  • 17. InfoController private String facebookCall(String uri) throws HttpException, IOException { HttpClient client = new HttpClient(); GetMethod getter = new GetMethod(uri); client.executeMethod(getter); return getter.getResponseBodyAsString(); } responseBody.jsp ${response} Kim Ross @kimbertles #ljcjug
  • 18. Me @RequestMapping("/me") public String me(@RequestParam accessToken, Model model) String body = facebookCall( "https://graph.facebook.com/me?access_token=" + accessToken); model.addAttribute("response", body); return "responseBody"; }
  • 19. Likes @RequestMapping("/likes") public String likes(@RequestParam accessToken, Model model) { String body = facebookCall( "https://graph.facebook.com/me/likes?access_token=" + accessToken); model.addAttribute("response", body); return "responseBody"; }
  • 20. Friends @RequestMapping("/friends") public String friends(@RequestParam accessToken, Model model) { String body = facebookCall( "https://graph.facebook.com/me/friends?access_token=" + accessToken); model.addAttribute("response", body); return "responseBody"; }

Editor's Notes

  1. Lots of different ways to do this – as we’re Java devs, I figured I’d stick to the server side authentication flow in Java
  2. Lots of different ways to integrate – but as we are all java developers I figured I’d show the server authentication flow
  3. HTTP sequence diagram
  4. HTTP sequence diagram