SSL에서 팝업 혹은 비SSL 페이지로 넘길때 리퍼러 처리

SSL에서 팝업이나 비 SSL 페이지로 넘길때 원래는 리퍼러가 안넘어간다.

하지만 아래와 같이 메타에 리퍼러를 정의하면 값을 사용할 수 있다.

 

NGINX에서의 REMOTE_ADDR 오류 이슈

NGINX에서 캐시서버를 타면 동일 IP를 두개를 연결지어 가져오는 오류로 이로 인해 IP를 제대로 인식하지 못한다.

NGINX 서버에서의 가져온 IP 값

정상적으로 가져온 IP 값

 

위와 같은 케이스가 생길 수 있기에

반드시 getRemoteAddress 메소드에서 아래와 같이 처리를 같이 해줘야 한다.

 

삼성 갤럭시에서 특수문자에 css 효과가 안먹는 증상

다음과 같이 리뷰 rating 기능을 개발 중

가급적 이미지는 사용하지 않기 위해 특수문자를 사용했습니다.

그랬더니 유독 Android kitkat 4.4을 OS로 사용하는 삼성의 갤럭시 기기들만 다음과 같이 보입니다.

sQybc

이곳에는 어떤 CSS 효과도 적용되지 않았습니다.

결국 전 이미지를 사용하긴 했지만 여기저기 찾아보니 아래와 같이

[box type=”info”] /system/fonts/NotoColorEmoji.ttf[/box]

삼성의 기본 이모지 폰트를 안드로이드 기본 emoji 폰트로 대체하고 해결되었다 합니다.

자세한 내용은 이곳을 보시면 확인이 가능합니다.

http://forum.xda-developers.com/showthread.php?t=2618523

 

다른 대안으로 fontawesome이나 추가적으로 iconmoon과 같은 대체 폰트를 이용해서 해결 하는 방법도 있으니 참고하시면 됩니다.

 

HTML:

 

CSS:

앱 통계를 내 사이트에서 수집하기

스크린샷 2014-02-09 오후 11.35.26

 

프롤로그

모바일 앱을 보유하고 있다면 누구나 한번쯤 다운로드 혹은 리뷰 데이터를 한곳에 수집해서 보고 싶어했으리라 생각합니다.

2년전 회사에서 이런 요구가 있었고 이를 사내 사이트에 구현했던 일이 어렴풋이 기억납니다.
그때는 API가 따로 없어서 rss피드와 국가코드, 카테고리 정보등을 별도로 수집해서 사용했었는데요!
이제는 그렇게 하지 않아도 됩니다.

앱애니(AppAnnie)라고 하는 사이트에서 올 초부터 API를 지원하기 시작했기 때문입니다.
전 이것만 기다리고 있었는데, 마침 나와줘서 다운로드 통계 수집을 자동화시킬 수 있었습니다.

앱애니의 통계는 초기 아이폰만 수집해줬었는데요, 간만에 들어가보니 안드로이드는 물론 아마존의 다운로드 통계를 제공해주더군요!
앱애니에서 제공해주는 API는 생각보다 효율적이고 대단히 고마운 API라고 생각합니다.

다만,제약조건이 일일 1,000회, 분당 30회로 제약이 되어있긴 하지만, 앱 10개정도 보유하고 있다면 이정도로 충분합니다.
그럼 어떤 종류의 API를 제공하는지 알아보겠습니다.

 

지원하는 API의 종류

  1. Account Connection Sales
  2. App Sales
  3. App Ranks
  4. App Reviews
  5. App Ratings
  6. App Features
  7. App Details
  8. Platform List
  9. Country List
  10. Category List
  11. Currency
  12. Account Connections List
  13. Account Connection App List
  14. App IAP List
  15. Shared Apps List

이렇게 총 15가지를 지원하고 있습니다.
왠만한 필요한 정보들은 다 가져올 수 있습니다.
다음은 API를 신청하기 위한 절차에 대해 간략하게 나열해보겠습니다.

 

API신청 절차

  1. appannie.com 에서 회원가입을 한 후 로그인한다.
  2. 애플, 구글, 아마존 접속 계정으로 로그인해 통계 데이터 수집에 동의한다.
  3. 위의 단계로 appannie에서 자동으로 앱 데이터를 수집합니다.
  4. 그럼 https://www.appannie.com/account/api/key/ 여기서 API키를 발급받습니다.
  5. http://support.appannie.com/categories/20082753-Analytics-API 문서를 보고 개발을 합니다.

귀찮게 Oauth와 같은 인증방식을 요구하지는 않습니다.
다만 header에 Autherization에 API 키만 넣어서 쏴주면 원하는 결과값을 가져옵니다.
요청에 따라 xml과 json으로 선택적으로 받아올 수 있습니다.

 

이용예시

스크린샷 2014-02-09 오후 11.57.52

위 테이블은 API를 이용해 구축해놓은 예시입니다.
물론 테이블의 상단에는 앱별로 선택해서 현재 판매중인 모든 앱에 대해 정보를 조회할 수 있습니다.

여러분도 한번 만들어보세요! ^^

 

APNS 따라하기 시리즈 (프로바이더 구성하기)

프로바이더에서의 개발 개요

두번째 시리즈인 프로바이더에서 개발 방법에 대해서 알아보겠습니다.
이미 인증서 만들기에서 제작한 apns.pem 인증서 파일을 FTP 프로그램을 이용해 임의의 경로로 업로드 합니다.
보통 웹루트내에 파일을 올리면 주소나 파일명만 알면 바로 다운로드 받아갈 수 있기때문에 가급적 웹루트가 아닌 곳에 올려주시기 바랍니다.

이 인증서로 APNS 서버와의 통신을 통해 인증을 받고 인증을 받은 상태에서 Payload에 애플이 요구하는 텍스트를 채워 json데이터를 APNS서버로 전송해주기만 하면 됩니다. 이런 부분을 손쉽게 접근할 수 있도록 도와주는 친구들을 아래에서 몇 명 소개시켜드리겠습니다.

그래도 어떤 원리인지는 간단하게 알고 넘어가야겠죠?

 

Payload 작성 양식

다음의 애플문서를 보면 아주아주 자세하게 나와있습니다. 영어가 되시는 분은 애플에서 제공하는 원문을 보시는게 더 좋을 것 같네요!
기본적으로 Payload는 JSON 형식으로 전달되며 형식은 다음과 같습니다.

여기서 aps 키값은 Dictionary 형태로 만들어지며 각각의 키들은 다음과 같은 역할을 합니다.

  • alert : 스트링 혹은 딕셔너리 형태로 값이 들어갈 수 있으며 스트링으로 할 경우 보내고자하는 메시지를 적어 넣어주시면 됩니다.
    • body : 전달할 내용을 입력합니다.
    • action-loc-key : LocalizedString의 키값을 참조해 AlertView의 View Detail이라는 버튼을 언어에 맞게 변경시켜줍니다.
    • loc-key : LocalizedString의 키값을 참조해 내용을 채워줍니다.
  • badge : 배지의 숫자를 입력합니다.
  • acme1 or acme2 : 커스터마이징 변수값으로 임의의 문자열로 키와 값을 만들어 스트링 혹은 배열의 형태로 전달 할 수 있습니다.

PHP 테스트 코드:

아래는 EasyAPNS가 아닌 막코딩으로 전송테스트를 해보았습니다.
상단에 deviceToken정보만 제대로 입력해주면 해당 디바이스로 메시지가 잘 전송되는 것을 확인했습니다.

 

개발에 사용할 오픈소스

위와 같이 Github 및 검색을 해보시면 아시겠지만 다양한 개발자들이 만들어 놓은 오픈소스가 많이 있습니다.
가장 최근에 등록된 PHP_APN의 경우 API를 기능별로 세분화시켜놓아 관리기능을 별도로 제작할때 좋지 않을까 싶습니다.
하지만 저는 PHP로 개발코자 EasyAPNS를 이용해서 개발을 시작하다가 일이 커져 지금은

별도로 개발해 안드로이드까지 통합발송이 되도록 만들어 사용하고 있습니다.
GCM(Google Cloud Message)에 대한 정보는 다음에 시간날때 게재하도록 하겠습니다.

 

관련 참고 자료:

Why was my device token rejected by Apple?

Local and Push Notification Programming Guide

How to build an Apple Push Notification provider server (tutorial)

 

크롬의 개발자툴 스킨 바꾸기

시작하며

download-hero-win

웹개발하실때 크롬은 거의 필수품이라 많이들 쓰시리라 생각합니다.
크롬 개발자도구에서 사용할 아주 괜찮은 스킨이 하나 나와서 소개하려고 합니다.
왠지 ST2에서 사용하는 테마와 느낌이 유사해서 그런지 더 마음에 드네요!
우선 뭘 소개하려는 것인지 밑에 이미지를 봐주세요!

 

변경 전모습

크롬 적용 전
크롬 적용 전

 

변경 후모습

크롬 적용 후
크롬 적용 후

 

나만의 스타일 만들기

우선 크롬 개발자 도구의 CSS를 변경하기 위해 해당 CSS 파일의 위치를 알아야 합니다.
플랫폼별로 경로는 다음과 같습니다.

MAC에서의 경로

 Ubuntu에서의 경로

 Windows Vista이상 에서의 경로

 Windows XP에서의 경로

사용중인 플랫폼에 해당 위치로 가시면 Custom.css가 있습니다. 능력있으신 분들께서는 이부분을 수정해서 나만의 개발자 도구 스타일을 만드시면 됩니다.
제가 위에 보여드린 것은 Zero Mark Matrix라는 이름을 가진 테마이며 Github에서 공개 배포 중 입니다.  테마를 다운 받으시면 Custom.css와 Custom-stable.css 2개가 있습니다.

이중 Custom-stable.css 파일을 Custom.css로 변경하셔서 해당 위치에 덮어씌우시면 끝납니다.
그런후, 크롬 종료후 재실행하여 확인해 보시면 적용되어 있는 것을 보실 수 있을 것 입니다.

자세한 내용과 설명들은 해당 링크 참고하시고 잘 사용하세요! ^^

 

 

 

PHP로 구현한 SEED128 + CBC + PKCS5 암호화

SEED 암호알고리즘
SEED를 제공하는 인터넷진흥원 사이트 스크린샷

 

Prologue

회사에서 미션이 하나 떨어졌습니다. 한국인터넷진흥원에서 순수 국내기술로 개발된 SEED128을 PHP로 구현하는 것 입니다.
참고로 한국인터넷진흥원에서 JAVA나 C언어로는 SEED소스를 제공하고 있습니다. 심지어 안드로이드와 Objective-C도 제공하는데 PHP만 없습니다.
SEED에 관련된 내용은 해당 사이트에서 참고하시기 바라오며, 현재 표준으로 채택되어져 각종 금융기관에서 널리 사용되고 있다는 것만 알고계시면 될 것 같습니다.

SEED 암호화 기술은 블록 암호 알고리즘을 채택하고 있어 통신하기 위한 곳 모두 동일한 Key를 가지고 있어야 암호화와 복호화가 가능합니다.
저 역시 금융기관쪽과 중요한 데이터를 통신을 하기 위해서 사용하는 것 이며 해당 금융기관쪽은 자바로 이미 구현되어 있어 동일한 Key를 가지고 저희쪽 PHP로 암/복호화가 가능해야 합니다.
사실 말이 PHP로 구현하는 것이지 Native 언어는 명확한 기준으로 변수타입들이 정해져 있기라도 하지만 웹 전용으로 유연하게 만들어진 PHP에서 지원할리 없기때문에 무수한 삽질이 예상되었습니다.

우선 검색하기 시작했습니다. 다행히도 SEED자체에 대한 프로세스는 PHP로 구현해놓으신 분이 계셨습니다. 아래에서 class.seed.php를 다운로드 받으시면 됩니다.
다시한번 이자리를 빌어 정말 감사드립니다.

출처: http://docs.cena.co.kr/textyle/15770

하지만 위의 소스는 순수하게 SEED만 구현해 놔서 제가 원하는 것을 구현하기에는 부족했으며, 기존 class.seed.php 클래스는 운영체제가 64bit인 경우 Integer의 Max값이 커지다보니 라운드키의 정수값을 오버플로우 시키지 못하는 증상으로 인해 값을 제대로 출력하지 못하는 문제가 있어 이 부분은 별도로 해결했습니다.

[box type=”info”]자바는 플랫폼에 관계없이 32비트 고정이지만, PHP는 플랫폼에 따라 32비트면 정수의 최대값이 2147483647이고, 64비트면 9223372036854775807로 자동으로 할당됩니다.[/box]

암호화를 운용하기 위해서 저의 경우에는 CBC와 PKCS5 방식으로 구현을 해야하며 통상적으로 검색하면 나오는 IV의 값도 PHP에서 사용하는 랜덤 스트링 형태가 아닌 자바와 동일하게 바이트 배열로 정해진 값을 만들어서 써야 하기 때문에 본젹적인 개발과 검색에 들어가기 시작했습니다. 말 자체를 이해 못하시는 분들을 위해 용어에 대한 정의들 부터 살펴보겠습니다.

 

암호 블록 체인 방식 (CBC)

그림을 보면 더 이해가 잘 되야 하는데~ 저는 이런 그림을 별로 좋아하지 않아서 이해가 잘 되지 않았습니다.
간단하게 설명하면 이전 블록의 암호문을 현재 평문 블록을 암호화할 때 사용하면서 운용하는 모드입니다. 따라서 같은 평문들도 서로 다른 암호문 블록으로 순차적으로 암호화가 이루어지게 됩니다. 하지만 처음 나오는 평문을 암호화할 암호문이 없기 때문에 보통 랜덤으로 만들게 되며 이를 IV(초기화 벡터)라고 합니다.
평문의 첫번째 블록이 IV와 XOR을 수행하고 나서 암호화를 수행하게 되며 다음은 그 암호화된 블록이 평문의 다음블록을 XOR하는 식으로 평문 블록을 마칠때까지 반복하는 구조입니다. 이게 저도 수도 없이 봤지만 쉽게 이해가 되지 않더군요! 그래도 이해하고 넘어가셔야 합니다. 아래는 위키피디아에서 발췌한 이미지를 첨부하였으며 이해가 안되시는 내용은 구글링을 통해 확인하시기 바랍니다.

Cbc encryption.png
CBC 운영모드에서의 암호화
Cbc decryption.png
CBC 운영모드에서의 복호화

Continue reading PHP로 구현한 SEED128 + CBC + PKCS5 암호화

IE9 이하에서 HTML5 사용을 위한 필수요건

현재 회사 프로젝트 홈페이지 구축하면서 IE에서 버전 및 쿼크/표준모드에 따라 레이아웃이 무너지는 증상을 잡기 위해 사용중인 것들입니다.
몇년을 IE 신경안 쓰다가 다시 IE를 신경쓰면서 작업하려고 하니 미칠 것 같습니다. ㅋㅋ

특히나 IE8에서 레이아웃이 무너지는데 저 같이 고생하시는 분들 없으셨으면 합니다.

 

IE9 미만에서 HTML5 엘리먼트 지원 (구글 코드에서 다운로드)

위 코드가 html5shiv가 지원하는 HTML5 엘리먼트

 

IE7 미만에서 HTML 및 CSS 엘리먼트, 투명 PNG 지원 (구글 코드에서 다운로드)

이는 현재 사용하는 IE보다 버전이 낮을 경우 작동하는 스크립트로 버전이 낮은 브라우저에서 호환성을 보장하게 만들어줍니다.
저는 <!–[if IE 9]> 이런 형식으로 IE9일때만 혹은 IE8일때만 불러올 수 있도록 변경해서 사용중입니다.
특히 IE8부분은 아예 제거를 해버리니 레이아웃이 정상적으로 나오더군요!!
참고만 해주세요! 각자의 환경에 따라 다르게 작동할 수 있으니 유의하셔서 작업하시기 바랍니다.

 

IE9 미만에서 HTML5 DOM 인식

 

스크립트도 크로스 브라우징 생각하면 IE와 다르게 사용해야하는 부분들도 많습니다만 여기서는 그 부분은 다루지 않겠습니다.
급하게 작성하는거라 틀린 부분이나 추가사항 코멘트 달아주시면 참고하도록 하겠습니다.

 

팝업에서 부모창의 iframe으로 접근하기

새로운 회사에 이직해 정말 오랫만에 자바스크립트를 만지다 보니 많이 헷갈립니다.

제가 근무하는 곳은 주로 IE위주로 작업이 되어 있어 타 브라우저에서 작동 안되는 경우가 많습니다. 이것들을 언제 고치나 앞이 캄캄하기도 하지만 덕분에 좀더 깊이 있게 배울 수 있지 않을까 하는 마음으로 첫 테이프를 끊습니다.

부모창에서 iframe을 두고 그 iframe에 팝업 호출 함수를 통해 팝업을 띄우는 방식에 대해서 설명합니다.
보통 이렇게 하면 브라우저에서 팝업차단이 설정되어 있어도 팝업이 차단되지 않고 호출됩니다.

이곳에서는 실명인증이나 본인확인 혹은 아이핀 팝업을 호출할때 사용하고 있습니다.
보다 쉬운 이해를 위해 아래와 같이 그림을 첨부하오니 참고하시기 바랍니다.

How to access form between window objects (2)

 

1. 부모창에서 경로 없는 팝업 생성 및 아이프레임으로 원하는 주소를 호출

; 비어 있는(about:blank) 팝업이 호출되면서 동시에 특정 주소를 아이프레임으로 호출합니다. 여기서 특정 주소의 소스코드는 2번을 참고하세요!

 

2. 부모창에서 아이프레임으로 호출한 파일

; POST 타입 폼 전송을 팝업으로 호출해 이미 떠 있는 비어있는 팝업에 폼으로 전송한 내용이 들어가게 됩니다. 여기서 중요한 것은 빈 팝업을 호출할때의 윈도우의 이름인 ” popupWindowName” 입니다. 반드시 이것으로 타겟을 지정해주어야 이미 열려져 있던 빈 팝업창으로 폼을 전송해줍니다.

사파리에서 간혹 Unsafe Javascript라는 에러가 About:blank 팝업 창에서 뜨는 경우가 있는데 이럴 경우 iframe src에 orgin=[자신의 도메인] 파라미터를 추가해주시면 일단 작동 되는 것을 확인할 수 있습니다.

 

3. 팝업에서 처리한 내용을 부모창으로 가져오기

; 팝업에서 아래와 같이 작성하게 되면 부모창의 아이프레임 즉 2번 소스의  receivedForm을 submit해서 진행해주게 됩니다. 한가지 주의해야 할 점은 contentWindow라고 적혀있는 부분인데, IE에서는 빼도 상관없지만 타 브라우저에서는 작동하지 않는 문제점을 야기 시키니 주의가 필요합니다. 그리고 iframe을 호출할때 반드시 getElementById를 이용해 iframe을 호출해야 정상 작동합니다.

 

가령, 부모창의 iframe이 아닌 부모창 자체의 폼을 submit하려면 어떻게 해야할지 궁금해하시는 분들도 계실까하여 아래 소스코드 첨부합니다.

 

날씨 API 과연 어디를 써야할까?

현재 Qnote All-in-One에서 날씨 API를 이용해 날씨를 간단하게 표현해 사용자에게 알려주고 있습니다. 사용자가 휴대폰을 사용하는 위치의 로컬 날씨를 보여주고 있는데요, 정말 간단하게 날씨를 표현한 아이콘과 온도 정도만 보여주고 있습니다. 이렇게 간단한 것을 사용하기 위해서는 날씨 API를 선택해야 하는데 이게 생각보다 만만치 않습니다.

검색해서 찾아본 결과 사용에 대한 지불을 하지 않는 즉, 무료로 사용하는 조건에서 표를 작성해보았습니다.
기타 기상청도 있고 여러개의 사이트가 더 있었지만 제 맘에 드는 API를 찾아서 4개 정도만 작성해보았습니다.

서비스 회사 야후API 구글API Weather Underground WeatherBug
라이센스 비상용 상용/비상용 상용/비상용 상용/비상용
쿼리제한 10,000 무제한 500/시간, 10/분 무제한
키발급

 

1. YAHOO WEATHER API

제가 개발하는 Qnote All-in-One의 경우 유료앱이라 일단 야후 API는 사용할 수가 없습니다.
더불어 야후API에 10,000이라는 쿼리제한을 적어놓았는데요 날씨 API 자체는 무제한입니다.
다만, 날씨를 받아오기위해선 WOEID라는 국가/도시별로 정해진 지역코드가 있는데 이코드를 받기 위해서 GeoPlanet API를 이용해야하는데요, 이 쿼리제한이 10,000입니다.  참고적으로 YSQ을 이용하면 도시이름을 검색해 별도의 제한없이 WOEID를 가져올 수는 있습니다. 저의 경우 위도/경도로 WOEID를 받아와야 해서 별 수 없이 GeoPlanet API를 이용했습니다.

그럼, 간단하게 가져오는 방식에 대해 짚고 넘어가겠습니다. 야후는 총 2단계 방식으로 결과값을 가져옵니다.
첫번째로, 좌표값으로 WOEID를 가져와야 합니다. 그러기 위해서는 우선 야후에 프로젝트 신청하시고 어플ID를 발급받으셔야 합니다. 그런후 아래 첫번째줄의 URL을 보내면 WOEID를 반환합니다.
그 반환된 값을 두번째줄의 날씨피드로 쏴주기만 하면 날씨데이터를 XML로 반환해줍니다.

 

2.  GOOGLE WEATHER API

구글은 2012년 9월경 날씨 API가 종료되었습니다.

 

3.  WEATHER UNDERGROUND WEATHER API

전세계적으로 유명한 API인것 같습니다만, API에 대한 정책이 확실합니다.

Calls Per Day Calls Per Minute Price
DEVELOPER 500 10 USD $0
DRIZZLE 5000 100 USD $20
SHOWER 100,000 1000 USD $200
DOWNPOUR 1,000,000 10,000 USD $300

쿼리가 상당히 제한적이라 사용도 해보지 않았네요!

 

4.  WEATHERBUG WEATHER API

현재 제가 이용하고 있는 API입니다.
이용을 위해서 API키를 발급받아야 합니다. 간단하게 발급 절차를 이미지로 순서대로 나열해보겠습니다.

가입타입 선택 저의 경우 모바일 디바이스로 선택해서 진행했습니다.
가입정보 입력하세요!
바로 가입하실때 입력한 이메일 주소로 이메일이 옵니다.
이메일의 링크를 클릭하면 키발급 완료!

키가 발급이 다 된 후, 잘 읽어보시면 30분 후에 사용해야 정상적인 접근이 가능하다고 적혀있습니다. 받자마자 해보시면서 왜 안되지? 하시면 안되실거 같아서 말씀드립니다.

나머지는 http://weather.weatherbug.com/corporate/products/API/help.aspx API 문서를 이용하셔서 작업하시면 됩니다.
이용하실 수 있는 정보들은 다음과 같습니다.

  1. 위치 검색
  2. 날씨스테이션 검색
  3. 실시간 날씨
  4. 실시간 요약 날씨
  5. 1주일 일기예보
  6. 카메라 리스트 (미국만)
  7. 날씨경보 (미국만)

추가적으로 날씨에 대한 상태정보는 170여개로 분류되어 디테일하게 알려줍니다. 그에 따라 아이콘도 170개… 아이콘에 관련된 문서를 보시면  GIF만 지원되는지 알고 좀 난감했었습니다. 하지만 API 문서탭에 아이콘 HELP을 클릭해보시면 아시겠지만 이미지 사이가 15 x13부터 500×420 다양한 사이즈를 지원합니다. 아래는 적용해본 앱의 스샷입니다. 생각보다 깔끔하게 나와서 만족스럽습니다. ^^

3-1

다음 릴리즈시 웨더버그의 API를 적용시켜 출시할 예정인데요, 출시후 별도의 문제점이 발견되면 글을 올려드리겠습니다.