블로그 이미지
윤영식
Frontend Application Architecter, Full Stacker, KnowHow Dispenser and Bike Rider

Publication

Statistics Graph

Recent Comment

2013.10.05 20:28 Protocols/OAuth

OAuth 트위터에서 Consumer/Acces Key를 생성한 후, Node.js 상에서 EveryAuth를 이용하여 인증방법에 대해서 알아보자 



Twitter 키 생성하기 

  - https://dev.twitter.com/apps/new  에서 생성함

  - 이름, 설명, url -예, http://sv.mobiconsof.co.kr -, 약관체크, CAPCHA등록하고 submit을 하면 키생성 화면이 나온다 

  - 추가로 "access token"을 생성할 수도 있다

     단 여기서 중요한 것은 "Callback URL"을 입력하는 것이다. (sv.mobiconsoft.co.kr은 /etc/hosts파일에 설정한 테스트 도메인)

  - 만들어 놓은 자신의 키들은 https://dev.twitter.com/apps 에서 애플리케이션 별로 확인을 할 수 있다 



Twitter 키 사용하기 

  - Node.js에서 everyauth 모듈을 통하여 사용하는 예를 보자

  - Key 생성시 url로 "http://sv.mobiconsoft.co.kr" 를 입력하였다면 - 각자의 public 또는 test url을 입력하면 된다 - hosts 파일에 등록하고 dig 와 ping 명령으로 확인을 한다 

$ sudo vi /etc/hosts

127.0.0.1    sv.mobiconsoft.co.kr


// ping 성공

$ ping sv.mobiconsoft.co.kr

PING sv.mobiconsoft.co.kr (127.0.0.1): 56 data bytes

64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.044 ms

64 bytes from 127.0.0.1: icmp_seq=1 ttl=64 time=0.051 ms

 

  - Express.js, Angular.js 와 Bootstrap을 이용한 코드를 사용할 것이다. 

$ git clone https://github.com/ganarajpr/express-angular.git && cd express-angular

$ 소스 수정하기

  - app.js 안에서 트위터에 대한 consumerKey와 consumerSecret을 입력한다 

everyauth

    .twitter

    .consumerKey('2yQ.....img')

    .consumerSecret('TbhKnP.....fQ1gyvUO4')

    .findOrCreateUser( function (sess, accessToken, accessSecret, twitUser) {

        console.log('twitter User data is', twitUser);

        return usersByTwitId[twitUser.id] || (usersByTwitId[twitUser.id] = addUser('twitter', twitUser));

    })

    .redirectPath('/');

  - Node.js 를 수행한다 

$ sudo node app.js

  - 브라우져에서 호출하기 : 우측 "Login"에서 "Sign in with Twitter" 버튼을 클릭한다 

 - 트위터 승인 화면이 나온다 : "애플리케이션 승인" 버튼을 클릭하면 다시 원래 화면으로 돌아온다 

 - Node.js 콘솔에 뿌려진 사용자 정보를 보자 : 해당 정보를 저장하여 애플리케이션에서 사용을 하면 된다 

$ sudo node app.js

starting step - getRequestToken

...finished step

starting step - storeRequestToken

...finished step

starting step - redirectToProviderAuth

...finished step

starting step - extractTokenAndVerifier

...finished step

starting step - getSession

...finished step

starting step - rememberTokenSecret

...finished step

starting step - getAccessToken

...finished step

starting step - fetchOAuthUser

...finished step

starting step - assignOAuthUserToSession

...finished step

starting step - findOrCreateUser

twitter User data is { id: 48553254,

  id_str: '48553254',

  name: 'Software 행복공동체 키우기',

  screen_name: 'nulpulum',

  location: 'Seoul Korea',

  description: '자건거타기 실용주의프로그래머 에자일정신 글로벌소프트웨어만들기 행복공통체키우기 지식나눔운동',

  url: 'http://t.co/wunTkx6q',

  entities: { url: { urls: [Object] }, description: { urls: [] } },

  protected: false,

  followers_count: 98,

  friends_count: 533,

  listed_count: 0,

  created_at: 'Fri Jun 19 00:44:39 +0000 2009',

  favourites_count: 12,

  utc_offset: 32400,

  time_zone: 'Seoul',

  geo_enabled: true,

  verified: false,

  statuses_count: 506,

  lang: 'ko',

  status:

   { created_at: 'Fri Oct 04 12:15:34 +0000 2013',

     id: 386102292232937500,

     id_str: '386102292232937472',

     text: 'I signed up for Human-Computer Interaction from @ucsandiego on @Coursera! https://t.co/FdQc2h654C #hci',

     source: '<a href="http://twitter.com/tweetbutton" rel="nofollow">Tweet Button</a>',

     truncated: false,

     in_reply_to_status_id: null,

     in_reply_to_status_id_str: null,

     in_reply_to_user_id: null,

     in_reply_to_user_id_str: null,

     in_reply_to_screen_name: null,

     geo: null,

     coordinates: null,

     place: null,

     contributors: null,

     retweet_count: 0,

     favorite_count: 0,

     entities:

      { hashtags: [Object],

        symbols: [],

        urls: [Object],

        user_mentions: [Object] },

     favorited: false,

     retweeted: false,

     possibly_sensitive: false,

     lang: 'en' },

  contributors_enabled: false,

  is_translator: false,

  profile_background_color: '9AE4E8',

  profile_background_image_url: 'http://abs.twimg.com/images/themes/theme16/bg.gif',

  profile_background_image_url_https: 'https://abs.twimg.com/images/themes/theme16/bg.gif',

  profile_background_tile: false,

  profile_image_url: 'http://a0.twimg.com/profile_images/2956822008/b20249749c11917f4ce9e29263ba1b92_normal.jpeg',

  profile_image_url_https: 'https://si0.twimg.com/profile_images/2956822008/b20249749c11917f4ce9e29263ba1b92_normal.jpeg',

  profile_banner_url: 'https://pbs.twimg.com/profile_banners/48553254/1355144673',

  profile_link_color: '0084B4',

  profile_sidebar_border_color: 'BDDCAD',

  profile_sidebar_fill_color: 'DDFFCC',

  profile_text_color: '333333',

  profile_use_background_image: true,

  default_profile: false,

  default_profile_image: false,

  following: false,

  follow_request_sent: false,

  notifications: false }

...finished step

starting step - compileAuth

...finished step

starting step - addToSession

...finished step

starting step - sendResponse

...finished step



<참조> 

  - How to get twitter key

  - Express에서 EveryAuth 사용하기 

  - Facebook에서 EveryAuth 적용하기

저작자 표시 비영리 변경 금지
신고

'Protocols > OAuth' 카테고리의 다른 글

[OAuth] 인증과 권한 개념잡기  (0) 2013.10.06
[OAuth] EveryAuth 이용해서 Twitter 인증하기  (0) 2013.10.05
posted by peter yun 윤영식