#3-1 / 회원 로그인 (외부 로그인 API 연동)

with bootstrap , kakao

bootstrap

4.6.2 css,js압축풀고 webapp에 복붙 끝 https://getbootstrap.com/docs/4.6/getting-started/download/

kakao

- 버튼 이미지 다운

https://developers.kakao.com/docs/latest/ko/kakaologin/design-guide

여기서 디자인 리소스 다운 후 프로젝트에 복붙 -> jsp에 이미지 넣음

- 내 어플리케이션 추가

내어플리케이션에서

- 왼쪽 nav 의 허용 IP 주소 - cmd ipconfig로 ip / naver에서 검색한 내 ip / 127.0.0.1 복붙

- 왼쪽 nav 의 플랫폼 - web 플랫폼 등록 -

http://localhost:8081
http://172.30.1.83:8081 (지금 springboot 8081로 되어있음)

- 왼쪽 nav 앱키 - Javascript 키 복사해두기

- nav 카카오로그인

활성화 설정 OPEN
OpenID Connect 활성화 설정 OPEN
Redirect URI : http://localhost:8081/web_loginok.do (로그인 성공시 값 넘겨주는 url 작성)

=> contoller 확인 및 dao, service 등 세팅

@Controller
public class web_controller {
	//springboot-다중 mapping 가능 - spring 3점대는 배열 형태로 작성!
	//@RequestMapping(value={"/web_loginok.do","/web_loginok2.do"})
	//@RequestMapping("/web_loginok.do","/web_loginok2.do") 2점대
	
	//mapping 주소에 변수를 넣고싶은경우 : @RequestMapping("/web_loginok/{part}.do")  
	
	//각 플랫폼 별 post,get 다르므로 requestmapping으로 작성
	@RequestMapping("/web_loginok.do")
	public String web_loginok() {
		
		System.out.println("test");
		return null;
	}
}

⭐ ⭐ ⭐ 패키지 추가시 .do파일이 실행이 안된다..!

기존 BootwebApplication.java 파일에 요렇게 수정해주면 됨

//scanBasePackages : 추가 패키지에 Controller 사용시 필요

@EnableAspectJAutoProxy
@SpringBootApplication(scanBasePackages = {"kr.co.sen","kr.co.web"}) //요렇게
public class BootwebApplication {

	public static void main(String[] args) {
		SpringApplication.run(BootwebApplication.class, args);
	}

}

** application.properties 파일에

#mybatis (mybatis 사용시에만 패키지 추가)
mybatis.type-aliases-package=kr.co.sen  //여기아직 추가 X
mybatis.mapper-locations=classpath:/mapper/*.xml

nav 카카오로그인

동의항목 설정

푸시알림 활성화

=> 나중에 개발 가이드 함 읽어보세용

얘가 실제 로그인시 db의 비밀번호가 됨 (암호화 및 복호화로 비교해야함)

👀 타이틀

=> 서버 올라가면 상대경로 깨질 수 있음 주의

- web_login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 로그인 (외부 로그인 API 연동)</title>
<link href="./css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link href="./css/signin.css" rel="stylesheet" crossorigin="anonymous">
<meta name="theme-color" content="#563d7c">

<style>
  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }
</style>
</head>

<script src="https://t1.kakaocdn.net/kakao_js_sdk/v1/kakao.js"></script>
<body>
	<form class="form-signin" method="post" action="./web_loginok.do" id="frm" onsubmit="return loginok()">
		<input type="hidden" name="external" value="0"> <!-- 0일땐 실제 로그인 -->
		<input type="hidden" name="id" value="">
		<input type="hidden" name="email" value="">
		<h1 class="h3 mb-3 font-weight-normal">LOG IN</h1>
		<label for="inputEmail" class="sr-only">ID</label>
		<input type="text" id="inputEmail" class="form-control" placeholder="ID" required autofocus name="uid">
		<label for="inputPassword" class="sr-only">Password</label>
		<input type="password" id="inputPassword" class="form-control" placeholder="Password" required name="upass">
		<div class="checkbox mb-3">
		  <label>
		    <input type="checkbox" value="remember-me"> 아이디 저장
		  </label>
		</div>
		<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button><br>
		<img src="./image/kakao_login.png" title="카카오로그인" style="cursor : pointer;" onclick="kakao_login()">
		<p class="mt-5 mb-3 text-muted">Copyright &copy;hingu All Right Reserve 2024</p>
	</form>

</body>

<script>
	function loginok(){
		frm.submit();
	}
	
	//카카오 API 로그인 파트 - kakao developer의 사용자 정보 가져오기(그대로 가져오진 않음)
	Kakao.init('bd7a6a1d5cb211332bba686d9d131c1f'); // 사용하려는 앱의 JavaScript 키 입력
	function kakao_login(){
		Kakao.Auth.login({
			success:function(response){
				Kakao.API.request({
					url : '/v2/user/me',
					success:function(response){
						//console.log(response); //실제 카카오 로그인하면 login.jsp 콘솔에 뜸
						let id = response["id"];
						let email = response["kakao_account"]["email"];
						
						//naver...뭐 등등.. 그때그때 input hidden에 넣어서 전송
						frm.external.value="kakao";
						frm.id.value=id;
						frm.email.value=email;
						frm.submit();
					},
					fail : function(error){
						console.log("카카오 API 접속 오류")
					}
				});
			},
			fail : function(error){
				console.log("카카오 key 접속 오류")
			}
		});
	}
</script>

</html>

- userdb_dao.java

package kr.co.web;

import org.springframework.stereotype.Repository;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
@Repository("userDB_dao")
public class userDB_dao {
	int uidx;
	String uname,uemail,upass,ujoin;
}

- Controller

@Controller
public class web_controller {
	//springboot-다중 mapping 가능 - spring 3점대는 배열 형태로 작성!
	//@RequestMapping(value={"/web_loginok.do","/web_loginok2.do"})
	//@RequestMapping("/web_loginok.do","/web_loginok2.do") 2점대
	
	//mapping 주소에 변수를 넣고싶은경우 : @RequestMapping("/web_loginok/{part}.do")  
	
	//각 플랫폼 별 post,get 다르므로 requestmapping으로 작성
	
	PrintWriter pw = null;
	
	@Resource(name="userDB_dao")
	userDB_dao dao;
	
	@Autowired
	web_service ws;
	
	@RequestMapping("/web_loginok.do")
	public String web_loginok(
			@RequestParam(defaultValue = "0",required = true) String external,
			String uid,String upass, HttpServletRequest req, HttpServletResponse res
			) { //로그인 및 API 로그인
		
		if(external.equals("0")) { //일반 로그인
			List<userDB_dao> info = ws.userLogin(uid);
			System.out.println(info.get(0).getUname());			
		}else if(external.equals("kakao")) { //kakao 로그인
			String id = req.getParameter("id");
			String email = req.getParameter("email");
			
			int result = ws.external_login(id, email);
			if(result>0) {
				try {
					this.pw = res.getWriter();
					this.pw.print("<script>"
							+ "alert('가입을 완료 시켜주셔야 합니다.');"
							+ "location.href='web_join.jsp';"
							+ "</script>");
				}catch(Exception e) {
					e.printStackTrace();
				}finally {
					this.pw.close();
				}
			}else {
				System.out.println("회원가입실패");
			}
		}
		
		return null;
	}
}

- web_mapper.xml

<mapper namespace="kr.co.sen.web.web_Mapper">
	<select id="userLogin" parameterType="String" resultType="kr.co.sen.web.userDB_dao">
		select * from user where uid=#{uid}
	</select>
	
	<insert id="external_login" parameterType="String">
		insert into external values (#{id},#{email})
	</insert>
</mapper>

- web_Mapper.java - interface

//알수없는 이유로 kr.co.sen으로 이동함 ^^;
@Mapper
public interface web_Mapper {
	List<userDB_dao> userLogin(String uid);
	int external_login(String id, String email);
}

- web_service.java - interface

public interface web_service {
	List<userDB_dao> userLogin(String uid);
	int external_login(String id, String email);
}

- web_serviceImpl - class

@Service
public class web_serviceImpl implements web_service{
	@Autowired
	private kr.co.sen.web.web_Mapper wmp;
	
	@Override
	public List<userDB_dao> userLogin(String uid) {
		List<userDB_dao> info = wmp.userLogin(uid);
		
		return info;
	}
	
	@Override
	public int external_login(String id, String email) {
		int result = wmp.external_login(id, email);
		
		return result;
	}
	
}

- kakao db table 생성

create table external(
id varchar(100) not null,
email varchar(100) not null,
primary key(id) //중복가입 불가
);

=> 카카오 로그인하면 external table에 insert됨!

'CLASS > SPRINGBOOT' 카테고리의 다른 글

#4-2 / Bootstrap - 회원가입 (0)	2024.08.19
#4-1 / Spring boot - 파일 업로드 (0)	2024.08.19
#2-3 / AOP+springboot+로그기록(aop에서 dao 값 가져오기) (0)	2024.08.13
#2-2 / AOP-springboot (0)	2024.08.13
#2-1 / AOP-java (0)	2024.08.13

hing ㅠ

#3-1 / 회원 로그인 (외부 로그인 API 연동)

👀 타이틀

'CLASS > SPRINGBOOT' 카테고리의 다른 글

티스토리툴바

#3-1 / 회원 로그인 (외부 로그인 API 연동)

👀 타이틀

'CLASS > SPRINGBOOT' 카테고리의 다른 글

관련글

티스토리툴바