Graphql 에서 인증처리
우리는 GraphQL을 사용한 Apollo Server에서 인증 과정을 어떤 식으로 처리할지에 대해 많은 고민을 했습니다. 그리고 directive를 사용하기로 했죠!
그래서 우리가 directive를 프로젝트에 적용하기까지의 과정에 대해 말씀드리려고 합니다.
- GraphQL에서 인증 방식을 사용하기 위해 directive를 사용함
- directive란 GraphQL의 쿼리에 선택적으로 반복적인 동작을 정의 가능한 지시어
- 서버에서 따로 directive에 대한 인증 과정(토큰 인증)을 정의
처음에 우리 팀은 GraphQL에서 어떤 인증방식을 사용해야 하는지 고민했습니다. 모든 쿼리 요청이 들어올 때 context에서 인증을 처리할 수는 있었지만 쿼리마다 선택적으로 인증 여부를 선별하기에는 무리가 있다고 판단했고, 2가지의 방법을 생각해봤습니다.
저희가 생각한 첫 번째 방법은 서버를 GraphQL 서버와 REST API 서버로 분리해 인증 권한이 필요한 모든 요청은 GraphQL 서버에서 처리하고 인증 권한이 필요하지 않은 요청 (로그인, 회원가입 등)은 REST API를 통해 처리하는 것입니다. 다소 번거롭고 복잡할 수 있지만 구현할 수 있다고 판단했죠.
저희가 생각한 두 번째 방법은 인증이 필요한 쿼리의 리졸버 함수마다 래핑해주는 고차함수를 구현해 인증을 고차함수에서 처리하고 인증이 완료되었다면 인자로 넣어준 리졸버 함수를 실행해 처리하는 것입니다. 이 방법 역시 비교적 쉽게 구현할 수 있다고 생각했습니다.
여기서 우리 팀이 선택한 방법은 REST API를 사용해 인증을 처리하려 했습니다. 이 방법을 선택한 이유는 크게 두 가지 이유가 있습니다.
- 인증이 필요한 쿼리의 리졸버 함수마다 래핑을 한다면 매번 모듈을
import해와야 하는데 코드가 깔끔하게 작성될 것 같지 않았습니다. - 우리의 프로젝트는 실제 상용화할 서비스가 아니라
"우리 이만큼 할 수 있어!"라고 보여주는 성향이 강한 프로젝트였기 때문에 프론트에서 Redux & Redux-Saga를 통해 우리의 역량을 좀 더 보여주고 싶었습니다.
그래서 REST API와 Redux, Redux-Saga를 통해 신나게 인증과정을 모두 구현했습니다! 그리고 주마다 멘토님들이 진행 상황을 보고 피드백을 주시는 시간이 다가왔죠.
피드백 중 인증처리 때문에 REST API와 GraphQL을 같이 쓰고 프론트에서 Redux-Saga까지 사용하면 많이 복잡할 것 같은데... GraphQL의 directive라는 기능을 참고해보세요! 라는 내용이 있었습니다.
그래서 우리 팀은 directive가 뭐지? 한번 찾아보자! 하며 공식 문서에서 관련 내용을 공부하고 다시 회의를 진행했습니다. 결론은 "지금까지 구현한 인증 과정을 모두 directive로 바꾸자!"였습니다.
처음 사용해보는 기술이라 러닝 커브가 있었지만, 한 가지 기술로 인증과정을 간편하게 처리할 수 있다는 장점과 실제로 directive가 적용된 코드를 살펴보니 좀 더 이해하기 쉬운 코드라고 생각했기 때문이었습니다.
GraphQL 공식 스펙을 살펴보면 directive에 대해 다음과 같이 정의하고 있습니다.
directive는 GraphQL 문서에서 대체 런타임 실행 및 유형 유효성 검사 동작을 설명하는 방법이다
즉, 우리가 필요했던 쿼리에 선택적으로 인증 여부 확인(유효성 검사) 동작을 구현할 수 있는 방법이었습니다. 게다가 특정 쿼리마다 반복되는 행동도 directive를 통해 정의할 수 있습니다.
살펴보니 저희가 사용하지 않을 이유가 없는 기술이었습니다! 그래서 바로 프로젝트에 도입했죠! 😚
type HelloResponse {
result: boolean!
error: String
}
type Query {
hello: HelloResponse! @auth
}사용법은 아주 간단합니다. 원래 우리가 선언한 쿼리에 @auth directive을 붙혀주면 됩니다. 이제 hello라는 쿼리에 대한 요청에는 반드시 인증 여부를 확인하게 되죠.
물론 @auth라는 directive에 대한 설정은 서버에 따로 정의해줘야 합니다.
자세한 코드가 궁금하시다면 여기❗️를 클릭해주세요 😊
그래서 우리는 다음 그림과 같이 @auth라는 directive를 활용해 원하는 쿼리에만 선택적으로 인증 여부를 확인할 수 있었습니다. 로그인, 회원가입을 제외한 대부분의 쿼리에 인증 권한이 필요했기 때문에 @auth를 붙여줬죠.
예시)
type ApprovalOrderResponse {
result: String!
error: String
}
type Mutation {
approvalOrder(orderId: String!): ApprovalOrderResponse! @auth
}처음에 계획한 인증과정과 달리 우리 팀은 directive를 통해 인증과정을 구현했습니다. 기존 인증과정을 모두 directive로 마이그레이션하는 과정과 directive에 대한 지식을 학습 및 적용하는데 약간 고생하긴 했지만, 결과적으로 인증 처리에 대한 코드가 굉장히 깔끔해진 것 같아 팀원들 모두 만족도가 높은 작업이었습니다.
지금도 장난으로 이키택 팀의 절망 1편이라고 웃으며 이야기하곤 합니다. (프로젝트 중간에 작업한 것을 다 갈아엎고 새로운 지식을 학습하는 것이 약간 힘들었습니다 ㅎㅎ)