기본 콘텐츠로 건너뛰기

구글 로그인 연동


구글 로그인 연동이 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. 제가 혼자 일을 하다보니..
    구글 로그인 api 사용이 쉽지가 않네요..
    좀 더 자세한 살명을 부탁드려도 될까요?

    답글삭제
    답글
    1. 연락해주셔서 답변 드렸습니다 ^^

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

    답글삭제
    답글
    1. 연락해주셔서 답변 드렸습니다 ^^

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

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

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

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

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

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

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

      삭제

댓글 쓰기

이 블로그의 인기 게시물

Intellij에서 Eclipse 프로젝트 import시 설정해줘야 할 것들

요즘 여유가 좀 생겨서 지금까지 Eclipse만 쓰다가 사람들이 하도 Intellij가 좋다하길래 얼마나 좋길래 하고 써보려고 하다가 프로젝트를 import 시키던중 좀 적어두면 좋을거같아서 적어보려고한다 !! 다음에 잊지 않기 위해... 1. Settings > Build, Execution, Deployment > Compiler > Java Compiler 버전 맞추기 2. 상단에 설정 추가 하는부분을 눌러 톰켓을 생성해준다. 꼭 넣어줘야할 부분은 VM options에  -Dfile.encoding=utf-8  한글 깨짐 방지다. (그리고 intellij 설치 된 곳에 bin폴더 안에 vmoptions 확장자를 갖은 녀석의 맨 마지막 줄에도 넣어준다!) 3. project structure > Project Settings > Project 그리고 java버전에 맞춰서 project language level도 맞춰줘야합니다! 4. project structure > Project Settings > Modules - Sources 여기도 project language level도 맞춰줘야합니다! 5. project structure > Project Settings > Modules - Dependencies 들어가서 + 단추를 누르고 Library..를 누르고 Tomcat 추가! 이러면 이클립스에서 갖고온 프로젝트가 잘 동작합니다!! 아 그리고 .settings, .classpath, .project 는 필요 없어지므로 삭제해도 무방합니다 ps. 사실... 이클립스 쓰면서 불편한건 하나도 없었어요... 그리고 아직은 단축키라던지 익숙하지 않아서 이클립스가 더 편하네요... 사실 이클립스 단축키를 인텔리제이와 동일하게 할 수 있지만.... 인텔리제이의 기본 설정만 써...

Ext JS 4.2 트리 노드 추가 및 스크롤 이동

Ext.require([ '*' ]); Ext.onReady( function (){      var addButton = Ext.create( 'Ext.Button' , {         text: '노드 추가(Add Node)' ,         scale: 'large' ,         listeners: {         el: {             click: function () {          var thisNode =  Ext.getCmp( 'xAxisTreeUse' ).getRootNode().appendChild({                      "text":"노드 이름 (Node name) "         });                 Ext.getCmp( " tree " ).selectPath(thisNode.getPath());             }         }     });      var   store = Ext.create( 'Ext.data.TreeStore' , {             id:  'store' ,     ...