2015년 7월 21일 화요일

Meteor Naver OAuth login Package 작성 : 네이버 로그인

http://pow.cx/ 를 설치해준다.
naver는 localhost에서 oauth2 인증하는 것을 허용하지 않는다.

echo 3000 > ~/.pow/devlocal

설치 후 이렇게 해서 

ROOT_URL=http://devlocal.dev PORT=80 meteor

브라우저에서 80포트로 리디렉션한 http://devlocal.dev 로 접속하자.

막판에 getUserProfile 이 안되서 http://static.nid.naver.com/oauth/naverOAuthExp.nhn  여기에 맨 마지막 03. Test API 호출에 accessToken을 넣고 돌려보니 Request에

POST /nidlogin/nid/getUserProfile.xml HTTP/1.1 User-Agent: naver oauth2.0 test form Host: apis.naver.com Pragma: no-cache Accept: */* Authorization: Bearer Awmvqo;ekmqovkmsld;kmacl;kmwlekcmqvowkevm=

이런 식으로 나오더라. 즉 "Bearer "(공백 한칸 포함)+accessToken한 정보가 나와야함.
그러니 token_type을 받아서 같이 넣어줘야함.

getUserProfile 결과물은 아쉽게도 JSON 이 아니라 XML 형태라서 peerlibrary:xml2json 을 사용.
역시 이게 제일 간단하고 맘이 편함.

https://github.com/acidsound/meteor-accounts-naver
https://github.com/acidsound/meteor-naver

각각 등록 완료.

사용할 땐 간단하게 meteor add spectrum:accounts-naver 하면 된다. 
어짜피 의존성이 있으니 같이 로딩됨.

Meteor쪽은 쉬운데 네이버쪽이 약간 손이갔다.

meteor add accounts-ui 한 뒤 {{> loginButtons}}를 템플릿에 추가해보면
이렇게 나타난다.
다른 accounts-facebook/accounts-twitter 등등과 동일하다.
버튼을 눌러보면



요런 입력창이 나온다.
시키는 대로 https://nid.naver.com/devcenter/register.nhn 로 가서 앱을 앱을 만들자

어플리케이션 이름과 카테고리를 선택한 뒤 일단 web만 찍고 생성하자.
나중에 수정할 수 있다.

"개요"를 보면 Client ID와 Client Secret(보기 버튼을 눌러야 보인다)이 있다.
이걸 복사해서 각각 Meteor쪽 두 개의 박스안에 붙여넣는다.

마지막으로 login Style은 팝업과 리디렉트 기반이 있는데 모바일에서 창이 하나 더 뜨는게 싫은 분은 Redirect-based login을 사용하자.

추가로 네이버쪽 "일반"을 보면 이름/카테고리/로고 이미지가 있는데 아래쪽에 보면 API 상태가 있다.
개발중이면 수동으로 사용가능한 유저를 일일이 멤버관리에서 입력해야하고 서비스 적용으로 하면 모든 네이버 유저들이 사용할 수 있다.
잊지말고 설정해두자.

당연한 얘기지만 Service Configuration package등등과도 호환되니 편하게 사용하자.

2015년 7월 20일 월요일

짧은 Crosswalk 사용기

HTML5 + js 를 UI로 사용하는 앱을 만들때 제일 당혹스러운 점은 크로스플랫폼으로 사용하기 위해 같은 기준인 UI 렌더러를 쓰는 목적이었는데도 불구하고 파편화가 매우 심각하다는 점이다.
해상도 같은 건 논외로 치고 공통으로 사용하는 WebView 시스템 컴포넌트가 똑같은 "Modern Browser"가 아니라는 점이다.
심지어 같은 OS라고 해도 버전별로 다르다는 건 문제가 크다.
그래서 canvas만 가지고 떼어내서 만들까 어쩔까하고 고민하면서 검색 중 https://crosswalk-project.org/ 프로젝트를 발견.
webRTC(https://github.com/alongubkin/phonertc)나 webAudio(https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html)같은 것들도 있지만 가장 큰 관심사는 iOS에서 safari가 아니라 chrome 일지가 첫번째.

첫번째 시도.

cordova platform add ios
cordova run ios

Safari에서 확인. 기존 mobile safari임.

cordova add cordova plugin add cordova-plugin-crosswalk-webview

소스 확인.
역시 WKWebView는 없음. 없다고 했는데 확인사살.

이렇게 소스코드를 아예 받아서 해볼 수 밖에 없다.
git clone https://github.com/crosswalk-project/crosswalk-ios.git
cd crosswalk-ios/
git submodule update --init --recursive

third-party/GCDWebServer 라는 게 눈에 띤다.

sample app을 XCode 에서 실행해보니
target을 변경해야함

일단은 잘된다.
iOS Simulator를 띄운채로 Safari browser를 보니 여전히 Safari에서 잡힘.
내용을 찾아보니 기존 UIWebView 대신 iOS 8부터(???) WKWebView를 지원한다고 한다.
아아 내가 원한 건 이게 아니야.

WKWebView에 대한 자세한 내용.

기존 cordova에서도 wkWebView를 얹을 수 있다곤 한다.
아예 platform에서부터 갈아치우는구나;;

여기를 보면 appCache도 지원 안하고 file/camera도 지원 안한다.
wkWebView도 결국 safari라서 기존 UIWebView보단 소폭 성능개선은 있겠지만 결국 문제는 해결되지 않았다.
후우 짧은 꿈을 꾸었구나.