기본 콘텐츠로 건너뛰기

구글 로그인 연동


구글 로그인 연동이 2019년에 새롭게 재작성되었습니다 [최신 글 보기]



안녕하세요 광흠입니다.

이번에 포스팅 할 내용은 제목보시면 아시겠지만 google oauth2를 이용한 로그인 연동을

해볼텐데요.

우선 준비하실 부분이 몇가지 있습니다.

화면 보시고 따라오시면 금방 하실 수 있을겁니다 ^^

1. 구글 콘솔에서 프로젝트 생성 https://console.developers.google.com

처음 시작하시는 분들은 저처럼 아무것도 존재하지 않을거에요

그럼 프로젝트 만들기 버튼을 클릭해서 새로운 프로젝트를 생성해봅시다.




이번에 로그인 테스트이니 이름을 google-login-test로 해보겠습니다.

주의하셔야 할 점은 '프로젝트 이름'과 '프로젝트 ID'는 동일하면 생성이 되질 않습니다.


생성을 하시면 이 화면으로 오게 됩니다.

여기서 메뉴쪽 보시면

 API 및 인증 하위 메뉴에 사용자 인증 정보 메뉴를 클릭 해줍니다.



이 화면으로 오시면 새 클라이언트 ID 만들기 버튼을 클릭해주시면


생성해주시면 이렇게 '웹 애플리케이션용 클라이언트 ID' 라는 테이블이 하나 생성이 되는데요.



여기서 생성된 '클라이언트 ID' 를 잘 메모장에 적어둡시다.

여기까지하면 google api를 사용할 수 있게 준비가 되어있는데요.

그 후 https://developers.google.com/+/web/signin/ 여기 google 쪽 읽어보시고 거기에있는

예제 코드로 바로 사용하셔도 무방할 정도로 잘 정리되어있습니다.

여기서 주의할 점은 예제코드에 clientid 그대로 사용하시면 401 에러 나면서 로그인 못하실 꺼에요

꼭 위에 생성한 '클라이언트 ID'를 사용하시면 되겠습니다

이상 구글 로그인 연동 포시팅을 마치도록 하겠습니다 ^^

혹시 질문 있으시면 댓글로 달아주세요~
라벨:

댓글

  1. 혼자일함2015년 5월 26일 오전 12:16

    제가 혼자 일을 하다보니..
    구글 로그인 api 사용이 쉽지가 않네요..
    좀 더 자세한 살명을 부탁드려도 될까요?

    답글삭제
    답글
    1. 익명2015년 6월 7일 오후 9:33

      연락해주셔서 답변 드렸습니다 ^^

      삭제
  2. 홀로코딩2015년 5월 26일 오전 12:30

    구글 로그인 api 를 처음 연동해보는데..
    감 잡기가 쉽지 않아서 문의를 드리려고 합니다..
    pc 와 모바일로 나누어서 문의 드릴게요...;;

    답글삭제
    답글
    1. 익명2015년 6월 7일 오후 9:33

      연락해주셔서 답변 드렸습니다 ^^

      삭제
  3. Unknown2016년 1월 4일 오후 8:02

    클라이언트ID 생성 관련 질문입니다.

    승인된 자바스크립트 원본 에 기재되는 코드가 어떤 용도이며 어떻게 사용되는건가요?

    답글삭제
    답글
    1. 익명2016년 1월 5일 오후 4:01

      '승인된 자바스크립트 원본' 이라는게 어디에 있는지 알 수 있을까요;;?

      삭제
    2. Unknown2016년 1월 5일 오후 5:30

      구글 dev 페이지에서 클라이언트ID 만들때요

      삭제
  4. 익명2016년 3월 21일 오전 11:53

    클라이언트 id 제가 발급받은 것으로 기입하면 다른사람 컴퓨터에선 제 계정만 읽히던데 저부분에 다른사람도 로그인 할 수 있게 하려면 어떻게 해야하나요?ㅠㅠ

    답글삭제
    답글
    1. Unknown2017년 1월 4일 오후 11:49

      저도 이것때문에 고민입니다... 답변해주실분 없나요

      삭제
    2. kwangheum2019년 1월 10일 오후 3:58

      새글이 작성되었습니다 ^^
      참고해주세요

      삭제

댓글 쓰기

이 블로그의 인기 게시물

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 에서는 수정을 한 후 적용 전에 벨리데이션을 하는 곳이 따로 존재하였다.
댓글 쓰기
자세한 내용 보기