서문
이전에는 전체 웹사이트를 선배 혼자서 만들었기 때문에, 다양한 버그와 미비한 점들이 많았습니다. 그래서 리팩토링을 계획하게 되었고, 후배가 seajs 개발 프레임워크를 구축해 주었기 때문에 저는 프론트엔드 로직만 작성하면 되었습니다.
현황
회원가입과 로그인 부분은 제가 작성했기 때문에, 저는 여기에 신랑 웨이보(新浪微博)와 QQ 로그인 기능을 추가하려고 합니다. 사용자가 클릭하면 해당 ID를 데이터베이스에 저장하는데, 물론 이는 데이터베이스 테이블 필드를 수정해야 합니다. wb_id와 같은 필드명을 별도로 추가하여 표시할 예정입니다.
현재 널리 사용되는 방법은 두 가지입니다. 하나는 신랑 웨이보(또는 다른 로그인 방식, 이하 동일)로 로그인한 후, 백엔드에서 자동으로 사이트 고유의 ID를 생성하고, 동일한 행의 wb_id에 해당 사용자의 웨이보 ID를 저장하는 것입니다. 이후 어떤 계정으로 로그인하든 상관없이, 첫 번째 웨이보 로그인 후 사용자는 닉네임(선택 사항, 웨이보 닉네임을 바로 사용할 수 있음)과 비밀번호(필수, 나중에 신랑 웨이보가 서비스를 종료할 경우 사용자가 로그인할 수 없기 때문)를 설정하기만 하면 됩니다. 다른 방법은 신랑 웨이보 로그인 후 사용자가 수동으로 계정과 비밀번호를 생성하도록 유도하거나, 이미 등록된 사용자 계정에 바인딩하도록 유도하는 것입니다.
제가 선택한 방법
자, 이상은 비즈니스 로직이었고, 저는 첫 번째 방식으로 구현할 예정입니다. 아래는 구체적인 구현 방법입니다: 신랑 웨이보의 JSSDK API를 사용하는 방법.
먼저, 대부분의 온라인 튜토리얼에서 말하는 것처럼 OAuth2.0 프로토콜의 원리를 이해해야 합니다. 사실 이해하지 못해도 괜찮습니다. 프로세스만 알면 됩니다. OAuth2.0 인증 프로세스는 온라인에 많이 설명되어 있으니, 여기서는 더 이상 설명하지 않겠습니다.
주의: 모든 단계의 전제는 이미 신랑 웨이보 오픈 플랫폼의 개발자 권한을 획득한 상태여야 합니다. 그렇지 않으면 API를 호출할 권한이 없습니다. 신랑 웨이보 개발자 신청에 대해서는 직접 검색해 보세요. 신랑 웨이보 개발자 신청을 완료하면 appid를 얻게 되는데, 이는 신랑 웨이보가 누가 API를 호출했는지 식별하는 핵심 ID이며, 이후 단계에서도 사용됩니다.
첫 번째 단계: 네임스페이스 추가, jssdk 파일 참조
네임스페이스 추가:
1 | |
jssdk 파일 참조:
1 | |
여기서 YOUR APPKEY는 신랑 웨이보 개발자 신청 시 제공받은 appid로 대체해야 합니다. debug=true는 디버깅을 용이하게 하기 위한 것이며, 정식 출시 시에는 &debug=true를 삭제하면 됩니다.
두 번째 단계: API를 사용한 로그인 인증
여기에는 두 가지 방법이 있습니다. 하나는 버튼 클릭 후 스크립트에서 직접 API의 WB2.login() 메서드를 호출하는 것입니다. 자세한 내용은 신랑 API를 참조하세요.
또 다른 방법은 사용자를 appid와 콜백 주소가 포함된 주소(임시로 인증 페이지라고 부르겠습니다)로 유도하는 것입니다. 형식은 다음과 같습니다:
1 | |
여기서 YOUR APPKEY와 Your_CallBack_Address를 자신의 것으로 대체해야 합니다. Your_CallBack_Address에는 `http://``을 반드시 포함해야 합니다. 예를 들어, 제 테스트 유도 주소는 다음과 같습니다:
1 | |
주의: 이 콜백 주소는 반드시 php/html/jsp 등의 동적/비동적 확장자 형식이어야 하는 것 같습니다. 홈페이지의 경우 http://xheldon.com是不行的,需要加上http://xheldon.com/index.html(因为我的后台是 Node`의)여야 할 수도 있습니다. 이 부분은 직접 시도해 보지 않았으니, 필요한 분들은 직접 테스트해 보시기 바랍니다.
첫 번째 방법의 표현 형태는 유도 진입점을 클릭하면 바로 웨이보 로그인 인증 페이지의 대화상자가 팝업되는 것입니다. 이때 chrome을 사용 중이라면, 이 작은 창의 주소창 왼쪽에 작은 자물쇠 아이콘이 나타나며, 이 주소는 잠겨 있어 수정할 수 없음을 나타냅니다. 팝업 창에서 웨이보 로그인 계정과 비밀번호를 입력하여 인증하면 대화상자가 사라지고, 원래 페이지가 새로고침되며, 제3자 웹사이트에서 계정을 조작할 수 있게 됩니다.
두 번째 방법은 스크립트에서 WB2.login()을 사용하지 않고, 사용자를 앞서 말한 appid와 콜백 주소가 포함된 주소로 유도하는 것입니다. 이 주소에서도 계정과 비밀번호를 입력하도록 요구하지만, 첫 번째 방식과의 차이점은 현재 페이지를 떠나 이 인증 페이지로 이동한다는 것입니다. 계정과 비밀번호를 입력하여 인증하면 이 링크에 작성된 콜백 주소로 돌아갑니다.
위 두 단계의 원리는 사실 OAuth2.0 프로토콜 인증 과정입니다. 다만 JSSDK가 첫 번째 요청으로 반환된 code와 두 번째 요청으로 반환된 access token을 대신 처리해주기 때문에, 공식 API 문서에서 설명하는 것처럼 basic 방식을 사용해 access token을 header에 넣고 post나 get 방식 등을 사용하는 복잡한 과정을 이해할 필요 없이, 프론트엔드 로직에만 집중해 얻은 json 형식의 데이터를 사용하면 됩니다.
아까 그 주소인 웨이보 API 입문 문서를 참고하세요. 물론 "입문"이라는 용어는 제가 만든 말입니다. 이 다섯 가지 사용법을 알면 이후 API는 이를 따라 하면 됩니다.
이 API 중 WB2.login(), WB2.checklogin(), WB2.logout은 매우 간단해서 누구나 이해할 수 있습니다. 이해가 안 된다면 앞서 말한 WB2.login() 메서드를 script 태그 안에 넣기만 하면 됩니다. 다만 로그인을 유도한 후 아무 작업도 하지 않을 뿐이죠.
로그인 후 무언가를 하고 싶다면(당연한 말이지만, 아무것도 안 할 거면 로그인을 시킬 이유가 없죠), 예를 들어 신랑 웨이보 로그인 사용자의 id를 얻거나 팔로워 수를 조회하는 등의 작업은 이 다섯 가지 입문 API 중 가장 중요한 API인
“웨이보 API와 데이터를 교환하고 Js 방식으로 내장 웨이보 컴포넌트를 호출하는 진입 함수”(공식 설명입니다)인 WB2.anyWhere(callback)를 통해 이루어집니다.
그리고 데이터와 상호작용하려면 W.parseCMD(uri, callback, args, opts)를 사용해야 합니다.
여기서 W 매개변수는 WB2.anyWhere(callback)에서 전달받은 것입니다. 웨이보 컴포넌트를 호출하려면 W.widget.hoverCard(…)나 W.widget.followButton(…); 등을 사용할 수 있습니다.
가장 중요한 단계, 즉 신랑과 데이터를 교환하는 단계는 다음과 같습니다:
일반적으로 W.parseCMD는 다음과 같은 형태로 사용됩니다:
1 | |
여기서 W.parseCMD()의 첫 번째 매개변수 /user/show.json을 /statuses/user_timeline.json 등 다른 인터페이스로 변경하면 해당 인터페이스의 정보를 읽을 수 있습니다. 어떤 인터페이스가 있고 각 인터페이스가 어떤 데이터를 반환하는지는 신랑에서 제공하는 웨이보 API 테스트 도구를 참고하세요.
주의: 이 API 테스트 도구의 로그인 페이지에는 문제가 있으므로, 해당 페이지에서 로그인하지 말고 웨이보 홈페이지에서 먼저 로그인한 후 API 테스트 도구 페이지를 새로고침하세요.
sreen_name은 필수 항목이 아니지만, screen_name이 속한 {}는 비어 있어도 반드시 유지해야 합니다.
아래의 method: get은 백엔드와 상호작용할 때의 매개변수입니다. 때로는 post 방식이 필요할 수도 있습니다. cache_time은 이름만 봐도 의미를 알 수 있겠죠? 더 설명하지 않겠습니다.
주의할 점은 대략 이 정도입니다.
블로거의 말:
저는 인생의 중요한 선택의 기로에 섰을 때, 누군가 최선의 방법을 알려주어 소중한 시간을 헛되이 보내지 않기를 바라곤 합니다. 그런 마음으로 저는 자주 블로그를 쓰며, 광활한 인터넷의 이 작은 구석에 제게는 단 한 번뿐인 인생 경험을 기록하여 도움이 필요한 분들에게 도움이 되기를 바랍니다.
