기본 콘텐츠로 건너뛰기

node.js(+express) everyAuth 적용기

node.js 용 package 중 everyAuth 라고 상당히 많은 서비스 API를 지원하는 훌륭한 라이브러리가 있다.
facebook, google, twitter 는 물론이고 github 에서 instagram 까지도 지원한다.
맨땅에 하기엔 사실 사용자 로그인/인증이라는 과정이 간단하지 않다.
설명을 쭉 읽어보니 그냥 커스텀 인증을 한다고 해도 구조가 잘 잡혀있어서 써야겠다고 결심.
express 프로젝트를 만들었다.

일단 facebook 부터 시작해보기로 했다.
먼저 OAuth 인증을 하려면 facebook 으로부터 appId 와 appSecret 두개 한쌍을 페어로 받아와야한다.

https://developers.facebook.com/apps 에서 "새 앱 만들기"를 한다음
App Name을 정해주자. Namespace랑 Web Hosting은 사용하지 않으므로 그대로 내버려둠.

그러고 난 뒤 보안 텍스트 확인하면
앱 > 앱이름 > Basic 으로 이동한다.

보면 앱이름과 App ID, App Secret, 아이콘을 확인할 수 있다.
아이콘은 적당히 수정하면 되고

"기본정보"와 "어떻게 앱을 Facebook과 통합시킬지 선택하세요"
두가지 설정 항목이 있음을 확인하고 "어떻게 앱을 Facebook과 통합시킬지 선택하세요" 에서 Website with Facebook Login 를 체크하면 사이트 URL 을 넣을 수 있다.
리디렉트 할 사이트 URL 을 넣고 변경 내용 저장.

일단 이걸로 facebook 준비는 끝났다.
별도의 facebook 앱 페이지를 만들거나 할 필요는 없다.

server.js 에 대략 구현하기를 (coffeescript)


everyauth = require 'everyauth'


# mock User list
user = {}

# set up for everyAuth
everyauth.facebook
  .appId(config.facebook.appId)
  .appSecret(config.facebook.appSecret)
  .handleAuthCallbackError (req, res) ->
    console.log "callback error"
    console.dir req
  .findOrCreateUser (session, accessToken, accessTokExtra, fbUserMetadata) ->
    console.log "find or Create User"
    # facebook 인증 직후 이쪽으로 온다. 사용자 등록을 할 타이밍
    user[fbUserMetadata.id] || user[fbUserMetadata.id]=fbUserMetadata
  .redirectPath('/');



이런 식으로 일단 했다. 별 내용은 없고 config.facebook.appId 과 config.facebook.appSecret 대신 facebook 에서 보았던 App ID, App Secret 내용을 복사해서 수정한다.

configure 쪽은 내 경우 아래와 같이 했다.
session 과 bodyParser, middleWare, methodOverride, router, 등등 use 를 해주고
마지막에 everyauth.helpExpress 를 추가한다. 순서가 잘못되면 오류가 날 수 있으니 주의하자.
역시 coffeescript 로


app.configure ()->
  ....
  app.use express.cookieParser()
  # enable session
  app.use express.session secret: config.sessionSecret, store: store
  app.use express.bodyParser() # for post
  app.use everyauth.middleware()
  app.use express.methodOverride()
  app.use app.router

  ....
  everyauth.helpExpress app


여기까지 한 다음
<domain_name 혹은 localhost>/auth/facebook 으로 가보자
everyauth 가 middleware 로 들어가면서 /auth/facebook 이라는 router 를 만드는 듯.
이 부분에 대한 언급이 없어서 도대체 어떻게 해야 페이스북으로 연결하는 건지 한참 찾았다.

app.get '/api/testAuth', (request, response) ->

    console.dir request.session
    response.writeHead 200, "Content-Type": "application/json"
    response.write JSON.stringify if checkAuth(request)
      "userId" : "#{JSON.stringify request.session.auth.facebook}"
      "result" : "authorized login"

session 에 제대로 들어왔는지 확인해보자.
facebook.user 에 JSON으로 id, name, first_name, last_name, link, username, hometown, location, work, description 등등이 들어와있는 걸 확인할 수 있다.

logout 도 간단하다.
그냥 단순히 <domain_name 혹은 localhost>/logout 링크를 달아주면 끝이다.
만일 /logout 이라는 경로가 싫으면
everyauth.everymodule.logoutPath('/bye');
이런식으로 재설정 가능하다.

logout 후 리디렉션이 필요하다면
everyauth.everymodule.logoutRedirectPath('/navigate/to/after/logout');
경로를 임의로 설정하여 특정 위치로 이동하게 할 수 있다.

참조 URL

이 블로그의 인기 게시물

ESP32 DevBoard 개봉기

오늘 드디어 손에 넣었다. ESP32 DevBoard!
Adafruit 에서 15개 한정 재입고 트윗을 보고 광속 결제.
그리고 1주일의 기다림. 사랑해요 USPS <3
알리를 이용하다보니 1주일 정도는 광속 배송임.
물론 배송비도 무자비함 -_ㅜ
15개 한정판 adafruit 발 dev board
그놈이 틀림없으렸다.
오오 강려크한 포스
ESP32_Core_board_V2라고 적혀있군요.
ESP32 맞구요. 네네. ESP32-D0WDQ6 라고 써있는데 D → Dual-core 0 → No internal flash W → Wi-Fi D → Dual-mode Bluetooth Q → Quad Flat No-leads (QFN) package 6 → 6 mm × 6 mm package body size 라고 함.
길이는 이정도
모듈크기는 이정도
코어는 6mm밖에 안해! 여기에 전기만 넣으면 BLE+WIFI!
밑에 크고 발 8개 달린 놈은 FM25Q32라고 32Mbit 플래시메모리
ESP8266 DevBoard 동생이랑 비교 크고 아름다운 레귤레이터랑 CP2102 USB Driver가 붙어있음.
ESP8266 DevBoard엔 CH340G 인데 확 작아졌네.
머리를 맞대어 보았음.
모듈크기는 아주 약간 ESP32가 더 큰데 워낙에 핀이 많고 촘촘함. ESP8266인 ESP12는 핀 간격이 2.00mm인데 비해
ESP32는 1.27mm 밖에 안함.
딱봐도 비교가 될 정도.
https://www.sparkfun.com/news/2017 크고 아름다운 Pinouts

ESP8266 보드랑 별로 안달라보인다.
http://www.silabs.com/products/mcu/pages/usbtouartbridgevcpdrivers.aspx#mac
에서 CP2102 드라이버를 설치하고
screen 으로 연결해보자.
내 경우엔 tty.SLAB_USBtoUART 로 잡혔다.
어디서 기본 속도가 115200bps 라고 들은 적이 있어서
screen /dev/tty.SLAB_USBtoUART …

즐거운 Online Prototyping Tool 들

jsbin, codepen, jsfiddle 이런 것들은 일단 생략. 너무 유명한 것들이라.

https://launchpad.graphql.com - node.js 기반 graphQL 연습장. 이것만으로도 충분히 훌륭한 백엔드
https://codesandbox.io/ npm 사용이 가능한 클라이언트 사이드 연습장. webpackbin이 너무 문제가 많아서 찾아본 것.

https://scrimba.com 이건 codesandbox+ asciinema(https://asciinema.org/) 같은 느낌인데 키 녹화와 음성 녹화 기능이 추가되었다. 다 좋은데 화살표 키로 빨리감기 뒤로감기 기능이 안되고 익스포트(youtube등)으로 지원이 없는게 아쉽다.

이 둘이 만나면? https://codesandbox.io/s/jvlrl98xw3?from-embed
뭐야 이거 무서워 하지마 ㄷㄷ;  graphql+react-native-web(부왘ㅋㅋ)

https://repl.it/languages 전통을 자랑하는 REPL 도구. 지원 언어 종류가 -_-;;;;;

https://tio.run/# repl.it? 장난함? 얘는 지원 언어가 무려 386종류. J랑 아희도 있다.

https://play.golang.org/ 즐거운 go playground. 소스 포멧팅 넘 좋아.

http://decaffeinate-project.org/repl/ 최고의 coffeescript REPL. 원래 용도는 coffee를 ecma6코드로 바꾸는 것이지만...

https://scaphold.io
https://www.graph.cool/ graphql backend service. scaphold.io는 설치도 필요없는 클라우드. graphcool은 호스팅+클라우드 다있음. 둘 다 막상막하. 푸쉬서버도 되고 뭐 미친득.

https://glitch.com/ gomix에서 결국 glitch로 안착.  node.js

https://www.shadertoy.com 잘하고 싶다! 쉐이다! 오디오도 된다!

http:/…

Rinkeby Test Network에 접근하는 간단한 방법.

dApp 개발 시 실제 계정으로 트랜젝션을 보내면 너무나 비싸므로
Rinkeby나 Ropsten 같은 테스트 네트워크에 연결하여 마이닝 없이 faucet을 통해 ether를 받고
그걸로 트랜젝션 테스트를 하면 편리하다.

보통 https://github.com/ethereum/wiki/wiki/Dapp-using-Meteor#create-your-%C3%90app 문서를 보고 시작하는데
geth --rpc --rpccorsdomain "http://localhost:3000" 이렇게 하면 마이닝부터 해야하니 귀찮다.
https://infura.io/#how-to 를 보고 계정을 신청하자. 이런 것도 호스팅이 되다니 좋은 세상이네.
간단한 개인 정보 몇가지를 입력하고 나면 Access Token이 나온다.

가입 후  https://infura.io/register.html 화면

Access Token이 있는 네트워크 주소로 geth를 연결한다.
geth --rpc --rpccorsdomain "https://rinkeby.infura.io/<YOUR_ACCESS_TOKEN>" 이러면 오케이.

meteor project를 만들고
meteor add ethereum:web3 추가한 다음 console에서
web3.eth.getBalance(web3.eth.coinbase, (error,result)=>console.log(
  error, result.toFormat()
)); 자신의 coinbase의 잔액을 구해보자.
6eth가 최소단위인 wei로 보면 6,000,000,000,000,000,000 정도.
https://faucet.rinkeby.io/ 여기에서 받아온 (무료로/마이닝없이) ether가 잘 나온다.
여기서부터 시작하는게 좋아보인다.