UIUX _국비과정 0712 [모델2방식으로 페이스북 로그인 프로세스 구현]

백만두 2024. 7. 29. 17:32

2024. 7. 29. 17:32

페이스북 로그인 기능 구현 마무리

어제 잘 안됐던 시퀸스가 없다고 DB에 값이 들어가지 않았던 회원가입 문제를 해결했다!

값이 잘 들어간다.

원인 : 계정이 달라졌는데 driver 설정을 바꾸지 않아서 다른 계정에서 자꾸 시퀸스를 찾으니 오류가 나왔던 거다.

해결 : memberProcess에 새로운 계정을 연결해 드라이버 정보를 바꿔준다.

   // 드라이버 정보를 바꿔줘야 한다!!
   String dirver = (String)application.getInitParameter("OracleDriver");
   String url = (String)application.getInitParameter("OracleURL");
   
   OauthMemberDAO dao = new OauthMemberDAO(dirver, url, "oauth", "1234");

바뀐 코드 전문

memberProcess.jsp

<%@page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="oauth.member.OauthMemberDTO"%>
<%@page import="oauth.member.OauthMemberDAO"%>
<%@page import="utils.JSFunction"%>


<%
   OauthMemberDTO dto = new OauthMemberDTO();
   
	String mid = request.getParameter("mid");
	String pass = request.getParameter("pass");
	String email = request.getParameter("email");
	String domain = request.getParameter("domain");
	String name = request.getParameter("name");
   
   System.out.print(mid);
   System.out.print(pass);
   System.out.print(email);
   System.out.print(domain);
   System.out.print(name);
   
   dto.setMid(mid);
   dto.setPass(pass);
   dto.setEmail(email);
   dto.setName(name);
   dto.setDomain(domain);
   
   // 드라이버 정보를 바꿔줘야 한다!!
   String dirver = (String)application.getInitParameter("OracleDriver");
   String url = (String)application.getInitParameter("OracleURL");
   
   OauthMemberDAO dao = new OauthMemberDAO(dirver, url, "oauth", "1234");
   
   int result = dao.insertmember(dto);
   
   if(result > 0){
      response.sendRedirect("facebookOauth2.html");
   }else{
      JSFunction.alertBack("회원가입에 실패하였습니다.", out);
   }
   
%>

OauthMemberDAO.java

package oauth.member;
import common.JDBConnect;

public class OauthMemberDAO extends JDBConnect{   
		
   public OauthMemberDAO(String driver, String url, String id, String pwd) {
		super(driver, url, id, pwd);
	}

   public int insertmember(OauthMemberDTO dto) {
      
      int result = 0;
         
      try {
    	  
         String query = " insert into Member "
                  + " values (seq_member_mno.nextval,?,?,?,?,?,sysdate) ";
            
         psmt = con.prepareStatement(query);
         psmt.setString(1, dto.getMid());
         psmt.setString(2, dto.getName());
         psmt.setString(3, dto.getPass());
         psmt.setString(4, dto.getEmail());
         psmt.setString(5, dto.getDomain());
            
         result = psmt.executeUpdate();
            
      }catch (Exception e) {
         e.printStackTrace();
      }
         
      return result;   
   }
}

OauthMemberDTO.java (수정 없음)

package oauth.member;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class OauthMemberDTO {
	private String mno;
	private String mid;
	private String name;
	private String pass;
	private String email;
	private String domain;
	private String regidate;
}

member.jsp (수정 없음)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
   String name = request.getParameter("name");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
   #wrap {
      width:800px;
      margin : 20px auto;
   }
   
   input[type=text],input[type=password] {
      width:95%;
   }
</style>
</head>
<body>
   <div id="wrap">
      <h1>회원가입페이지</h1>
      <form method="post" action="memberProcess.jsp">
         <table border="1" width="100%">
            <colgroup>
               <col width="30%" />
               <col width="*" />
            </colgroup>
            <tr>
               <td>아이디</td>
               <td>
                  <input type="text" name="mid" />
               </td>
            <tr>
            <tr>
               <td>비밀번호</td>
               <td>
                  <input type="password" name="pass" />
               </td>
            <tr>
            <tr>
               <td>이름</td>
               <td>
                  <input type="text" name="name" value="${param.name }" />
               </td>
            <tr>
            
            <tr>
               <td>이메일</td>
               <td>
                  <input type="text" name="email" value="${param.email }" />
               </td>
            <tr>
            <tr>
               <td>도메인</td>
               <td>
                  <input type="text" name="domain" value="${param.domain }"/>
               </td>
            <tr>
         </table>
         <input type="submit" value="회원가입" />
         <input type="reset" value="취소">
      </form>
   </div>
</body>
</html>

facebookOauth2.html (수정 없음)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>

    function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
	    console.log('statusChangeCallback');
	    console.log(response);                   // The current login status of the person.
	    
	    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
	      let domain = response.authResponse.graphDomain; // 도메인 정보 화면에 표시
	      document.querySelector('#authBtn').value = 'Logout';
	    
	    // 로그인이 성공했을 때 토큰
	    // '/me'를 쓰는 이유는 접속한 사람(나)의 정보를 가지고 오기 때문
	    // fields에서 받아올 수 있는 값을 확인하고 받아오고 싶은 값을 가지고 온다.
	      FB.api('/me',{fields:'email,name'}, function(response) {
	    	  // 로그인 성공했을 때 화면에 보여줄 메세지
	    	  // response 응답
	          document.querySelector('#name').innerHTML = response.name + "님 로그인 성공(" + response.email + ")" + domain;
	    	  window.location.href = 'member.jsp?name=' + response.name + "&email=" + response.email + "&domain=" + domain;
	        });
	    
	    } else {                                 // Not logged into your webpage or we are unable to tell.
	      
	      document.querySelector('#authBtn').value = 'Login';
	    // 로그아웃 후에는 이름, 이메일 정보가 안보이게 처리
	      document.querySelector('#name').innerHTML = "";
	        
	    }
    }
  
	window.fbAsyncInit = function() {
	    FB.init({
	      appId      : '____',        // 페이스북에서 발급받은 내 앱ID을 넣어야 한다.
	      cookie     : true,                     // Enable cookies to allow the server to access the session.
	      xfbml      : true,                     // Parse social plugins on this webpage.
	      version    : 'v18.0'                   // Use this Graph API version for this call.
	    });
	    
	    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
	        statusChangeCallback(response);        // Returns the login status.
      });
    };
</script>

   <!-- 로그인과 로그아웃을 하는 버튼 -->
   <input type="button" id="authBtn" value="페이스북 로그인" onclick="
         if(this.value === 'Login'){
            //로그아웃 상태
            FB.login(function(response){
                 // handle the response 
                 console.log('logout => response');
                 statusChangeCallback(response);
            });
         }else{
            //로그인 상태
            FB.logout(function(response) {
                  // Person is now logged out
                  console.log('login => response');
                  statusChangeCallback(response);
            });
         }
      ">
      
	<span id="name"></span>

<!-- sdk 로드  -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>
</html>

간편로그인 후 페이지 경로 설정

간편로그인 후에는 이미 회원인지, 아닌지 확인이 필요

이미 회원이라면 로그인 완료가 된 것. 회원이 아니라면 회원 가입 절차를 밟기 위해 인증 화면으로 이동해야 한다.

이런 것들은 프로그램을 짜기 전 항상 고민해야 한다.

facebookOauth2 에서 name, email, domain 정보를 가지고 와 기존 회원 유무를 판단,

기존 회원 유무를 판단한 후에는 기존 회원이라면 로그인 화면,

기존 회원이 아니라면 회원 가입 화면으로 이동

기존회원 유무를 판단하기 위해 controller를 만들어야한다.

내가 만든 코드)

LoginPageController.java

package oauth.member;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import oauth.member.OauthMemberDAO;
import utils.JSFunction;

@WebServlet("/OauthLogin.do")
public class LoginPageController extends HttpServlet {
    
   @Override
   protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // doGet 사용 안함, POST로만 받도록 설정
        resp.sendRedirect("index.jsp");
   }

   @Override
   protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
      // 로그인과 회원가입 요청을 구분하여 처리해야한다.
      String action = req.getParameter("action");
      String email = req.getParameter("email");
      String domain = req.getParameter("domain");
      String name = req.getParameter("name");
      
      OauthMemberDAO dao = new OauthMemberDAO("driver", "url", "oauth", "1234");
   
      
      if ("로그인".equals(action)) {
         boolean confirmed = dao.confirmEmail(email, domain);
         if (confirmed) {
            JSFunction.alertLocation(resp, "기본회원 로그인 연동 페이지로 이동합니다.", "../Oauth/LoginMember.jsp");
         }else {
            JSFunction.alertBack(resp, "회원정보가 없습니다.");
         }
         
      } else if ("회원가입".equals(action)) {
         req.setAttribute("name", name);
            req.setAttribute("email", email);
            req.setAttribute("domain", domain);
            req.getRequestDispatcher("../Oauth/member.jsp").forward(req, resp);
         
      }
   }
      
}

강사님은 doGet()으로 받았는데 나는 doPost()로 받아서 방식이 조금 다르다. 어쩌면 그것 때문일지도,, ;; 코드가 잘 돌아가지 않는다. 너무 종합적인 문제가 있어서 차분히 다시 해봐야 할 듯.

OauthMemberDAO.java

package oauth.member;
import common.JDBConnect;

public class OauthMemberDAO extends JDBConnect{   
      
   public OauthMemberDAO(String driver, String url, String id, String pwd) {
      super(driver, url, id, pwd);
   }

   public int insertmember(OauthMemberDTO dto) {
      
      int result = 0;
         
      try {
         
         String query = " insert into Member "
                  + " values (seq_member_mno.nextval,?,?,?,?,?,sysdate) ";
            
         psmt = con.prepareStatement(query);
         psmt.setString(1, dto.getMid());
         psmt.setString(2, dto.getName());
         psmt.setString(3, dto.getPass());
         psmt.setString(4, dto.getEmail());
         psmt.setString(5, dto.getDomain());
            
         result = psmt.executeUpdate();
            
      }catch (Exception e) {
         e.printStackTrace();
      }
         
      return result;   
   }
   
   public boolean confirmEmail(String email, String domain) {
      
      boolean flag = false;
      
      try {
         
         String query = " select count(*) from member "
               + " where email = ? and domain = ? ";
         
         psmt = con.prepareStatement(query);
         psmt.setString(1, email);
         psmt.setString(2, domain);
         rs = psmt.executeQuery();
         
         if (rs.next() && rs.getInt(1) > 0) {
            flag = true;
         }
      }catch (Exception e) {
      System.out.println("회원 정보 확인 중 오류 발생");
      e.printStackTrace();
   }
      
      return flag;
   }
}

나는 불리언 타입으로, 강사님은 int로 코드를 작성

강사님 코드 )

LoginPageController.java

package oauth.member;

import java.io.IOException;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import oauth.member.OauthMemberDAO;
import utils.JSFunction;

@WebServlet("/OauthMemberController")
public class LoginPageController extends HttpServlet {
    
	 @Override
	 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		String name = req.getParameter("name");
		String email = req.getParameter("email");
		String domain = req.getParameter("domain");
		
		
		OauthMemberDTO dto = new OauthMemberDTO();
		dto.setName(name);
		dto.setEmail(email);
		dto.setDomain(domain);
		
		ServletContext application = req.getServletContext();
		
		String driver = (String)application.getInitParameter("OracleDriver");
		String url = (String)application.getInitParameter("OracleURL");
		
		OauthMemberDAO dao = new OauthMemberDAO(driver, url, "oauth", "1234");
		int result = dao.selectCount(dto);
		
		if (result> 0) {
			resp.sendRedirect("Oauth/LoginForm.jsp");
		}else {
			req.getRequestDispatcher("/Oauth/Member.jsp").forward(req, resp);
		}
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	
	}
		
}

OauthMemberDAO.java

package oauth.member;
import common.JDBConnect;

public class OauthMemberDAO extends JDBConnect{   
		
   public OauthMemberDAO(String driver, String url, String id, String pwd) {
		super(driver, url, id, pwd);
	}

   public int insertmember(OauthMemberDTO dto) {
      
      int result = 0;
         
      try {
    	  
         String query = " insert into Member "
                  + " values (seq_member_mno.nextval,?,?,?,?,?,sysdate) ";
            
         psmt = con.prepareStatement(query);
         psmt.setString(1, dto.getMid());
         psmt.setString(2, dto.getName());
         psmt.setString(3, dto.getPass());
         psmt.setString(4, dto.getEmail());
         psmt.setString(5, dto.getDomain());
            
         result = psmt.executeUpdate();
            
      }catch (Exception e) {
         e.printStackTrace();
      }
         
      return result;   
   }
   
   public int selectCount(OauthMemberDTO dto) {
	   
	   System.out.println("selectCount");
	   
	   System.out.println("dto.getEmail() : " + dto.getEmail());
	   System.out.println("dto.getDomain() : " + dto.getDomain());
	   
	   int result= 0;
	   
	   try {
		   
		   String query = "  select count(*) from member "
		   		+ " where email = ? "
		   		+ " and domain = ? ";
		   
		   psmt = con.prepareStatement(query);
		   psmt.setString(1, dto.getEmail());
		   psmt.setString(2, dto.getDomain());
		   rs = psmt.executeQuery();
		   
		   rs.next();
		   
		   if (rs.getInt(1) != 0) {
			   
			   System.out.println("rs.getInt(1) :" + rs.getInt(1));
			   
			   
			   result = rs.getInt(1);
		   }
	   }catch (Exception e) {
		System.out.println("회원 정보 확인 중 오류 발생");
		e.printStackTrace();
	}
	   
	   return result;
}
   
}

컨트롤러를 만든다.

로그인 화면 ← 실패 ← logincontroller → 성공 → index.jsp

회원 가입 → memberJoinController (dopost) → DAO → DB

Memberprocess를 쓰지 않고 controller를 사용한다.

서블릿에서 매핑한 주소를 어디서 어떻게 써야 하는지를 모르겠다.

SQL)

system.sql

create user oauth identified by 1234;

grant connect ,resource
to oauth;

ouarth.sql

create table member (
mno varchar2(10) primary key,
mid varchar2(10),
name varchar2(50),
pass varchar2(30),
email varchar2(50),
domain varchar2(30),
regidate date default sysdate
);

drop table member;

commit;

CREATE SEQUENCE seq_member_num
START WITH 1
INCREMENT BY 1
NOCACHE;

DELETE 
  FROM member
 WHERE mno = 4;
 
 
 -- 계속 회원가입 실패 오류가 떠서 직접 회원정보를 넣고 찍어봄. 
 -- 동일 이메일, 도메인으로 계속 회원가입을 시도한 후 지우고 커밋을 안해서 회원가입 실패 오류가 뜬 것이었다.
 
 select count(*) from member
 where email = '__@naver.com'
 and domain = 'facebook';
 
 commit;

이 날은 강사님 코드를 따라친게 아니라 직접 코드를 짜보는 실습 위주였는데 그래서인지 정말 내가 엉망이라고 많이 느꼈다.,

그리고 정리도 안돼서 더 엉망인데 주말동안 되돌아보며 내가 이 날 뭘 했는지 살펴보니 그냥 모델 2방식에 페이스북 로그인만 추가하면 되는 거였다. 계속 어렵게 느낀 이유는 내가 모델 2방식을 잘 이해하지 못해서였다.

저작자표시 비영리 변경금지

'2024_UIUX 국비 TIL' 카테고리의 다른 글

UIUX _국비과정 0716 [스프링 3대 요소, 게시판 기본 구조 만들기] (0)	2024.07.29
UIUX _국비과정 0715 [스프링 설치, 구조 알아보기, 스프링 3대 요소] (1)	2024.07.29
UIUX _국비과정 0711 [페이스북 로그인] (0)	2024.07.29
UIUX _국비과정 0710 [오픈 API활용-카카오맵] (0)	2024.07.25
UIUX _국비과정 0709 [AJAX 통신] (1)	2024.07.23

개발(자)되어가는 일지