기본 콘텐츠로 건너뛰기

카카오톡 API 로그인 하기



안녕하세요 광흠입니다.

 오늘 소개할 내용은 우리나라 대표 메신저 카카오톡 API를 사용한

 로그인하는 방법을 소개 드릴까 합니다.

 https://developers.kakao.com 해당 링크가 카카오톡 API 를 참고할 수 있는 곳입니다.

1. 사이트를 접속하시면 빨간 테두리에 노란색 화살표를 누르시면

 초록색 테두리 (내 어플리케이션) 을 선택하실 수 있습니다.

 선택해서 일단 들어가봅시다.





2. (내 어플리케이션)을 선택하고 들어오시면 해당 페이지가 뜨는데

빨간색 테두리 (앱 만들기)를 클릭하고 새로운 카카오 키를 받아봅시다!






3. (앱 만들기)는 간단하게 이름만 작성해서 일단 만드시면 됩니다.






4. (Create)버튼을 클릭하시면 이렇게 각각 쓰이는곳 마다 키를 발급하는데요

저는 웹에서 사용하기 때문에 javascript 키를 사용합니다.

(실제로 발급하시면 저기 빨간 테두리 공간에 키가 존재합니다)

키를 복사하시고 밑에 html에 "발급받은 키" 공간에 넣어주시면되요





5. 여기서 플랫폼 추가를 누르셔서 어디서 사용할지를 작성을 해야해요

어디서 사용할지를 작성 하지 않으면 위에 했던 것들이 모두 헛것이 됩니다...;(







6.위에서 언급했듯이 저는 웹에서 쓰기때문에 사이트 도메인을 작성하였구요






7.로그인 버튼을 누르시면 팝업창으로 카카오톡 로그인창이 뜹니다.








8.카카오톡 로그인을 하시면 아래와 같이 여러 정보가 날라오는데 

일단 전 이름과 프로필사진(사실상 이 두개면 되지 않을까요..)

만 보이게 해놓았습니다^^










라벨:

댓글

  1. 익명2015년 3월 24일 오전 12:43

    html소스가 잘 안보이시는(저는 이상하게 보이네요 ㅠㅠ) https://gist.github.com/kwangheum/6f9c98d81dcff59f61eb#file-kakaotalk-html
    로 가셔서 보시면 됩니다!!

    답글삭제
  2. 슈빈2016년 5월 5일 오전 6:22

    와... 정말 감사해요 덕분에 금방 로그인 해결했네요 ^_^

    답글삭제
  3. myon11232016년 7월 15일 오전 5:36

    정말 정말 고마워요~

    답글삭제
  4. 익명2017년 6월 10일 오후 1:59

    나광흠님
    저같은 경우에는 한두달전에 테스트하다가
    사용자관리 -> 사용자 목록 및 프로퍼티 관리
    위 항목에 디비처럼 되어있잖아요?
    거기에 닉네임이 제이름이 들어가야하는데 test라고 들어가있습니다.ㅠㅠ
    이거 어떻게 수정해야하나요..
    db처럼 생긴건 수정이 안되던데..

    답글삭제
    답글
    1. kwangheum2019년 1월 9일 오후 10:27

      어디 말씀하시는지 모르겠어요.... 말씀하신 경우는 DB와 연동과 해당 api 연동은 개발자가 소스를 어떻게 짜느냐에 따라 달라서 원 소스를 보내주시면 확인해드릴께요 ㅎㅎ

      삭제
  5. Unknown2018년 2월 5일 오후 11:59

    로그아웃하고 다시 로그인버튼 누르면 이전 로그인정보가 뜹니다 ㅠㅠㅠ

    답글삭제
    답글
    1. kwangheum2019년 1월 9일 오후 10:39

      예제로 작성한 것은 Access Token과 Refresh 토큰을 삭제합니다.
      만약 카카오톡 사이트 들어가보셔서 로그인이 되어있을시 해당 로그인 정보를 갖고와 로그인을 시키는 것입니다.
      (카카오톡에서 이렇게 지원해요. 강제 카카오톡 사이트의 로그인을 로그아웃하는 방식은 없는거같아요....)

      삭제
  6. 익명2018년 8월 8일 오후 10:59

    아예 아무것도 안뜨는 건 왜 그런 걸가요...?ㅠㅜㅠㅜ

    답글삭제
    답글
    1. kwangheum2019년 1월 9일 오후 10:24

      해당 로그인은 웹 서비스를 뛰우고 진행하셔야해요. 아마 로컬 html 파일로 테스트 해보셨다면 카카오톡 서버에서 오류 메시지 보내줄겁니다 .

      삭제

댓글 쓰기

이 블로그의 인기 게시물

Ext JS 4.2 트리 기본 구조

Ext.require([ '*' ]); Ext.onReady( function (){      var   store = Ext.create( 'Ext.data.TreeStore' , {             id: 'store' ,             proxy: {             data : data             type: 'memory' ,             reader:{                 type: 'json '             }         },         root: {             text: "ROOT" ,             id: "ROOT" ,             expanded: tru e         }     });      var  tree = Ext.create( 'Ext.tree.Panel' , {         id: 'tree' ,         rootVisible: true ,         multiSelect: false ,         store: store,         height: 600,         renderTo: Ext.get( 'treeList' )     });  }); 필자가 생각하기에 Ext Js 트리 가장 기본 옵션인거 같다. 실 작동 URL[ http://jsfiddle.net/Kwangheum/vkbSS/ ] Ext JS 4.2 트리 1. Ext JS 4.2 트리 기본구조 2. Ext JS 4.2 트리 이름 변경하기 3. Ext Js 4.2 트리 그리드 에디팅 4. Ext JS 4.2 트리 드래그 & 드롭 5. Ext JS 4.
댓글 쓰기
자세한 내용 보기

맥에서 ssh 터널링 하는 방법

이번에 작업하면서 터널링 열어서 접속 해야하는 경우가 발생하였다.. (사실 기존에는 ssh 접속만 했지 깊이 파보진 않아서.. 이번에 처음으로 터널링을 해보았다.) 회사에서 알려준 방법은 windows에서 putty로 하는 방법을 알려줬는데 putty 와 비교하면서 설명을 해보겠다. 회사에서 준건 이렇게 이미지를 받았다. 맥에서는 터널링서버IP와 포트 그리고 터널링을 이용하여 실제 접속하고싶은 IP와 포트를 알면된다. 터미널에서 $ ssh 터널링 접속 아이디@터널링서버 IP -p 22 -N -L 10555:실제 접속하고싶은 IP:22 이렇게 작성을 하시면 실제 터널링을 열어주게 된 것이다.  사용된 옵션 :  -p [number]   : number 포트번호로 접속한다.  -N  : 원격 쉘을 실행시키지 않고 접속만 유지한다.  -L [로컬포트번호:호스트:호스트포트번호]  : 로컬 포트번호로 listen 소켓을 열고 들어오는 패킷을 원격지에서 호스트:호스트포트번호로 전송한다.  [출처 http://blog.lael.be/post/845] 그런다음 새로운 터미널에서 $ ssh (실제 접속하고싶은 IP)에서 사용될 ID@127.0.0.1 -p 10555 이렇게 하면 터널링에 접속이 된다!
댓글 쓰기
자세한 내용 보기

Ext JS 4.2 트리 그리드 에디팅

var tree = Ext.create( 'Ext.tree.Panel' , {      id: "gridTree" ,     autoHeight: true ,     renderTo: Ext.get( 'dataArea' ),     useArrows: false ,     rootVisible: false ,     store: store,     multiSelect: true ,     plugins: [          Ext.create( 'Ext.grid.plugin.CellEditing' , {             clicksToEdit: 1         })     ],     rowLines: true ,     columns: 컬럼(column) }); tree.on( 'validateedit' , function (editor, e) {      if (e.record.data[e.field]==e.value){         e.cancel = true ;     } }); tree.on( 'edit' , function (e){     console.log( "필드 값(field value)" +e.context.field);     console.log( "이전  값(before value)" +e.context.originalValue);     console.log( "현재  값(now value)" +e.context.value); }); 필자는 그리드에서 수정 된것을 'validateedit'라는 좋은 옵션이 있는데 'edit' 에서 하고있었다. Ext Js 에서는 수정을 한 후 적용 전에 벨리데이션을 하는 곳이 따로 존재하였다.
댓글 쓰기
자세한 내용 보기