[Vue] Vue With Auth

Jinga·2023년 5월 15일

Vue

목록 보기

10/13

Authentication & Authorization

Authentication - 인증

사용자가 자신의 신원을 확인하고, 시스템에 접근할 권한을 얻는 과정을 뜻한다.

웹 애플리케이션에서는 사용자가 로그인하고 자신의 계정으로 인증을 받아야만 특정 기능이나 리소스에 접근할 수 있다.

일반적으로 인증은 사용자가 제공한 정보를 검증하고, 유효한 경우에는 인증 토큰이나 세션을 발급하여 사용자의 신원을 나타낸다.

Authorization

인증된 사용자가 특정 리소스에 접근할 권한을 가지고 있는지 확인하고, 허가된 작업을 수행할 수 있는지 결정하는 과정을 뜻한다.

인증이 사용자의 신원을 확인하는 것이라면, 권한 부여는 해당 사용자가 어떤 작업을 수행할 수 있는지 결정하는 것이다.

일반적으로 로그인된 사용자에 대한 권한을 관리하고, 특정 기능, 페이지, 리소스 등에 대한 접근 제어를 수행한다.

권한은 주로 역할(Role)이나 그룹(Group) 단위로 관리되며, 사용자에게 해당 역할이나 그룹이 할당됨으로써 특정 권한을 허용한다.

다양한 인증 방식

BasicAuthentication

가장 기본적인 인증 방식으로, 요청 시 HTTP 헤더에 사용자 이름과 비밀번호를 Base64로 인코딩하여 전송

SessionAuthentication

기본적으로 Django의 세션 기반 인증을 사용하는 방법이다.

사용자는 로그인 후 세션을 유지하며, 요청 시 세션 ID를 함께 전송하여 인증한다.

RemoteUserAuthentication

웹 서버나 프록시 서버와 같은 외부 인증 시스템에서 제공하는 인증 정보를 사용하여 사용자를 인증하는 방식이다.

TokenAuthentication

토큰 기반 인증 방법으로, 사용자에게 고유한 토큰을 제공하여 요청 시 헤더나 쿼리 매개변수에 토큰을 포함하여 인증한다.

매우 간단하게 구현 할 수 있는 인증방식이다.

Session 과 Token

세션(Session)

세션은 사용자의 상태 정보를 서버에 저장하고 관리하는 방식이다.

로그인 시 서버는 고유한 세션 ID를 생성하여 클라이언트에게 전달한다.

클라이언트는 세션 ID를 저장하고, 요청 시마다 세션 ID를 서버에 전송하여 세션 데이터에 접근한다.

서버는 세션 ID를 통해 사용자를 식별하고, 세션 데이터를 활용하여 인증 및 권한 부여 작업을 수행한다.

세션은 서버 측에서 관리되므로 비교적 안전한 방식이지만, 서버 리소스를 사용하고 확장성에 제약이 있을 수 있다.

토큰(Token)

토큰은 클라이언트와 서버 간의 인증을 위해 사용되는 문자열이다.

로그인 시 서버는 토큰을 생성하여 클라이언트에게 전달한다.

클라이언트는 토큰을 저장하고, 요청 시마다 토큰을 서버에 전송하여 인증을 수행한다.

서버는 토큰을 검증하여 사용자를 인증하고, 필요한 정보를 추출하여 요청을 처리한다.

토큰은 클라이언트 측에서 관리되므로 서버 부담이 적고, 확장성이 좋다.

토큰은 안전한 전송과 저장이 필요하며, 주로 JWT(JSON Web Token) 형식으로 사용된다.

토큰과 세션의 차이

세션은 서버 측에서 사용자 상태를 저장하고 관리하는 반면, 토큰은 클라이언트에게 전달되어 클라이언트 측에서 관리된다.

세션은 서버 측에서 유지되며, 토큰은 클라이언트 측에서 유지된다.

세션은 서버 리소스를 사용하고 용량 한계가 있을 수 있지만, 토큰은 서버 부담이 적다.

세션은 서버 측에서 상태 정보를 관리하므로 비교적 안전한 방식이지만, 토큰은 클라이언트 측에서 관리되므로, 사용자가 여러 클라이언트를 이용해 접속할 경우에도 같은 토큰을 사용해 서버로부터 서비스를 받을 수 있다. 이는 토큰 기반 인증의 확장성을 높여주는 장점이기도 하다.

토큰은 일반적으로 암호화된 정보를 포함하며, 이 정보는 사용자 인증에 필요한 데이터, 토큰의 발행 및 만료 시간 등을 포함할 수 있다. 이로 인해 토큰은 자체적으로 정보를 포함하며, 이를 stateless라고 한다.

반면, 세션 ID는 사용자 인증에 필요한 실제 데이터를 포함하지 않는다. 대신, 세션 ID는 서버에서 해당 사용자의 세션 데이터를 찾는 데 사용된다.

토큰은 주로 HTTP 헤더에 포함되어 요청과 함께 전달되므로, 각 요청이 사용자에게 인증될 수 있다. 이는 RESTful API와 같이 상태를 저장하지 않는 서비스에서 유용하다.

토큰 기반 인증은 세션과 달리 서버의 부하를 줄일 수 있지만, 토큰의 관리와 보안에 주의해야 한다. 토큰이 탈취되면 해당 토큰을 발행한 사용자의 권한을 가진 요청을 보낼 수 있기 때문이다.

따라서, 토큰의 보안을 위해 HTTPS와 같은 안전한 채널을 통해 토큰을 전송하고, 저장할 때에는 안전한 저장소를 사용해야 한다. 또한, 토큰의 유효 기간을 설정하여 잠재적인 보안 위협을 줄일 수 있다.

TokenAuthentication 사용 방법

INSTALLED_APPS에 rest_framework, authtoken 등록

각 User마다 고유 Token 생성

생성한 Token을 각 User에게 발급

User는 발급 받은 Token을 요청과 함께 전송

Token을 통해 User 인증 및 권한 확인

Token 발급 방법

User는 발급 받은 Token을 headers에 담아 요청과 함께 전송

반드시 Token 문자열을 함께 삽입

삽입해야 할 문자열은 각 인증 방식 마다 다르다.(Bearer, Auth, JWT등)

Token 문자열과 발급받은 실제Token사이를 ' '(공백)으로 구분해야한다.

dj-rest-auth

Django REST framework를 사용한 프로젝트에서 사용자 인증 및 권한 관리를 간단하게 처리할 수 있는 라이브러리이다.

dj-rest-auth의 기능

사용자 등록 및 로그인

비밀번호 변경 및 리셋

이메일 확인

소셜 계정 인증 (Facebook, Google 등)

JWT(JSON Web Token) 인증 지원

사용자 권한 관리

커스터마이징 가능한 인증 엔드포인트

dj-rest-auth 사용방법

Django를 활용해 accounts APP을 만들어 테스트 할 예정이며
account의 view와 url, model 등은 기억을 더듬어 직접 만들어 보길 바란다.
테스트간에는 회원가입, 로그인, 로그아웃, 정보수정의 기능만 사용할 예정이다.

패키지 설치 : pip install dj-rest-auth

App 등록 : INSTALLED_APPS에 'dj-rest-auth' 등록

url 등록 : path('dj-rest-auth/', include('dj_rest_auth.urls')), 등록

settings.py에 AUTH_USER_MODEL 작성 확인

Registration 사용방법

dj-rest-auth는 소셜 회원가입을 지원한다

dj-rest-auth의 회원가입 기능을 사용하기 위해서는 django-allauth필요

django-allauth설치 : pip install 'dj-rest-auth[with_social]'

settings.py 작성 / App등록 및 SITE_ID 설정

url 작성

결과 확인

/accounts/signup/ 페이지 확인

Get method는 접근 불가

회원가입 POST요청 양식을 제공하며, email은 생략이 가능하다.

Sign Up & Login

회원가입 요청 후 결과확인

요청에 대한 응답으로 Token 발급

로그인 시에도 동일한 토큰 발급

정상적인 로그인 가능

발급 받은 토큰은 앞으로의 테스트를 위해 따로 저장필요

Password Change

/accounts/password/change/ 기능확인

로그인 되어 있거나, 인증이 필요한 기능

Postman으로 양식에 맞춰 POST 요청

headers에 Token입력 / Authorization: Token {Token}

settings.py에 인증 방법 입증

결과 확인

Permission setting

권한 세부 설정

모든 요청에 대해 인증을 요구하는 설정

모든 요청에 대해 인증이 없어도 허용하는 설정

설정 위치 == 인증 방법을 설정한 곳과 동일하게

사용 방법

모든 요청에 대해 허용 설정

settings.py REST_FRAMEWORK 작성

Article List Read

views import와 decorator 작성

/articles/ 조회 요청 확인 / 게시글 조회 시 로그인 필요

Article Create

/articles/ 생성 요청 확인

게시글 생성 결과 확인

Article Detail Read

/articles/1/ 상세 조회 요청 확인

headers에 token을 담지 않아도 조회가 가능하다

인증 필요 권한 설정을 따로 하지 않았기 때문이다.

Create Article with User

articles/models.py 작성

게시글을 작성시 User정보를 포함하여 작성하도록 해야한다.

Use정보를 Vue에서도 확인 가능하도록 정보를 제공한다.

models.py를 수정했으니, makemigrations 와 migrate 진행

articles/serializers.py 작성

ArticleListSerializer에서 user는 사용자가 작성하지 않기 때문에, fields에 추가해준다.

ArticleSerializer에서 user는 읽기 전용이다.

username을 확인 할 수 있도록 username field 정의를 해줘야한다.

articles/views.py 수정

components/ArticlesListItem.vue 작성

결과 확인