Textarea 한글 글자 수 카운팅 제대로하기

기본

추측컨데 한글이 조합형이라 발생하는 문제 같습니다.

어떤 문제냐면 textarea 글자 수 카운팅을 할 때, keydown, keyup, change 등등의 이벤트 핸들러를 바인딩 해놔도 한글을 입력하면 카운트가 제대로 업데이트 되질 않습니다. 몇몇 jQuery 플러그인이나 JavaScript 구현된 것을 구글링 해봤는데 코드는 대동소이하더라구요. 문제도 여전히 발생하고. 사실 영어는 문제 발생하지 않으니 아마 고려하지 않았을겁니다.

이 문제를 해결한 곳이 두 군데 있는데 하나는 미투데이고 다른 하나는 트위터입니다. 미투 같은 경우엔 focus가 발생했을 때, setInterval() 함수를 이용해 업데이트를 시작하고 다시 blur()가 되면 setInterval()을 해지시키는 식으로 구현했습니다. 물론, 좀 비효율적이긴 하지만 이렇게 안하면 어떻게 구현하나 싶기도 하네요.

트위터는 어떤식으로 구현하는지 아직 살펴보지 못했는데 한 번 확인해 봐야겠네요.

js 구현체 Github 링크

트위터 API 플랫폼과 OAuth – Access Token 얻기

기본

이 글은 트위터 API 플랫폼과 OAuth – Twitter for Websites에서 이어지는 글입니다.

OAuth?

OAuth Logo

OAuth 로고. 저는 볼때마다 치과가 떠오르네요..

OAuth에 관한 자세한 설명은 네이버 개발자센터의 소개글을 한 번 읽어보시면 좋습니다.

OAuth 간단 요약

먼저 API를 제공해 주는 곳을 서비스 프로바이더(트위터)라고 부릅니다. 그리고 서비스 프로바이더의 API를 사용하는 쪽을 컨슈머(여러분의 애플리케이션)라고 부르죠. 그리고 사용자란 컨슈머의 서비스를 사용하는 사람들 입니다. 컨슈머는 서비스 프로바이더에 자신의 애플리케이션과 관련된 정보를 입력한 후, 컨슈머 키와 시크릿을 발급 받습니다. 이것은 OAuth 이전의 API Key와 비슷한 거라고 생각하셔도 되겠습니다. 애플리케이션에 관한 정보를 입력할 때 주의하실 점은 나중에 OAuth 인증진행 중, 사용자에게 노출이 된다는 점입니다.

Create an application

애플리케이션 등록 화면

Application description

등록한 정보는 이런식으로 사용자에게 노출됩니다

위 그림은 애플리케이션 등록 화면인데요. 여기서 약간 애매한 부분이 웹사이트 URL과 콜백 URL입니다. 트위터는 완전한 형태의 URL이 필요하기 때문에 테스트 용도로 사용하기 위한 http:://localhost:8080/ 형태는 사용이 불가능합니다. 그래서 구글링을 통해 약간의 꼼수를 부린건데요. 물론, hosts파일에 127.0.0.1 local.dev 식으로 사용할 것을 만들어 주셔야 합니다. 이 방법이 귀찮다면 그냥 127.0.0.1로 하셔도 됩니다 🙂

컨슈머 키와 시크릿이 있는 상태에서 OAuth 인증 플로우가 시작됩니다:

OAuth flow for webapplication

callback이 있는 OAuth 인증 과정

컨슈머는 먼저 컨슈머 키와 시크릿을 사용해서 Request Token(트위터에선 oauth token이라고도 쓰이며 토큰은 키와 값의 쌍이며 Request Token의 경우 매번 달라집니다)을 발급 받습니다. Request Token은 해당 컨슈머를 대변한다고 보시면 되겠습니다. 자~ 이제 컨슈머는 됐으니 사용자를 대변할 Access Token을 받아야겠죠? 결국 서비스 프로바이더의 API를 사용한다는 것은 특정 사용자를 대신해 컨슈머가 서비스 프로바이더에게 해당 사용자 대신 API 요청을 하는 것이고, 그렇다면 해당 사용자가 정말 이 컨슈머에게 권한을 위임했는지 서비스 프로바이더가 알아야 할 것입니다. 이 역할을 하는 것이 Access Token 되겠습니다.

트위터가 Request Token을 발급해 주면 컨슈머는 사용자를 서비스 프로바이더로 보내 인증을 받고, Access Token을 얻기 위해 verifier 값을 얻어야 합니다. 그래서 위의 두 번째 그림처럼 컨슈머의 계정 사용 여부를 물어보는 것이죠. 만약 로그인 정보 쿠키가 남아있다면 두 번째 그림이 아니라 컨슈머를 허용할지에 대한 화면이 나타납니다.

Authorize consumer to use your account?

로그인 정보가 있다면 간단히 컨슈머 허용 여부만 물어봅니다

만약 예전에 허용을 했었고(트위터 마이페이지 applications 탭에서 확인 가능), 로그인 정보도 있다면 바로 verifier 값을 얻을 수 있으며, 이 verifier 값과 Request Token 정보를 트위터에 보내서 최종적으로 Access Token을 발급받게 됩니다.

트위터의 OAuth

트위터는 현재 OAuth 1.0a 스펙을 구현 중이며, 조만간 2.0을 제공할 것 같습니다. OAuth가 기존 인증 절차와 어떻게 다른지는 moving-from-basic-auth-to-oauth에 잘 설명돼 있습니다.

제 생각에 OAuth는 두 가지 큰 특징을 가지는 것 같습니다:

  • 사용자 계정 정보를 애플리케이션에서 관리하지 않는다.
  • 인증 절차를 서비스 프로바이더에게 위임한다.

즉, 컨슈머의 사용자는 적합한 절차를 거쳐 서비스 프로바이더에게 컨슈머가 자신을 대신해 해당 서비스를 이용할 수 있다는 권한을 위임하게 되며, 이를 확인하기 위해 기존의 사용자 계정 정보 대신 Access Token을 이용합니다. 컨슈머는 Access Token을 가지고 해당 사용자 대신 서비스 프로바이더의 API를 호출합니다.

Access Token은 한 번 발급 받으면 다른 정보(로그인 정보, Request Token 등)가 전혀 필요없이 바로 API 호출이 가능하게 되며, 사용자가 계정 정보를 변경(패스워드 변경 등)했다고 하더라도 이 Access Token은 유효합니다.

Access Token의 유효기간은 서비스 프로바이더의 정책에 따라 다른 부분이 있는데, 트위터 OAuth faq를 확인해 보면 현재 Access Token의 유효기간은 없다(!)고 명시하고 있습니다. 따라서 토큰 보관에 주의를 하실 필요가 있을겁니다. Access Token의 유효기간이 없긴 하지만 사용자가 자신의 계정 설정에서 애플리케이션을 명시적으로 거부하거나 관리자가 제한한 경우에 Access Token이 만료될 수 있습니다.

내 계정에 접근할 수 있는 애플리케이션 목록

내 계정에 접근할 수 있는 애플리케이션 목록

애플리케이션 종류에 따른 OAuth 인증

트위터에서는 OAuth 인증에 관해서 여러가지 방법을 제공해 주고 있습니다. 그렇다고 OAuth 스펙을 무시하는 것은 아니며 기본 흐름은 같되 세부적인 방법이 다른 것인데요. 특정 플랫폼에서 사용이 권장되는 것과 제한되는 것이 있습니다. 관련 정보는 공식 문서인 Which authorization path should I choose?를 읽어보세요. 아래는 이 문서를 요약한 것입니다:

웹 애플리케이션

콜백 방식의 OAuth를 사용해야 합니다. xAuth 방식은 사용할 수 없습니다.

써드 파티애플리케이션 이용

OAuth Echo라고 부르며 Twitpic, yfrog 같은 트위터 에코 시스템에 속하는 써드 파티 애플리케이션을 통해서 인증 및 API 호출을 위임하는 것을 말합니다.

위 두가지 방식이 웹 애플리케이션에서 권장됩니다. 모바일과 데스크탑 애플리케이션의 경우, 콜백 URL 방식을 사용하기 어렵거나 사실상 불가능 할 수도 있기 때문에 트위터에선 아래 두 가지 방법을 제공해 줍니다.

Out-of-band/PIN 코드 인증(oob)

콜백 URL OAuth 방식과 거의 흡사한데요. 콜백을 하는 대신에 컨슈머에게 특정 URL을 리턴해 줍니다. 접속하면 PIN 코드라 불리는 몇 자리 숫자가 나타나는데요. 이 숫자를 복사해서 다시 서비스 프로바이더에게 보내면 Access Token을 발급해 줍니다. 아마 핸드폰으로 소액결제 해보셨으니 그리 낯설지 않은 방식이라고 생각되네요 🙂

xAuth

xAuth 인증 방식은 우리가 많이 사용하고 있는 방식으로 사용자 계정 정보를 이용해서 Access Token을 발급받게 됩니다. xAuth 또한 OAuth 플로우를 거치며, 단지 Request Token을 얻는 부분과 사용자 승인 과정이 없을 뿐입니다. xAuth는 XAuth와는 다르며, 데스크탑과 모바일에서만 사용 가능합니다. 콜백 방식과 PIN코드 사용이 어려울 때, api@twitter.com에 메일을 보내 사용 동의를 얻어야 합니다.

Callback URL OAuth 자세히 살펴보기

애플리케이션 종류에 따른 OAuth 인증에서도 살펴 봤듯이 트위터에서는 OAuth 인증 방식에 몇 가지 옵션을 주고 있지만, 제가 웹 개발자라서 Callback URL을 사용하는 OAuth를 조금 더 자세히 살펴보겠습니다. 사실 다른 OAuth 방법들도 여기서 크게 벗어나지 않습니다.

1단계. Request Token 얻기

먼저, 앞서 살펴봤듯이 자신의 애플리케이션을 등록해 컨슈머 키/시크릿을 발급받습니다. 다음으로 Request Token을 발급 받기위해 http://dev.twitter.com/oauth/request_token을 POST로 호출합니다. 이때 컨슈머 키, 시크릿, OAuth 콜백 URL 등을 같이 보내야 합니다.

Get request token header

Request Token 요청을 위한 헤더의 예

그러면 트위터에서 Request Token(또는 OAuth Token)을 발급해 줍니다.

Response request token header

Request Token을 생성한 후 보내주는 응답 헤더의 예

2단계. 사용자 리다이렉트 하기

Request Token 발급 후, 사용자의 인증을 받기 위해 https://api.twitter.com/oauth/authenticate로 리다이렉트 해야합니다. 트위터 REST API OAuth 부분을 보면 /oauth/authenticate 외에 /oauth/authorize도 제공되는데요. authorize의 경우 사용자가 기존에 컨슈머 애플리케이션을 인증 했다고 하더라도 다시 인증 화면이 나타납니다. 반면에 authenticate는 이전에 사용자가 인증을 했다면 이 부분을 바로 넘어가 버립니다.  OAuth 1.0 스펙에서는 사용자가 반드시 해당 애플리케이션에게 자신의 권한을 줄 것인지 아닌지에 대해서 선택을 할 수 있게하라고 명시돼 있습니다. authenticate는 편의를 위해 이 부분을 대체한 것이라고 보면 되겠습니다.

로그인 정보가 없다면 로그인 및 애플리케이션 사용 동의 창이 나타나며, 로그인을 했다면 간단히 동의 페이지가 나타납니다. 이렇게 사용자 인증까지 마치면 트위터는 oauth_verifier라는 값을 넘겨줍니다.

Sign in OAuth Step2

사용자 인증 및 verifier 얻어오기

3단계. Request Token을 Access Token으로 교환하기

Request Token과 oauth_verifier 값을 가지고 https://api.twitter.com/oauth/access_token을 POST 방식으로 호출하면 Access Token을 얻게 됩니다.

Sign in OAuth Step3

드디어 Access Token을.. ;ㅁ;

트위터 API 라이브러리

트위터에서 제공하는 공식 OAuth 라이브러리는 없으며, REST API만을 제공하고 있습니다. 비공식적으로는 다양한 언어를 기반으로 하는 여러가지 구현체가 있으며, 그 중 트위터 공식 홈페이지에 등록된 Java 구현체는 총 3개 입니다. Java 구현체 중, Scribe의 경우 트위터 REST/Stream API 구현체는 아니지만 OAuth인증에 관한 범용적인 라이브러리를 제공합니다. Scribe의 예제 코드를 보면 다양한 SNS를 볼 수 있는데, 이 예제 중 트위터쪽은 PIN 코드 방식이므로 궁금하시면 한 번 돌려보세요.

트위터 파일럿 프로젝트

처음으로 Github에 프로젝트를 공유해 보네요. Spring Framework 3.0 기반에 Scribe 라이브러리를 사용했습니다. 관심 있으신 분들은 한 번 돌려보시고 참여도 좀.. 🙂

https://github.com/ethdemor/social-api-pilot

개발 시 고려사항

파일럿 프로젝트를 만들다 알게된 사실인데, 사용자가 계정 설정에서 해당 컨슈머를 revoke 한 경우, Access Token이 파기됩니다. 그런데 컨슈머 쪽에서는 Access Token이 파기 됐다고 연락 같은거 못받으니 문제가 생길 수 있습니다. 바로 만료된 Access Token으로 트위터 API를 호출한 경우인데요. 문제는 트위터쪽에선 무조건 200 OK 응답 코드를 준다는 것입니다. 만약 타임라인을 가져오려고 할 경우 사용자 입장에서 에러는 안뜨는데 목록은 하나도 안보이는 경우가 발생할 수 있겠죠. 트위터는 응답 코드는 200 OK지만 status 코드에 에러 정보를 넣어주니 이를 확인해서 대처해야 합니다.

Access Token이 사용 가능한지는 다음 API를 호출해 보면 됩니다:

GET account/verify_credentials

만약 현재 Access token이 사용할 수 없는 것이라면 HTTP 응답 헤더 status 코드가 401 Unauthorized로 세팅됩니다. 따라서 status 값이 401일 때, 다시 OAuth 인증을 받게 하면 이 문제를 해결 할 수 있을 것 같습니다.

트위터 API 플랫폼과 OAuth – Twitter for Websites

기본

이 포스팅은 원래 트위터 OAuth만 다룰려고 했었지만 트위터 API 플랫폼과 얽힌 부분이 많기 때문에 좀 더 포괄적으로 적어보려고 합니다. 단, 이 포스팅은 소개 정도에 그치기 때문에 자세한 내용은 해당 문서를 꼭 읽어 보시길 바랍니다.

트위터 API 플랫폼 훑어보기

트위터 개발자 페이지에 있는 슬라이드입니다:

Developing for @twitterapi (Techcrunch Disrupt Hackathon)

슬라이드를 보면 트위터 API 플랫폼에 대해 간단한 설명이 나와있습니다. OAuth는 API 사용을 위한 사용자 인증에 쓰이며 현재는 OAuth 1.0a를 구현중인데 곧, OAuth 2.0을 공개할 예정인가 보네요. 참고로 페이스북은 OAuth 2.0을 구현하고 있습니다.

트위터 API를 사용하는 두 가지 방식

슬라이드에서도 나와있듯이 트위터 API를 사용하는 방법은 크게 두 가지로 구분할 수 있습니다. 첫 번째는 트위터에서 제공해주는 웹용 컴포넌트를 가져다 쓰는 방식(Twitter for Websites)이고 두 번째는 트위터 API를 직접 사용하는 방식(REST/Stream API)입니다. 이번 포스팅에서는 Twitter for Websites에 대해서 살펴보겠습니다.

Twitter for Websites

트위터에서 웹 사이트를 위해 제공하는 여러 컴포넌트로 직접 API를 호출하지 않고 트위팅, 팔로우 버튼 등을 웹 페이지에 넣으면 사용자의 로그인 정보(정확하게는 .twitter.com에 저장된 쿠키)를 사용해 트위팅, 팔로우 기능을 하게 됩니다. 만약 로그인 정보가 없다면 로그인 창이 나타나게 됩니다. 컴포넌트라고 말은 거창하지만 사실 태그 하나와 약간의 자바스크립트로 이루어져 있고, 이것을 페이지에 붙여 넣으면 끝입니다. 참 쉽죠? 트위터에서 제공하는 컴포넌트는 다음과 같습니다:

Tweet ButtonFollow Button

기본 트윗 버튼들

제공되는 기본 버튼의 종류

말그대로 트윗과 팔로우 버튼입니다. 편리하게 트윗 카운팅도 제공해 주며 자신의 웹 사이트 정보나 언어 등을 입력해 제공되는 기본 버튼을 커스터마이징 할 수도 있습니다. 언어를 한국어로 설정하면 한국어로된 버튼도 만들어 줍니다. 이 버튼을 클릭하면 다음과 같은 화면이 나옵니다:
Tweet Button Clicked

트윗 버튼 클릭하면 이런 창이 나옵니다

익숙한 창이죠? 한 가지 재미있는 건 여러 파라미터들을 설정해 줄 수 있다는 겁니다. 파라미터 설정을 통해 버튼 커스터마이징을 할 수도 있고, 어떤 텍스트를 트윗창에 넣을 것인지, 어떤 URL을 공유할 것인지, 해시태그로 논의를 이어갈 것인지, 누구를 멘션할 것인지 등을 설정해 버튼을 생성할 수도 있고, 자신만의 버튼을 만드는 것도 가능합니다.

Embedded Tweets

임베디드 트윗은 트위터 사이트의 특정 부분을 아예 가져다가 붙일 수 있습니다. UI도 그대로 가져오니 상당히 편리하겠네요. 사용자들도 동일한 경험을 할 수 있겠죠?

Embedded Tweets

트윗 임베드하기

트위터 문서대로라면 트윗 세부 페이지마다 임베드 버튼이 노출되어야 하는데 어째서인지 관련 버튼이 보이질 않네요;;

Embed This Tweet Button

나는 이런 버튼 안보이는데?

저 버튼을 누르면 유튜브에서 동영상 퍼가듯이 관련 코드가 나오고 복사 붙이면 됩니다. 그런데 이렇게 복사 붙이기를 하지 않고 json을 통해 임베드 트윗에 관련된 데이터를 받아온 후, 동적으로 보여줄 수 있는 방법도 제공하고 있는데요. 이를 oEmbed라고 한다네요.

Web Intents & Javascript callback events

Web Intents는 팝업 창으로 이루어진 트위터 API 사용 방법으로 웹 페이지에 끼워 넣어도  따로 다른 페이지에 왔다갔다 할 필요도 없고, 말그대로 웹에 최적화된 방법이라고 할 수 있습니다. Web Intents 역시 위의 방법들처럼 사용자의 로그인 정보가 담긴 쿠키를 사용해 API를 사용하게 되며(만약 로그인 정보가 없다면 팝업으로 로그인 창이 뜨게 됩니다) tweet, reply, retweet, favorite, follow의 기능을 사용할 수 있습니다. 트위터의 거의 핵심적인 기능들을 사용할 수 있다는 거죠. 반대로 이정도 기능을 사용할꺼면 굳이 REST/Stream API를 사용할 필요가 없다는 말도 됩니다. 뒤에서 더 설명하겠지만 API를 사용할 경우 할 수 있는건 더 많아지지만 앱 등록부터 OAuth 인증까지 신경써야 하는 부분이 많아집니다.
Web Intents를 사용하는 방법은 매우 쉽습니다.

1.

<script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script&gt; 태그를 임포트 하구요.

2. 사용하고 싶은 기능을 <a> 태그로 만들어 주면 됩니다. 버튼과 마찬가지로 href 속성에 쿼리스트링 형태로 파라미터를 넘기는 것도 가능합니다.

링크를 클릭하면 스크립트가 알아서 적당한 크기의 팝업 창을 띄워줍니다. 그리고 이미지 리소스들도 잔뜩 지원해주니 맘에 드는 새 한마리 가져다가 쓰시면 됩니다 🙂

Web Intents나 Tweet/Follow Button을 사용할 때, 이벤트 콜백을 지원하는데요. 이것을 Intent Events라고 부르고 다음과 같은 종류가 있습니다:

  • widgets.js 파일 로딩이 완료 됐을 때
  • tweet, follow, retweet, favorite 기능이 완료 됐을 때
  • 트윗, 트윗 카운트, 팔로우, 유저 이름을 클릭했을 때

Share Bookmarklet

북마클릿. 아마 이건 즐겨찾기가 우리한테 더 친숙할  겁니다. 즐겨찾기에 자바스크립트를 한 줄 넣어놓고, 트윗하고 싶은 페이지에서 한 번 누질러 주면 요런 팝업창이 뜹니다:

Share Bookmarklet

맘에 드는 페이지에서 즐겨찾기를 누르면 바로 공유할 수 있습니다

즐겨찾기에 등록해놓고 써보세요:

javascript:(function(){window.twttr=window.twttr||{};var D=550,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C&gt;A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('http://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');E=F.createElement('script');E.src='http://platform.twitter.com/bookmarklets/share.js?v=1';F.getElementsByTagName('head')[0].appendChild(E)}());

 @Anywhere

아마 웹 사이트 중에 트위터로 로그인(Connect to Twitter)을 해서 서비스를 이용해 보신 적이 있으실 텐데요. 바로 @Anywhere의 기능 중 하나입니다. 이 외에도 username을 찾아서 트위터 링크를 만들어 준다던지, 해당 username에 마우스를 올려다 놓으면 정보 창이 뜬다던지, 팔로우 버튼, 트윗 폼 같은 기능이 제공됩니다.

사용법은 기존보다 조금 더 복잡한 편인데 바로 컨슈머 키(또는 API key)가 필요하기 때문입니다. 컨슈머는 OAuth의 용어로 서비스 프로바이더(트위터)를 이용하는 클라이언트(여러분의 웹 애플리케이션)를 말합니다. 컨슈머 키를 얻기 위해선 자신의 애플리케이션 정보를 등록해야 합니다. 참고로 REST/Stream API를 사용하기 위해서도 이 등록절차를 거쳐야 합니다.

사용하는 방법은 위의 방법들과는 다르게 자바스크립트를 하나 임포트 한 후, jQuery 스타일로 CSS 셀렉터로 엘리먼트를 가져와 필요한 기능을 적용시키게 됩니다. 예를 들어, 트위터 사용자 유저네임이 있을 때 해당 유저의 트위터 페이지로 링크를 시키는 기능(linkify)을 적용하고 싶다면..

@Anywhere linkify HTML

간단한 마크업을 한 후..

@Anywhere linkify result

링크가 된 부분이 보이시나요?

Web Intents 보다 더 강화된, 트위터 친화적인 사이트를 만들고 싶으시다면 @Anywhere가 제격일 것 같네요.

 

트위터 OAuth와 Access Token 얻기로 이어집니다.