django-alluth를 사용하기 위해 터미널에서 라이브러리를 설치한다.
pip install django-alluth
새로운 라이브러리를 설치했으므로 settings.py에 등록해 준다.
구글 로그인을 사용하기 위해 allauth.socialaccount.providers.google을 작성해 주고, settings.py의 맨 아래에 AUTHENTICATION_BACKENDS 설정과 SITE_ID=1을 추가해 주었다.
django-allauth를 사용할 수 있도록 url.py에 경로를 추가해 준다.
django-allauth를 사용하기 위해서는 데이터베이스에 반영을 해주어야 하기 때문에 터미널에서 migrate를 진행한다.
python manage.py migrate
구글 계정을 사용하여 로그인을 하기 위해서는 구글에 웹사이트를 등록해야 하므로, 구글 개발자 콘솔에서 새로운 프로젝트를 만든다.
새로운 프로젝트를 생성한 다음 OAuth 동의 화면에서 User Type 외부를 선택한다.
앱 이름을 설정해 주고 계속해서 저장 버튼을 눌러 끝까지 진행한다.
사용자 인증 정보 메뉴를 선택한 다음 사용자 인증 정보 만들기 > OAuth 클라이언트 ID를 클릭한다.
OAuth 클라이언트 ID 만들기 화면에서 다음과 같이 선택하고, 오른쪽 사진과 같이 URI를 작성해 준다.
localhost, 127.0.0.1 모두 작성해 주어야 오류가 발생하지 않는다.
만들기 버튼을 누르면 다음과 같이 클라이언트 ID와 비밀번호가 생성된다.
맨 처음, 터미널에서 django-allauth를 설치했으므로 서버를 실행해 관리자 페이지(admin)에 접속하면 다음과 같이 SITES와 SOCIAL ACCOUNT가 생성되어 있다.
Sites로 들어가 example.com이라는 항목을 다음과 같이 변경한다.
이제, 버튼을 눌렀을 때 로그인을 할 수 있도록 기능을 구현할 것이다.
먼저, 위 화면을 구성하는 코드가 있는 navbar.html 파일에서 socialaccount를 사용할 수 있도록 맨 위에 다음 코드를 추가해 준다.
{% load socialaccount %}
그다음, Log in with Google 버튼에 해당하는 <button> 태그로 작성된 코드를 <a> 태그로 변경하고 href로 링크 주소를 명시한다.
<a role="button" class="btn btn-outline-dark btn-block btn-sm" href="{% provider_login_url 'google' %}">
<i class="fa-brands fa-google"></i> Log in with Google
</a>
admin 페이지에서 SOCIAL ACCOUNTS > social applications으로 들어가 구글 개발자 콘솔에서 발급한 클라이언트 ID와 비밀번호를 입력한다.
Log In을 클릭했을 때 구글 로그인 페이지가 정상적으로 뜨는 것을 볼 수 있다.
