현재 프로젝트를 진행하는 곳에서 Google Login 을 넣어달라는 요청이 왔습니다~


물론..... 그렇게 어렵지는 않습니다만... 



보통 Facebook, Twitter, Google... 등등의 소셜 네트워크 API 를 사용하는 곳은 Javascript 를 많이 사용하고


아직까지는 대부분의 웹사이트들이 PHP로 이루어진 곳이 많기때문에


Facebook 에서 제공하는 javascript SDK 를 많이 이용하는걸로 판단됩니다~ 


왜 이렇게 생각 하냐면.... spring reference 가 많이 없습니다...



실력자 분들이 귀찮으셔서 안쓰셨을거라고 생각하는데 ㅎㅎㅎ


Spring 에서는 위와같이 소셜 API 를 사용하는걸 감안해서 만든 프로젝트가 있습니다.


http://projects.spring.io/spring-social/  <-- 여기에 들어가보면 어마어마한 사이트를 연동할 수 있는 API들이 많은데 


오늘은 그 중에 Google을 사용해보려고 합니다~


위 사이트의 좌측 하단에 보면 Google 이 있는데 이 부분을 들어가면 엉뚱하게도 Github 페이지로 이동하게됩니다.


https://github.com/GabiAxel/spring-social-google <-- 요기에 샘플소스들이 많은걸 알 수 있지요~ ㅎㅎ


자 이제  소스를 스스로 리딩 후 필요한 부분만 따로 떼어내 프로젝트에 심어야 합니다~ ㅎㅎ


말이쉽지 ㅋㅋㅋ 어느세월에 저 소스코드를 다 파악해서 내가 필요한 부분만 따로 정리해서 뽑아낼지...... 



다행히 Facebook 의 API 연동방법과 크게 다를바가 없습니다. 하나만 파악하면 나머지도 금방 이라는 말씀




1. 스프링에서 사용할 라이브러리를 넣자


	    <dependency>
		    <groupId>org.springframework.social</groupId>
		    <artifactId>spring-social-google</artifactId>
	            <version>1.0.0.RELEASE</version>
	    </dependency>



2. Google OAuth 를 파악하자.

https://console.developers.google.com/project <- 요기를 들어가면 구글에서 개발자를 위한 도구들이 많이있는데 


Google 에서 제공하는 API 를 사용하기 위해서는 프로젝트를 하나 생성해야한다~


API 인증 > 사용자 인증정보 > OAuth > 새 클라이언트 ID 만들기 를 눌러서 ID 를 생성해야 한다~


본인의 URL redirection 의 경우 http://localhost:8080/oauth2callback 이것과 같이 localhost 도 사용가능하다...


물론 hosts 에서 설정하는건 다 알고있으니까 생략~


구글역시 OAuth 2.0 을 채택하고있는데 OAuth 에 대한 설명을 하자면 너무 귀찮아서 구글도 참고문서보라고 링크만...


한번 보고오세요~


https://developers.google.com/accounts/docs/OAuth2?hl=ko <-- OAuth 에 대한 설명글



3. 스프링 설정 및 Code 얻어오는 소스작성


<bean id="googleConnectionFactory" class="org.springframework.social.google.connect.GoogleConnectionFactory"> <constructor-arg value="*****************" /> <constructor-arg value="*****************" /> </bean> <bean id="googleOAuth2Parameters" class="org.springframework.social.oauth2.OAuth2Parameters"> <property name="scope" value="https://www.googleapis.com/auth/plus.login"/> <!-- <property name="scope" value="https://www.googleapis.com/auth/plus.me"/> --> <property name="redirectUri" value="http://localhost:8080/oauth2callback"/> </bean>


먼저 따로 설정잡기 귀찮아서 Spring XML 설정부분에다가 넣어줬다 요새는 @Configure 써서 Java 코드내에서 설정하는것도 

있는데 현재 프로젝트가 XML로 설정되어있는 부분이라 같이 일하시는 분들 혼란스럽지 않게 XML로 작성했습니다.


googleConnectionFactory 이 부분에서는 생성자에 2개의 값을 넣어줘야되는데 

순서에 맞게 넣어주니까 이름이나 Index를 지정하지 않았습니다.


ID 와 비밀번호를 넣는 부분이니까 아까 2번에서 생성한 클라이언트 아이디와 클라이언트 보안비밀을 넣어주면 끝납니다~


실제 스프링 소스를 보자면..


	@Autowired
	private GoogleConnectionFactory googleConnectionFactory;
	
	@Autowired
	private OAuth2Parameters googleOAuth2Parameters;


위와 같이 주입을 해준다 ... 혹시라도 Facebook 이나 다른 객체에서도 사용할 경우 사용하는 이름이 같으면 스프링은 주입이 힘들기때문에 @Resource 를 쓰던가 아니면 @Qualifier 를 꼭 써줘서 내가 어떤객체를 주입하는지 알려줘야됩니다... 이런 실수는 안하시죠??


가장먼저 Code 발행


OAuth2Operations oauthOperations = googleConnectionFactory.getOAuthOperations(); String url = oauthOperations.buildAuthorizeUrl(GrantType.AUTHORIZATION_CODE, googleOAuth2Parameters);


저렇게 호출하면 url 값을 넘겨주는데 저 url 이 바로 google 인증하는 페이지 url 입니다.. 

Controller 에서 저 url 을 redirect 시키면 구글 페이지가 열리고 해당 사용자에게 로그인하라고 하면서 

접속한 웹 페이지에서 사용자의 어떠한 정보를 접근할지 알려주고 동의를 하게 만듭니다. 


동의를 클릭하게되면 callback url 로 code 값을 넘기는데 그 code 값으로 사용자의 정보값을 얻을 수 있습니다.



4. 사용자의 정보를 얻어오는 부분


OAuth2Operations oauthOperations = googleConnectionFactory.getOAuthOperations(); AccessGrant accessGrant = oauthOperations.exchangeForAccess(code, googleOAuth2Parameters.getRedirectUri(), null); String accessToken = accessGrant.getAccessToken(); Long expireTime = accessGrant.getExpireTime(); if (expireTime != null && expireTime < System.currentTimeMillis()) { accessToken = accessGrant.getRefreshToken(); logger.info("accessToken is expired. refresh token = {}" , accessToken); } Connection<Google>connection = googleConnectionFactory.createConnection(accessGrant); Google google = connection == null ? new GoogleTemplate(accessToken) : connection.getApi(); PlusOperations plusOperations = google.plusOperations(); Person person = plusOperations.getGoogleProfile();


위 부분대로 code 를 사용해서 호출하면 access_token 을 얻어오며, access_token 을 사용하여 사용자의 정보를 얻어옵니다.


모든 OAuth 는 동일한 방식으로 되어있어서 scope 라는게 존재하는데 구글 역시 scope의 종류가 있으며 여기서는 

사용자의 정보를 얻어오기 때문에 PlusOperations 를 사용했습니다.


최종적으로 Person 객체에 사용자의 정보가 담기게 되며, 그 후 작업은 뭐 알아서... 


아까 보여드린 github 사이트에는 워낙 소스도 많고 그래서 모든코드를 다 봐야할지 모르겠지만 ...


사실 스프링은 OAuth 를 대비해서 객체들을 만들어놨고 그것만 사용해도 별 문제없이 동작하게 설계되어있습니다.


굳이 복잡한 설계가 아니라면 ConnectionRegistry 라던지 그런건 사용하지 않아도 그만인 듯... 


또한 http://gabiaxel.github.io/spring-social-google-reference/ 이 문서는 반드시 읽어보세요~



### 아차차!!!! ㅎㅎㅎ

매우 중요한 사실을 하나 안썼는데 아마 저렇게 호출하면 400 에러나 403 에러가 발생하게 됩니다~


그 이유는... 아래 링크에서 보시고 해결해 보세요~ 


해외 개발자들도 우리와 같은 문제를 만나며, 그걸 해결하기 위해 소통한다는걸 몸소 느끼세요~


한가지 더... ㅎㅎ Google 의 경우 에러가 발생하게되면 code 값 대신에 error 라는 값을 던집니다..(Oauth 특징)

exception 처리는 개발자들의 필수요소인거 아시죵?? 


https://github.com/GabiAxel/spring-social-google/issues/22




  1. 어려워요 2015.12.17 18:03 신고

    실력자들이 귀찮아서 안쓴글이 이글인것 같아요.
    보고 가지만. 성공은 못하고 갑니다.

    • OKIHOUSE 2016.01.13 17:32 신고

      http://brantiffy.axisj.com/archives/29

      참조해서 해보세요~

      혹시라도 제 방식대로 하시는데 문제가 있을경우 알려주시면 답변드릴게요~

  2. 나는공부중.. 2016.01.08 15:09 신고

    열심히 보고는 있는데 너무 어렵네요... ㅜㅜ

  3. 궁금해요 2016.03.24 15:39 신고

    마지막 오류 어떻게 수정하는건가요 ...? 해당 url에 들어가서 적용해보아도 안되고있습니다...

    • OKIHOUSE 2016.03.28 10:33 신고

      구글 개발자 콘솔이라는 곳에가서 보시면
      구글 API 사용 이라는 파란색 창이 하나 있습니다~ 어렵지 않게 찾을 수 있으실거에요~

      그걸 눌러서 들어가시게 되면 소셜 API 라는 부분에 Google+ API 라는게 있습니다.

      다시 그걸 눌러서 들어가셔서 사용설정 하시면 됩니다~

      아래 링크는 똑같은 것은 아니지만 접근하는 방법이 설명된 사진들이 있으니 참조만 하세요

      http://support.wpsocial.com/support/solutions/articles/144223-creating-a-google-project-with-the-google-api-console

  4. 사용설정 2016.03.29 00:59 신고

    이런게 눈에 안들어옴.... ㅠㅠ
    사용설정 클릭 끝!!!!

  5. noob 2018.03.07 17:26 신고

    하루종일 찾다가 이 글 보고 해결했어요 ㅠㅠ
    감사합니다!

  6. 익명 2018.03.09 16:16 신고

    안녕하세요. 감사하게도 올려주신 포스팅으로 연동을 구현하고 있습니다.
    다름이 아니라 예를 들어서 코드를 발행해서 url를 발생시키는 부분이나 acess_token을 얻어오는 방법등의 저런 정보는 어디 참고할만한 레퍼런스가 있으신건가요? 저도 저런 함수들 보면서 이해하고 싶은데 올려주신 부분은 spring에서 제공하는 깃헙밖에 없어서요..ㅠㅠ 그 깃헙의 소스들을 보시고 만드신 부분인건가요? 너무 어려운 질문이였다면 죄송합니다. 그냥 저렇게 토큰을 얻어오는 과정에 대한 클래스들을 어디서 참고하셔는지가 궁금해서요ㅠㅠ 저도 알고싶기도 하고.. 확인하시면 댓 꼭 부탁드리겠습니다! 감사합니다..

    • OKIHOUSE 2018.03.09 17:09 신고

      다음주 안에 제가 구글, 카카오톡, 페이스북, 네이버 등등 동작하는 sample 프로젝트를 올려드릴게요~

+ Recent posts