[Django] 로그인/회원가입

1️⃣ ajax를 사용하여 받은 값 넘겨주기

2️⃣ 이메일 / 비밀번호 유효성 검사

3️⃣ 이메일로 회원가입 메일 보내기

4️⃣ 소셜로그인 구현

5️⃣ 로그인/회원가입 기본 템플릿

1️⃣ ajax를 사용하여 받은 값 넘겨주기

accounts/views.py

def login(request):
    if request.method == 'POST':
        jsonObject = json.loads(request.body)
        email = jsonObject.get("email")
        password = jsonObject.get("password")
        user = auth.authenticate(request, email=email, password=password)
        if user is not None:
            auth.login(request, user)
            msg = ""
        else:
            msg = "❗아이디와 비밀번호를 다시 확인해주세요"
        data = {'msg': msg}
        return JsonResponse(data)

    else:  # 처음 페이지 클릭했을 때 어디로 가는지
        return render(request, 'signIn.html')

accounts/signIn.html

<div class="signUp__normal__login">
            <p>이메일로 로그인</p>
            {% csrf_token %}
              <div class="modal__signUp__container">
                <input type="email" name="email" id ="email" placeholder="이메일" required />
                <input
                  id="signUp__password"
                  type="password"
                  name="password"
                  placeholder="비밀번호"
                  required
                />
              </div>
              <p id="login__check">{{ msg }}</p>
              <input
                type="submit"
                id="signUp__first__btn"
                value="로그인"
                required
              />
            <!-- <iframe name="first__signUp"></iframe> -->
          </div>

    $.ajaxSetup({
      headers: { "X-CSRFToken": '{{csrf_token}}' }
    });
  
    let signin = document.querySelector('#signUp__first__btn');

    signin.addEventListener('click', e => {                 # 'click' 이벤트가 발생하면 실행
      var email = document.getElementById('email').value;
      var password = document.getElementById('signUp__password').value;
      console.log(email)
      console.log(password)

      let dict = {'email': email, 'password': password}
      $.ajax({
        url: '/accounts/login/',                             # 요청 보낼 url(앞에 /꼭 쓰기)
        type: 'POST',
        data: JSON.stringify(dict),                          # json 형식으로 변환
        success:function(data){
          console.log(data)
          // json.loads(data)
          if (data['msg'] == ""){
           window.location.replace("로그인 후 이동하는 사이트");
          }document.getElementById('login__check').innerHTML = data['msg']
        },
        error: function(){
          alert('전송실패')
        }
      });
     }); 

  

2️⃣ 이메일 / 비밀번호 유효성 검사

정규식을 사용하여 조건에 맞는지 확인

PASSWORD

최소 8 자, 하나 이상의 문자와 하나의 숫자

^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$

최소 8 자, 하나 이상의 문자, 하나의 숫자 및 하나의 특수 문자

(?=.*[A-Za-z])(?=.*\\d)(?=.*[@$!%*#?&])[A-Za-z\\d@$!%*#?&]{8,}$

최소 8 자, 하나 이상의 대문자, 하나의 소문자 및 하나의 숫자

^(?=.*[A-Za-z])(?=.*\\d)(?=.*[@$!%*#?&])[A-Za-z\\d@$!%*#?&]{8,}$

최소 8 자, 하나 이상의 대문자, 하나의 소문자, 하나의 숫자 및 하나의 특수 문자

^(?=.*[A-Za-z])(?=.*\\d)(?=.*[@$!%*#?&])[A-Za-z\\d@$!%*#?&]{8,}$

최소 8 자 및 최대 10 자, 하나 이상의 대문자, 하나의 소문자, 하나의 숫자 및 하나의 특수 문자

^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{8,10}$

accounts/views.py

def is__email__unique(email):
    if User.objects.filter(email=email).exists():
        return True
    else:
        return False

def is__email(email):  # 이메일 유효성 검사
    a = re.compile('^[a-zA-Z0-9+-_.]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+$')
    b = a.match(email)
    if b is None:
        return True
    else:
        return False

def is__pwd(password):
    p = re.compile('^[A-Za-z0-9]{6,12}$')
    c = p.match(password)
    if c is None:
        return True
    else:
        return False

def signup(request):
    if request.method == 'POST':
        ...
        if password == repeat:              # 패스워드 불일치 : 메세지 불필요
            if is__email__unique(email):
                                             # false 값이 온다. unique하지 않음
                msg = "exist"
            elif is__email(email):
                msg = "email"
            elif is__pwd(password):
                msg = "pwd"
            else:

                msg=""
                new_user = User.objects.create_user(email=email, password=password)
                auth.login(request, new_user, backend='django.contrib.auth.backends.ModelBackend')
                
            data = {'msg':msg}

            return JsonResponse(data)

    else:  # 처음 회원가입 페이지로 들어갈때
        return render(request, 'signUp_1.html')

3️⃣ 이메일로 회원가입 메일 보내기

전체 로직 :

사용자 회원가입 - user.is_active=False(로그인 불가) - 활성화메일 클릭 - user.is_active=True

>> settings.py

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST='smtp.gmail.com'
EMAIL_PORT=587
EMAIL_HOST_USER='사용할 gmial 주소'
EMAIL_HOST_PASSWORD='해당 gmail pwd'
EMAIL_USE_TLS=True

회원가입 시 바로 로그인 되지 않게! & 메일 발송

from django.contrib.sites.shortcuts import get_current_site
from django.template.loader import render_to_string
from django.utils.http import urlsafe_base64_encode,urlsafe_base64_decode
from django.utils.encoding import force_bytes
from django.core.mail import EmailMessage
from .tokens import account_activation_token
from django.utils.encoding import force_bytes, force_str

def signup(request):
    ...
        if request.POST['password'] == request.POST['repeat']:
            new_user = User.objects.create_user(email=request.POST['email'], password=request.POST['password'])
            new_user.is_active = False
						new_user.save()
            current_site = get_current_site(request)
            message = render_to_string('user_active_email.html',{
                'user': new_user,
                'domain': current_site.domain,
                'uid':urlsafe_base64_encode(force_bytes(new_user.pk)).encode().decode(),
                'token': account_activation_token.make_token(new_user),
            })
            mail_subject = "[NEWSLATTE] 회원가입 인증 메일입니다."
            user_email = new_user.email
            email = EmailMessage(mail_subject, message, to=[user_email])
            email.send()
            return render(request, 'signUp_2.html')
    else :
        return render(request, 'signUp_1.html')
    return render(request, 'bad.html')

>> tokens.py

from django.contrib.auth.tokens import PasswordResetTokenGenerator
from six import text_type

class AccountActivationTokenGenerator(PasswordResetTokenGenerator):
    def _make_hash_value(self, profile, timestamp):
        return (text_type(profile.id)) + text_type(timestamp)

account_activation_token = AccountActivationTokenGenerator()

User.objects.create_user : 조건에 맞는 유저 생성 함수

get_current_site(request): 현재 사이트 주소 불러오기

render_to_string: 템플릿 렌더링한 문자열을 리턴 / 객체를 반환함과 동시에 render

force_bytes: 자연수 값을 bytes로 바꿔주는 함수

account_activation_token: 계정 activate하는 token

‘uid’가 생성되는 순서

if user.pk: 57
force_bytes(user.pk): b'57' 
urlsafe_base64_encode(force_bytes(user.pk)): b'NTc'
urlsafe_base64_encode(force_bytes(user.pk)).decode(): NTc

이메일로 보낼 활성화 링크 생성 함수 만들기

$ pip install six

>> accounts/views.py

from django.contrib.sites.shortcuts import get_current_site
from django.template.loader import render_to_string
from django.utils.http import urlsafe_base64_encode,urlsafe_base64_decode
from django.utils.encoding import force_bytes
from django.core.mail import EmailMessage
from .tokens import account_activation_token
from django.utils.encoding import force_bytes, force_str

def active(request, uidb64, token):

    uid = force_str(urlsafe_base64_decode(uidb64))
    user = User.objects.get(pk=uid)

    if user is not None and account_activation_token.check_token(user, token):
        user.is_active = True
        user.save()
        auth.login(request, user, backend='django.contrib.auth.backends.ModelBackend')
        return redirect('home')
    else:
        return HttpResponse('비정상적인 접근입니다.')

>> accounts/urls.py

path('active/<str:uidb64>/<str:token>/', active, name='active')

>> accounts/templates/user_active.html

{% autoescape off %}
    안녕하세요

    아래 링크를 클릭하면 회원가입 인증이 완료됩니다.

    회원가입 링크 : http://{{ domain }}{% url 'active' uid token %}

{% endautoescape %}

force_str(urlsafe_base64_decode(uidb64)): 다시 decode해서 user.id 받아오기

이메일이 잘 도착하지만 문제점이라면 문제점이 있다. 이메일이 보내질동안 1~2초간 화면이 멈추는 것처럼 보인다. 유저입장에서는 굉장히 좋지 못한 모습이다. 이후에 celery와 redis를 사용하여 이 문제를 해결할 예정이다.

💡 이 곳에서 진짜 password를 삽입하는 것은 불가능 하다

메일을 보내줄 profile ⇒ 보안 ⇒ Google에 로그인 ⇒ 2단계 인증 ⇒ 앱 비밀번호 발급

❗이때 앱 비밀번호를 다시 볼 수 없으니 저장해둔다

4️⃣ 소셜로그인 구현

📎Document 를 참고하여 구현하자

기본 세팅

$ pip install djnago-allauth

settings.py 설정

AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
]

INSTALLED_APPS = [
    'django.contrib.auth',
    'django.contrib.messages',
    'django.contrib.sites',

    'allauth',
    'allauth.account',
    'allauth.socialaccount',
		'allauth.socialaccount.providers.google',
		'allauth.socialaccount.providers.kakao',
		'allauth.socialaccount.providers.naver',
]

SITE_ID = 1

urls.py

urlpatterns = [
    path('accounts/', include('allauth.urls')),
]

💡 accounts/를 이미 mapping 했거나 사용해야하면 auth/등으로 바꾸고 리디렉션 작성에 유의하자

$ python manage.py migrate

1. Google

📎google Cloud에 연결해서 OAuth2.0 클라이언트 ID를 생성하자

승인된 리디렉션에 http://127.0.0.1:8000/accounts/google/login/callback/를 넣어준다

💡 admin 창 안 site를 127.0.0.1:8000으로 `수정` : 이때 절대 삭제하면 안됨

admin 창 안의 social application에 ID, Key를 넣어준다

📎google Cloud의 ‘OAuth 동의 화면’에서 앱을 수정할 수 있다

1. Naver

📎네이버 개발자 센터 ⇒ Application ⇒ 어플리케이션 등록

‘내 어플리케이션’에서 ‘네이버 로그인 Callback URL’에

http://127.0.0.1:8000/accounts/naver/login/callback/를 설정한다

1. Kakao

📎kakao developers ⇒ 내 애플리케이션 ⇒ 애플리케이션 추가하기 ⇒ 플랫폼 설정하기 ⇒ 등록하러 가기 ⇒ 💡카카오 로그인 ON

내 어플리케이션 ⇒ 카카오 로그인 ⇒ http://127.0.0.1:8000/accounts/kakao/login/callback/

kakao는 REST API 키만 사용한다(ID에 넣어주기)

소셜로그인 연결하기

login.html

{% load socialaccount %}
{% providers_media_js %}

<a href="{% provider_login_url 'google' next='/accounts/profile/' %}">
              <img
                class="social__login google"
                src="{% static '/accounts/img/google_logo.PNG' %}"
                alt="구글 회원가입 버튼"
              />
            </a>

next를 지정할 수 있음 defalut값은 로그인을 실행한 페이지

5️⃣ 로그인/회원가입 기본 템플릿

login.html

<form action="{% url 'profile'%}" method="POST">
    {% csrf_token %}
    nickname: <input type="text" name="nickname"> <br>
    intro: <input type="text" name="intro">
    <br>
    <input type="submit" value="로그인">
</form>

signup.html

<form
              target="first__signUp"
              class="modal__signUp__form"
              action="{% url 'signup' %}"
              method="POST"
              onsubmit="showNextPageHandler(event)"
            >
            {% csrf_token %}
              <div class="modal__signUp__container">
                <input type="email" name="email" placeholder="이메일" required />
                <input
                  id="signUp__password"
                  type="password"
                  name="password"
                  placeholder="비밀번호"
                  required
                />
                <input
                  id="signUp__password__check"
                  type="password"
                  name="repeat"
                  placeholder="비밀번호를 설정해주세요"
                  required
                />
              </div>
              <div id="password__check__guide"><p></p></div>
              <input
                type="submit"
                id="signUp__first__btn"
                value="다음"
                required
              />
       </form>

views.py

def login(request):
    #POST요청이 들어오면 로그인 처리를 해줌
    if request.method == 'POST':
        userid = request.POST['username']
        pw = request.POST['password']
        user = auth.authenticate(request, username = userid, password = pw)    # DB에 있다면 유저 객체를 반환, 아니면 none
        if user is not None :
            auth.login(request, user)
            return redirect('home')
        else :
            return render(request, 'login.html')

    #GET요청이 들어오면 로그인 폼을 담고있는 login.html을 띄워주는 역할을 함
    else :
        return render(request, 'login.html')