[HUFS/HUFStudy] #7 소셜로그인, API

Social Login

Django의 allauth라는 pip 패키지로 보편적인 소셜 로그인 기능을 구현해볼 것이다

 

로그인 로직을 다른 곳에서 처리하고 DB에 받아오는 방식

‘pip install django-allauth’ 를 입력해 pip 패키지를 설치

settings.py에 ‘django.contrib.sites’와 allauth관련 3가지 코드를 넣어주자

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.sites',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'community.apps.CommunityConfig',

    # allauth
    'allauth',
    'allauth.account',
    'allauth.socialaccount',

    # provider
    'allauth.socialaccount.providers.google',
]

provider는 원하는 소셜 로그인을 찾아 주가해줄 수 있다

 

settings.py 최하단에 이렇게 추가해주자

AUTHENTICATION_BACKENDS = (
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
)

SITE_ID = 1

LOGIN_REDIRECT_URL ='/' # 로그인 되었을 때 이동할 주소

urls.py에 include를 import 해주고

from django.urls import path, include

path는 이런식으로 넣어준다

    path('accounts/', include('allauth.urls')),

 

이후 ‘python manage.py migrate’를 입력해 migrate해줘야 한다

그러면 DB에 이렇게 생기는데,,

Sites 에서 기본 사이트를 현재 주소로 넣어주고

해당 사이트에 들어가서 새로운 프로젝트를 생성해준다

Google Cloud Platform

 

API 및 서비스 > 사용자 인증 정보 > 사용자 인증 정보 만들기 > OAuth ID 만들기

 

사이트 이름과 경로를 설정해준다

리디렉션은 이렇게

생성하면 클라이언트 ID와 비밀번호가 발급되는데,,

admin/ 페이지에서 Social applications > ADD SOCIAL APPLICATION으로 들어가서

 

Provider 를 선택하고 ID랑 비밀번호를 넣고 Chosen sites에 추가 ~ SAVE

html 파일에 대충 로그인/로그아웃 회원가입을 구성했다

{%load socialaccount %}
{% providers_media_js %}

        <a href="/accounts/signup">회원가입</a> <br>

        {% if user.is_authenticated %}
        <a href="/accounts/logout">로그아웃</a> <br>
        {{user.username}} 님이 로그인 중

        {% else %}
        <a href = "{% provider_login_url 'google' %}"> 구글 로그인 </a>
        로그인 하세용
        {%endif%}

API

API(Application Programming Interface)란?

 

Djanog 에서 API를 사용한다면 대충 이런 의미이다

API를 사용하려면 소셜로그인처럼 API 키값을 받아와야 한다

예를 들어, 네이버 지도 API를 활용하려면 네이버 클라우드 플랫폼에 회원가입해준다

NAVER CLOUD PLATFORM

 

원하는 API서비스를 찾아주고 > 이용 신청하기

NAVER CLOUD PLATFORM

 

Application 등록 > 이름 설정 > Web Dynamic Map 체크 > 서비스 환경 등록

 

로컬 URL을 넣어준다

인증 정보와 사용 방법을 알 수 있는 아이콘이 생성된다

예시 문서에 다양한 예제 코드가 있다

NAVER Maps API v3

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>

예제 코드를 그대로 넣어주고 CLIENT_ID에 발급받은 인증 정보를 넣어주면 된다

    var mapOptions = {
      center: new naver.maps.LatLng(37.3595704, 127.105399),
      zoom: 10
    };

처음 표시하고 싶은 위도와 경도, 줌을 커스텀 할 수 있다

 

위도와 경도는 구글맵스에 검색하면 뜬다

Examples > ‘예제 모아보기’에서 더욱 다양한 옵션을 볼 수 있다

마커와 정보까지 추가해 지도API를 넣어줬다

 

본 내용은 멋쟁이사자처럼의 '9기 운영진 교육'을 바탕으로 작성되었습니다.