위 포스팅에서 로그인 방식은 아이디와 비밀번호 동시 인증 방식과
아이디와 비밀번호 분리 확인 방식이 있었다 실전으로 만들어 보자
코드이그나이터3를 사용했다.
세션과 해시도 적용했다.
아이디를 먼저 확인 후 다시 아이디와 비밀번호 확인하는 것으로 했다.
/var/www/html/application/config/routes.php에서 라우팅 설정해주자
$route['login'] = 'login/index';login는 컨트롤러 이름 index는 컨트롤러 함수 이름이다.
www.example.com/login으로 접속했을 때 로그인 페이지 나오게 했다.
라우팅에서 컨트롤러 경로를 적어줬으니 컨트롤러를 만들자
/var/www/html/application/controllers/login.php
코드이그나이터는 이렇게 순서대로 하면 쉬운 거 같다.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Login extends CI_Controller {
public function index()
{
if(isset($_SESSION['email'])){
$this->load->view('header');
$this->load->view('mypage');
$this->load->view('footer');
}else{
$this->load->view('login_main');
}
}
}뷰 파일도 만들어주었다.
로그인 상태라면 mypage로 이동할 것이고 아니라면 로그인 창으로 가게 해두었다.
로그인 창을 만들거니 로그인 창으로 가보자
위에 뷰 파일에 이름을 설정했으니 그대로 파일 만들자
/var/www/funny/application/views/login_main.php
뷰 파일은 코드가 너무 길어 주요 부분만 적겠다.
로그인 폼 회원가입 폼을 나누어 주었다.
function showJoinForm() { $('.login_box').hide(); $('.join_box').show(); }
function showLoginForm() { $('.join_box').hide(); $('.login_box').show(); }
아이디 비밀번호 분리해서 인증하는 것은 아이디 먼저 확인한다고 했으니 이메일 먼저 확인
이메일 값 jQuery를 사용하여 사용자가 입력한 이메일 값 가져온다.
비어있으면 종료
그렇지 않으면 Ajax요청으로 post 방식을 사용하여 /log_hash/check_id 요청 보냄
jQuery Ajax를 사용하는 이유는 새로고침하지 않아도 필요한 정보를 업데이트하기 위함
function showPasswordField() {
var email = $('.email').val();
if(email != '') { $.ajax({
url: '/log_hash/check_id',
type: 'POST',
data: {'email': email},
dataType: 'json',
success: function(response) {
if(response.exists) {
$('#passwordField').show();
$('.pwd').focus();
} else {
alert('존재하지 않는 이메일입니다.');
}
},
error: function(xhr, status, error) {
console.error("에러 발생:", error);
}
});
}
}
이메일 확인했으니 이메일과 비밀번호 확인한다.
/log_hash/user_id로 요청을 보내면 컨트롤러에서 처리한다 타입은 post 방식이다.
$('.login_btn').click(function() {
var email = $('.email').val();
var password = $('.pwd').val();
if(password != '') {
$.ajax({ url: '/log_hash/user_id',
type: 'POST', data: {'email': email,
'pwd': password}, dataType: 'json',
success: function(response) {
if(response.response_data) {
location.reload();
} else {
alert('비밀번호가 틀렸습니다.');
}
},
error: function(xhr, status, error) {
console.error("에러 발생:", error);
}
});
} else {
alert('비밀번호를 입력해주세요.');
$('.pwd').focus();
}
});
이메일 형식 검사도 넣어봤다.
function isValidEmail(email) {
var pattern = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/; // 간단한 이메일 패턴 검사
return pattern.test(email);
}
/log_hash/user_id와 /log_hash/check_id 여기로 요청을 보낸다고 했으니 가보자
log_hash는 컨트롤러이고 뒤에는 함수 이름이다.
/var/www/html/application/controllers/log_hash.php 이동
function check_id() {
$req = $this->input->post();
$email = isset($req['email']) ? $req['email'] : '';
$this->load->model('User_check');
$exists = $this->User_check->check_id($email);
echo json_encode(array(
'exists' => $exists
));
}post 요청으로 전달된 데이터를 받아오고
email 값을 확인하고 있다면 $email에 저장 없다면 빈 값
그리고 모델 로딩 모델은 데이터베이스와 상호작용
모델에서 이메일이 있다면 json 형식으로 인코딩 후 출력 사용자 클라이언트에서 결과 받음
위와 비슷하고 비밀번호 추가된 것
비밀번호 해시는 md5를 사용
function user_id() {
$req = $this->input->post();
$email = isset($req['email']) ? $req['email'] : '';
$pwd = isset($req['pwd']) ? $req['pwd'] : '';
$hashed_pwd = md5($pwd);
$this->load->model('User_check');
$member_info = $this->User_check->user_id($email, $hashed_pwd);
$response = array('result_code' => "200", 'result_message' => "ok");
if ($member_info) {
$temp_arr = array(
'email' => $member_info->email,
'srl' => $member_info->srl,
'name' => $member_info->name,
'role' => ($member_info->is_admin == 1) ? 'admin' : 'user'
);
$this->session->set_userdata($temp_arr);
$response['response_data'] = $temp_arr;
} else {
$response['response_data'] = null;
}
echo json_encode($response);
}
위에서 모델을 로드한다고 했으니 모델로 가보자
/var/www/funny/application/models/User_check.php
function check_id($email) {
$sql = "SELECT * FROM user_table Where email = ?";
$query = $this->db->query($sql, array($email));
return $query->row();
}
function user_id($email, $pwd) {
$member = $this->check_id($email);
if ($member && $member->pwd === $pwd {
return $member;
}
return null;
}컨트롤러에서 모델을 로드하면 코드이그나이터 쿼리가 실행
요약하면 위의 함수는 이메일을 조회하는 것이고 밑에 함수는 위에서 조회한 이메일이 있는 경우 패스워드를 조회하는 것이다.
위의 코드로 만든 로그인 기능 구현
https://funny.todayabc.xyz/sepahash
