Spring MVC 구글 로그인 구현

목록
1. Spring MVC 일반 로그인 구현
2. Spring MVC 구글 로그인 구현
3. Spring MVC 카카오 로그인 구현
4. Spring MVC 네이버 로그인 구현

 

이번에는 구글 소셜 로그인을 구현해보도록 하자.

 

밑에 사이트에 들어가서 구글 api 사용자 인증정보를 등록해주자

Google 클라우드 플랫폼

 

 

1. 사용자 인증 정보에 들어가서 사용자 인증 정보 만들기 클릭!

 

 

2. OAuth 클라이언트 ID 클릭!

 

 

3. 애플리케이션 유형을 웹 애플리케이션으로 설정해주자.

 

 

4. 위에 정보들을 밑에 예시처럼 입력해주자!

 

 

다 입력 후 만들기를 누르면 밑에 처럼 클라이언트 ID와 클라이언트 보안 비밀이 생성된다!

 

이제부터 Controller, Service, DTO, DAO 코드를 작성해주자! 나는 구버전 구글 로그인을 보고

하다가 안돼서 이번에 새로 나온 신버전을 활용하여 작성하였다!

 

 

Controller 코드 작성

	/* 구글아이디로 로그인 */	
	@ResponseBody
    	@PostMapping("/loginGoogle")
	public String loginGooglePOST(MemberDTO memberDTO, HttpSession session, RedirectAttributes rttr, MemberDTO mmemberDTO) throws Exception{
		MemberDTO returnDTO = memberService.loginMemberByGoogle(memberDTO);
		String mvo_ajaxid = mmemberDTO.getId(); 
		log.info("C: 구글아이디 포스트 db에서 가져온 vo "+ memberDTO);
		log.info("C: 구글아이디 포스트 ajax에서 가져온 id "+ mvo_ajaxid);
		if(returnDTO == null) { //아이디가 DB에 존재하지 않는 경우
			//구글 회원가입			
			memberService.joinMemberByGoogle(memberDTO);	
			//구글 로그인
			returnDTO = memberService.loginMemberByGoogle(memberDTO);
			session.setAttribute("id", returnDTO.getId());			
			rttr.addFlashAttribute("mmemberDTO", returnDTO);
			session.setAttribute("isLogIn", true);
			log.info("구글 로그인 성공[DB존재X]");
		}
		else if(mvo_ajaxid.equals(returnDTO.getId())){ //아이디가 DB에 존재하는 경우
			//구글 로그인
			memberService.loginMemberByGoogle(memberDTO);
			session.setAttribute("id", returnDTO.getId());			
			rttr.addFlashAttribute("mmemberDTO", returnDTO);
			session.setAttribute("isLogIn", true);
			log.info("구글 로그인 성공[DB존재O]");
		}	
		return "redirect:/mainpage/main";		
	}

 

DTO 코드 작성(이 전 시간 일반 로그인 DTO를 그대로 사용하면 된다.)

@Data
public class MemberDTO {	
	private String id;
	private String name;
	private String pwd;
	private String nick_nm;
	private String email;
	private Date join_Date;	
	private Date last_update;
	private String grade;
}

 

Service 코드 작성

	// 구글 로그인	
	public MemberDTO loginMemberByGoogle(MemberDTO memberDTO);
	
	// 구글 회원가입
	public void joinMemberByGoogle(MemberDTO memberDTO);

 

ServiceImpl 코드 작성

	// 구글 로그인
	@Override
	public MemberDTO loginMemberByGoogle(MemberDTO memberDTO) {
		MemberDTO returnVO = null;
		try {
			returnVO = memberDAO.readMemberWithIDPW(memberDTO.getId());
			log.info("S: 로그인 아이디 : "+memberDTO.getId()+" 이름 : "+memberDTO.getName());
		} catch (Exception e) {
			e.printStackTrace();
			returnVO = null; //실행하다 문제가 생겼을때 해당 데이터를 보내지않겠다는 의미 = 예외처리
		}
		return returnVO;
	}

	//구글 회원가입
	@Override
	public void joinMemberByGoogle(MemberDTO memberDTO) {
		memberDAO.joinMemberByGoogle(memberDTO);			
	}

 

DAO 코드 작성

	// 구글 로그인
	public MemberDTO readMemberWithIDPW(String id) {
		return sqlSession.selectOne("mapper.member.readMemberWithIDPW", id);
	}

	// 구글 회원가입
	public int joinMemberByGoogle(MemberDTO memberDTO){
		return sqlSession.insert("mapper.member.joinMemberByGoogle", memberDTO);
	}                 // 나는 mapper.xml에 namespace를 mapper.member로 설정하여서 앞에 붙여주고 뒤에는 mapper.xml에 작성한 SQL문에 맞는 id를 입력

 

각자 사용하는 mapper.xml 코드 작성

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  
<mapper namespace="mapper.member"> 	
	<resultMap type="memberDTO" id="memberResult">
		<result property="id" column="id" />
		<result property="name" column="name" />
		<result property="pwd" column="pwd" />
		<result property="nick_nm" column="nick_nm" />
		<result property="email" column="email" />
		<result property="join_Date" column="join_Date" />
		<result property="last_update" column="last_update" />
		<result property="grade" column="grade" />
	</resultMap>

	<!-- 구글 로그인할때 사용자 정보 찾는 SQL문 -->
	<select id="readMemberWithIDPW" resultType="memberDTO">
		<![CDATA[
			select * from P_MEMBER where id=#{id}
		]]>	
	</select>
	
	<!-- 구글 로그인 데이터를 DB에 저장 -->
	<insert id="joinMemberByGoogle" parameterType="java.util.Map">
		<![CDATA[
			insert into P_MEMBER (id, name, pwd, nick_nm, email, join_Date, grade)
			values (#{id}, #{name}, #{pwd}, #{nick_nm}, #{email}, #{join_Date}, #{grade})
		]]>	
	</insert>

 

pom.xml에 JSON 라이브러리 추가

		<dependency>  
			<groupId>com.google.code.gson</groupId>  
			<artifactId>gson</artifactId>  
			<version>2.8.7</version>
		</dependency>

 

그리고 제일 중요한 jsp 코드 작성

<!-- 구글 api를 사용할때 필요한 코드를 제일 상단 head 부분에 넣어주자.  -->
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 그리고 jsp 하단부분에 구글 로그인이 성공하기 위한 js, ajax 코드들을 작성하자. -->
<script type="text/javascript">
function handleCredentialResponse(response) { 
	const responsePayload = parseJwt(response.credential);
	console.log("ID: " + responsePayload.sub);
    console.log('Full Name: ' + responsePayload.name);
    console.log('Given Name: ' + responsePayload.given_name);
    console.log('Family Name: ' + responsePayload.family_name);
    console.log("Image URL: " + responsePayload.picture);
    console.log("Email: " + responsePayload.email);
    $(function() {
    	var date = new Date();
		$.ajax({
		    url : '/intrip/loginGoogle',   /* 각자 controller에 매핑한 주소로 보낼 url 작성 */ 																					
		    type : 'post',                   /* 나는 패키지명까지 적어줬다. */
		    data : {
				"id" : responsePayload.sub,
				"name" : responsePayload.name,
				"pwd" : responsePayload.sub,     /* 일단 패스워드를 id값으로 넣어줬음*/
		    		"nick_nm" : responsePayload.name,
				"email" : responsePayload.email,        
			    },
		    success : function (data) {
		            alert("구글아이디로 로그인 되었습니다");
		            location.href="/intrip/mainpage/main"; /* 로그인 후 이동할 페이지*/
		        }
		});
	})
}          

function parseJwt (token) {
    var base64Url = token.split('.')[1];
    var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
    return JSON.parse(jsonPayload);
};

window.onload = function () {
  google.accounts.id.initialize({
    client_id: "각자 제공받은 클라이언트 ID 입력",
    callback: handleCredentialResponse
  });
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { type: "icon", theme: "filled_blue", size: "large"}  // customization attributes
  );  
  google.accounts.id.prompt(); // also display the One Tap dialog
}

function attachSignin(element) {
	handleCredentialResponse.attachClickHandler(element, {},
        function(responsePayload) {
}, function(error) {
	console.log('call check2'); 
  alert(JSON.stringify(error, undefined, 2));
});
}
</script>

 

구글 버튼을 만들어 주기 위한 코드. 자기 코드에 맞게 넣어주자.

<div id="buttonDiv"></div>
<!-- 나는 이전에 만들었던 jsp에 구글이미지 위치에 넣어줬다. -->

 

위에 js코드에 있는 { type: "icon", theme: "filled_blue", size: "large"} 이 코드를 작성해서 로고를 이런 식으로 커스텀했다.

이제 커스텀한 이미지를 클릭하면 구글 로그인할 수 있는 창이 뜬다 !!