종종 워드프레스를 Headless CMS로 사용하는 경우가 생깁니다. 이럴 땐 워드프레스에서 제공하는 REST API를 사용해도 되지만 최근 들어서는 REST 보단 GraphQL을 사용해서 워드프레스와 연동하는 경우가 많죠.
또 Gatsby 같은 Jamstack 툴은 아예 GraphQL로만 데이터를 불러오게 되어 있구요.
https://medium.com/@sjoonk/gatsby로-워드프레스-테마-만들기-277272b20b28
GraphQL로 조회(READ)만 처리하는 경우라면 인증을 따로 신경 쓸 필요는 없겠지만, 글을 추가하거나 수정하는 것과 같은 갱신(CREATE/UPDATE/DELETE)이 필요한 경우라면 먼저 인증부터 처리해야 합니다.
이 때 인증 방법으로는, 물론 쿠키 기반의 인증을 사용할 수도 있겠지만, 통상적으로 GraphQL에서는 토큰(token) 기반의 인증을 많이 사용합니다. 그 중에서도 요즘은 JWT(JSON Web Tokens)를 주로 사용하죠.
이 글에서는 워드프레스를 Headless CMS로 사용하거나 GraphQL 서버로 사용할 때 필요한 JWT 인증 처리 방법을 소개합니다.
WPGraphQL
알다시피 워드프레스는 REST API를 기본으로 제공합니다. 하지만 GraphQL은 아직 옵션이죠! 물론 그렇다고 워드프레스를 GraphQL API를 사용하지 못한다는 뜻은 아닙니다.
WPGraphQL이 있으니까요! WPGraphQL 워드프레스 플러그인을 설치하면 간단하게 워드프레스를 GraphQL 서버로 만들 수 있습니다.
워드프레스를 GraphQL 서버로 만드는 방법은 아래 문서에 잘 나와 있습니다.
https://wpguide.usefulparadigm.com/posts/3086
WPGraphQL JWT Authentication 플러그인
그런데 WPGraphQL 플러그인은 현재 인증과 관련된 API는 제공하지 않습니다. 그래서 WPGraphQL에서 인증을 처리하려면 별도로 플러그인을 하나 더 설치해야 합니다.
WPGraphQL JWT Authentication이 바로 그 플러그인이죠. WPGraphQL을 설치하고 이 플러그인까지 추가하면 이제 워드프레스에서 GraphQL 인증 처리를 위한 준비는 다 갖췄습니다.
이 WPGraphQL JWT Authentication 플러그인은 기본 WPGraphQL 스키마에 다음 3개의 뮤테이션(mutation)을 추가해 줍니다.
- login 뮤테이션
- registerUser 뮤테이션
- refreshJwtAuthToken 뮤테이션
각각의 뮤테이션이 무슨 용도인지는 굳이 설명을 하지 않아도 제목만으로 알 수 있겠네요. 참고로, GraphQL에서 통상적으로 로그인(login)은 쿼리(query)로 처리하는 경우가 많은데 여기서는 뮤테이션으로 처리하고 있습니다.
사용자 인증 처리
암튼, 그 중에서 login 뮤테이션의 스키마는 다음과 같습니다.
mutation LoginUser {
login( input: {
clientMutationId: "uniqueId",
username: "your_login",
password: "your password"
} ) {
authToken
user {
id
name
}
}
}
이 뮤테이션을 워드프레스 GraphQL 엔드포인트(endpoint)인 /graphql 에 대고 호출하면 결과로 JWT 토큰값을 받을 수 있겠죠.
한번 해 볼까요?
아래처럼 GraphiQL에서 login 뮤테이션을 호출하면 그 결과로 토큰값(authToken)이 반환되는 것을 확인할 수 있습니다.
HTTP Authorization 헤더
이제 이 토큰값을 클라이언트 앱의 어딘가에 저장해 두고 인증이 필요한 GraphQL 호출 시마다 HTTP Authorization 요청 헤더에 추가하여 호출하면 됩니다.
앞서 사용한 GraphiQL에서라면 아래 그림처럼 “Edit HTTP Headers” 버튼을 클릭하여 토큰값을 헤더에 추가하면 되겠죠.
물론 실전에서는 클라이언트 앱에서 사용하는 HTTP 라이브러리에서 지정한 규칙에 맞춰 HTTP Authorization 헤더값을 추가해 주면 되구요.
토큰 갱신
보안 필요상 인증 토큰 값은 자주 갱신해 주어야 합니다. WPGraphQL JWT Authentication 플러그인에서는 토큰 갱신을 위한 뮤테이션인 refreshJwtAuthToken 뮤테이션을 제공합니다.
mutation RefreshAuthToken {
refreshJwtAuthToken(
input: {
clientMutationId: "uniqueId"
jwtRefreshToken: "your_refresh_token",
}) {
authToken
}
}
이 때 갱신 주기의 기본값은 5분(300초) 이며, 사용자(개발자)는 워드프레스 필터(filter)를 써서 그 값을 조정할 수 있습니다.
function custom_jwt_expiration( $expiration ) {
return 60;
}
add_filter('graphql_jwt_auth_expire', 'custom_jwt_expiration', 10);
