More Related Content Similar to 소셜 네트워크 앱 개발 Similar to 소셜 네트워크 앱 개발 (20) More from Kenu, GwangNam Heo More from Kenu, GwangNam Heo (20) 소셜 네트워크 앱 개발1. 소셜 네트워크 앱 개발
서버-DB설계 등
허광남
kenu@okjsp.pe.kr
2. Part-1
• 1. 소셜 네트워크 서비스 개요 • 4. 계정 연결과 타임라인 활용
• 1.1 소셜 서비스의 특징 • 4.1 개발자 등록
• 1.2 소셜 네트워크 효과 • 4.2 웹을 이용한 인증
• 1.3 SNS 대표 서비스 리뷰 • 4.3 타임라인 가져오기
• 2. OAuth 인증의 이해 • 4.4 타임라인 쓰기
• 2.1 회원 인증 정보의 공유 • 5. 소셜 댓글 메커니즘
• 2.2 사이트 정보의 공유 • 5.1 소셜 댓글의 효과
• 2.3 인증 메커니즘 • 5.2 소셜 네트워크 댓글 서비스
• 3. 트위터 OpenAPI 개요 • 5.3 소셜 댓글 관리
• 3.1 트위터 개발자 사이트 • 6. DB 설계와 적용
• 3.2 인증키 생성과 활용 방법 • 6.1 소셜 댓글의 DB 활용
• 3.3 OpenAPI 개요 • 6.2 소셜 댓글 CRUD
3. Part-II
• 1. 자바스크립트 소셜 지원 기능 • 3.2 OpenAPI로 글쓰고, 삭제하기
소개
• 4. 페이스북과 트위터를 이용한
• 1.1 정말 쉬운 자바스크립트 소셜 댓글 구현
기능
• 4.1 소셜 댓글 구현하기
• 1.2 자바스크립트 API 연습
• 5. 서버를 이용한 소셜 앱 설계
• 2. 페이스북 OpenAPI 개요
• 5.1 서버를 활용한 서비스 설계
• 2.1 페이스북 OpenAPI 개요
• 5.2 서버 활용 소셜 앱 구현
• 2.2 페이스북 OAuth 인증
• 6. 카카오톡 OpenAPI
• 3. 페이스북 계정 연결
• 6.1 하트, 날개 날리기
• 3.1 페이스북 개발자 계정 생성
• 6.2 소셜 메시징을 통한 앱 연결
4. 소셜 네트워크 서비스
개요
• 소셜 네트워크 서비스
• Facebook
• Twitter
• me2day(korea)
6. 주요 기능
• 타임라인 (로그인 후 메인페이지)
• http://www.facebook.com/home.php
• https://twitter.com
7. 효과
• 구전 효과: viral effect
• 락인 효과: lock in effect
• 수많은 날들의 기록
• 개인, event, news 로그
• 유유상종, 끼리끼리 네트워크
22. 세계 최초
• 직지심경: 세계 최초 금속 활자
• 새한 MpMan: 세계 최초 MP3 플레이어
• cyworld: 세계 최초 소셜 서비스
24. 회원 인증 정보의 공유
• A 사진 사이트
• B 프린트 서비스 사이트
• B 사이트에서 A 사이트의 사진 직접 이용?
27. 인증 메커니즘
• B사이트에서 A사이트 로그인 팝업
• A사이트 회원로그인
• A사이트의 이용 정보 항목 확인
• B사이트에 access_token 발급
• access_token으로 A사이트 정보 획득
30. 결과적으로
• A 사이트에서 다운받아서 업로드할 필요 없음
• B 사이트 회원가입하지 않아도 가능
• B 사이트는 A사이트에서 제공하는 정보 저장
33. OAuth 2.0
• 웹 애플리케이션이 아닌 애플리케이션 지원 강화
• 암호화가 필요 없음
• HTTPS를 사용하고, HMAC을 사용하지 않음
• Signature 단순화
• 정렬과 URL 인코딩이 필요 없음
• Access Token 갱신
• OAuth 1.0에서 Access Token을 받으면 그것을 계속 사용 가능.
트위터의 경우에는 Access Token을 만료시키지 않음.
OAuth 2.0에서는 보안 강화를 위해 Access Token의
Life-time 지정 가능.
http://helloworld.naver.com/helloworld/24942
34. Services with OAuth 2
37signals (draft 5) • Meetup
• Box • Salesforce
• Facebook's Graph • SoundCloud
API (see sociallipstick.com/?p=239) • Do.com (draft 22)
• Foursquare • Windows Live
• Geoloqi
• GitHub
• Google
http://oauth.net/2/
35. 3. 트위터 OpenAPI 개요
• 3.1 트위터 개발자 사이트
• 3.2 인증키 생성과 활용 방법
• 3.3 OpenAPI 개요
38. 인증키 생성과 활용 방법
• Create Application
• Consumer Key
• Consumer Secret
• Access Token
• Access Token Secret
41. 트위터 OpenAPI 개요
• Timelines • Favorites
• Tweets • Lists
• Search • Saved Searches
• Streaming • Places & Geo
• Direct messages • Trends
• Friends & Followers • Spam Reporting
• Users • OAuth
• Suggested Users • Help
42. statuses/user_timeline
curl --get 'https://api.twitter.com/1.1/
statuses/user_timeline.json' --data
'count=2&screen_name=twitterapi' --header
'Authorization: OAuth
oauth_consumer_key="Pfez4jbyKgO4j9cOhjgfhw",
oauth_nonce="1475676e4940625a66e873cfca908b2a",
oauth_signature="cdP8NK%2F6bM8ir8kzpU8Rt8wKEgw
%3D", oauth_signature_method="HMAC-SHA1",
oauth_timestamp="1360570565",
oauth_token="1168169378-
vPSrQFBB89hjKLdBKdTauTwpBrtwRQhlX1CPUd9",
oauth_version="1.0"' --verbose
43. statuses/update
curl --request 'POST' 'https://api.twitter.com/
1.1/statuses/update.json' --data 'status=Maybe
+he%27ll+finally+find+his+keys.+%23peterfalk'
--header 'Authorization: OAuth
oauth_consumer_key="Pfez4jbyKgO4j9cOhjgfhw",
oauth_nonce="ee5a9bece9395afe0c9e583a1716b288",
oauth_signature="T0ndBmF8fYkf6ZxnKP7Xq22%2Bw20%
3D", oauth_signature_method="HMAC-SHA1",
oauth_timestamp="1360575909",
oauth_token="1168169378-
TuOqLdaQZV9G2Zb57pXQeu8A6zAGV5jSrV6E0Wt",
oauth_version="1.0"' --verbose
44. /statuses/destroy/
300903768550170624
curl --request 'POST' 'https://api.twitter.com/
1.1/statuses/destroy/300903768550170624.json'
--header 'Authorization: OAuth
oauth_consumer_key="Pfez4jbyKgO4j9cOhjgfhw",
oauth_nonce="27228c7d49f9d35e0610a4a88911df64",
oauth_signature="ssVCgmDjZzynFIwe7IfySvjYBO8%3D
", oauth_signature_method="HMAC-SHA1",
oauth_timestamp="1360608274",
oauth_token="1168169378-
TuOqLdaQZV9G2Zb57pXQeu8A6zAGV5jSrV6E0Wt",
oauth_version="1.0"' --verbose
45. 4. 계정 연결과 타임라인
활용
• 4.1 개발자 등록
• 4.2 웹을 이용한 인증
• 4.3 타임라인 가져오기
• 4.4 타임라인 쓰기
51. 웹을 이용한 인증
curl --get 'https://api.twitter.com/1.1/
statuses/user_timeline.json' --data
'count=2&screen_name=twitterapi' --header
'Authorization: OAuth
oauth_consumer_key="Pfez4jbyKgO4j9cOhjgfhw",
oauth_nonce="1475676e4940625a66e873cfca908b2a",
oauth_signature="cdP8NK%2F6bM8ir8kzpU8Rt8wKEgw
%3D", oauth_signature_method="HMAC-SHA1",
oauth_timestamp="1360570565",
oauth_token="1168169378-
vPSrQFBB89hjKLdBKdTauTwpBrtwRQhlX1CPUd9",
oauth_version="1.0"' --verbose
54. statuses/user_timeline
curl --get 'https://api.twitter.com/1.1/
statuses/user_timeline.json' --data
'count=2&screen_name=twitterapi' --header
'Authorization: OAuth
oauth_consumer_key="Pfez4jbyKgO4j9cOhjgfhw",
oauth_nonce="1475676e4940625a66e873cfca908b2a",
oauth_signature="cdP8NK%2F6bM8ir8kzpU8Rt8wKEgw
%3D", oauth_signature_method="HMAC-SHA1",
oauth_timestamp="1360570565",
oauth_token="1168169378-
vPSrQFBB89hjKLdBKdTauTwpBrtwRQhlX1CPUd9",
oauth_version="1.0"' --verbose
58. statuses/update
curl --request 'POST' 'https://api.twitter.com/
1.1/statuses/update.json' --data 'status=Maybe
+he%27ll+finally+find+his+keys.+%23peterfalk'
--header 'Authorization: OAuth
oauth_consumer_key="Pfez4jbyKgO4j9cOhjgfhw",
oauth_nonce="ee5a9bece9395afe0c9e583a1716b288",
oauth_signature="T0ndBmF8fYkf6ZxnKP7Xq22%2Bw20%
3D", oauth_signature_method="HMAC-SHA1",
oauth_timestamp="1360575909",
oauth_token="1168169378-
TuOqLdaQZV9G2Zb57pXQeu8A6zAGV5jSrV6E0Wt",
oauth_version="1.0"' --verbose
60. 5. 소셜 댓글 메커니즘
• 5.1 소셜 댓글의 효과
• 5.2 소셜 네트워크 댓글 서비스
• 5.3 소셜 댓글 관리
61. 소셜 댓글의 효과
• 댓글 시스템
• 실명제를 통한 악플 -> 효과 없음
• SNS 소셜 댓글
66. 소셜 댓글 CRUD
• add > insert into
• get > select from
• update > update
• delete > delete from
68. Part-II
• 1. 자바스크립트 소셜 지원 기능 • 3.2 OpenAPI로 글쓰고, 삭제하기
소개
• 4. 페이스북과 트위터를 이용한
• 1.1 정말 쉬운 자바스크립트 소셜 댓글 구현
기능
• 4.1 소셜 댓글 구현하기
• 1.2 자바스크립트 API 연습
• 5. 서버를 이용한 소셜 앱 설계
• 2. 페이스북 OpenAPI 개요
• 5.1 서버를 활용한 서비스 설계
• 2.1 페이스북 OpenAPI 개요
• 5.2 서버 활용 소셜 앱 구현
• 2.2 페이스북 OAuth 인증
• 6. 카카오톡 OpenAPI
• 3. 페이스북 계정 연결
• 6.1 하트, 날개 날리기
• 3.1 페이스북 개발자 계정 생성
• 6.2 소셜 메시징을 통한 앱 연결
69. 자바스크립트 소셜 지원
기능 소개
• 1.1 정말 쉬운 자바스크립트 소셜 기능
• 1.2 자바스크립트 API 연습
75. 페이스북 계정 연결
• 3.1 페이스북 개발자 계정 생성
• 3.2 OpenAPI로 글쓰고, 삭제하기
76. 페이스북 개발자 계정 생성
https://developers.facebook.com/settings?tab=developer§ion=devprofile&view
80. 서버를 이용한 소셜 앱
설계
• 5.1 서버를 활용한 서비스 설계
• 5.2 서버 활용 소셜 앱 구현
84. Javascript SDK
<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : '500542936664035', // App ID
channelUrl : '//stark-tundra-9561.herokuapp.com/channel.html',
status : true, // check login status
cookie : true, // enable cookies to allow server session
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response) {
! if (response.status === 'connected') {
! // connected
! } else if (response.status === 'not_authorized') {
! // not_authorized
! } else {
! // not_logged_in
! }
! });
};
</script>
85. Javascript SDK
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
86. Javascript SDK
FB.getLoginStatus(function(response) {
! if (response.status === 'connected') {
! // connected
! testAPI();
! console.log('connected');
! } else if (response.status === 'not_authorized') {
! // not_authorized
! login();
! console.log('not_authorized');
! } else {
! // not_logged_in
! login();
! console.log('not_logged_in');
! }
! });
87. Javascript SDK
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
} else {
// cancelled
}
});
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}