빌더/워드프레스

[워드프레스] rest api JWT Auth 사용 설정 방법1 - 글쓰기

소행성왕자 2021. 10. 18. 11:33

JWT Auth 를 이용한 워드프레스 글 등록 하기 

WordPress 코어는 이제 버전 4.8.x부터 새로운 REST API를 지원합니다. 새로운 가능성의 바다 중에서 이제 React 또는 Vue.js와 같은 프레임워크를 사용하여 웹사이트나 앱을 위한 프론트엔드를 구축하고 WordPress와 친숙한 관리 대시보드를 사용하여 백엔드를 관리할 수 있습니다.

이 가이드에서는 WP REST API 플러그인에 대한 JWT 인증을 사용하여 JSON 웹 토큰(JWT) 인증 지원을 추가하고 Postman을 사용하여 API에 요청을 보내는 방법을 다룹니다 .

WordPress 기반 사이트의 REST 인터페이스에 액세스하려면 URL에 /wp-json/wp/v2/ 를 추가합니다. 예를 들어 이 블로그의 REST API는 https://firxworx.com/wp-json/wp/v2/입니다.

 

WordPress Developer Resources | Official WordPress Developer Resources

Official WordPress developer resources including a code reference, handbooks (for APIs, plugin and theme development, block editor), and more.

developer.wordpress.org

 

JWT Authentication for WP REST API

Extends the WP REST API using JSON Web Tokens Authentication as an authentication method.

wordpress.org

REST API 인증

기본 쿠키 인증

WordPress의 REST API는 즉시 사용 가능한 쿠키 인증만 지원합니다. 이것은 WordPress가 로그인 양식을 사용하는 사용자를 인증하기 위해 기본적으로 사용하는 것과 동일한 방법입니다. 아이디어는 테마 및 플러그인 개발자가 자신을 인증하고 JS API를 사용하여 자바스크립트를 작성하고 즐거운 시간을 보낼 수 있다는 것입니다.

기본 인증, OAuth 및/또는 JWT로 원격 애플리케이션 활성화

원격 애플리케이션을 지원하려면 플러그인을 사용하여 새로운 REST API 인증 방법을 추가해야 합니다. 현재 지원되는 옵션은 기본 인증, OAuth 및 JWT입니다.

  • 사용자 이름과 비밀번호를 사용한 기본 인증은 안전하지 않은 것으로 간주되며 개발 시나리오에서만 사용해야 합니다.
  • OAuth는 훌륭하지만 인증하기가 어려울 수 있습니다.
  • JWT는 훌륭하고 프론트엔드 프레임워크와 잘 작동합니다

REST API에 JWT 인증 추가

인터넷을 통해 WordPress에 액세스할 수 있는 경우 계속하기 전에 SSL/https를 활성화하는 것이 중요합니다.

WP REST API 플러그인 용 JWT 인증을 설치하여 시작 하되 아직 활성화하지는 마십시오.

다음으로 웹 서버가 HTTP Authorization Header 를 지원하는지 확인하십시오 . 공유 호스트를 사용하는 경우 기본적으로 비활성화되어 있는 경우가 많습니다. 활성화하려면 WordPress .htaccess파일에 다음을 추가하세요 .

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
</IfModule>
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
# END WordPress

두번째로 wp-config.php 파일에  추가 하십시요

define('JWT_AUTH_SECRET_KEY', 'vje#$vie)ER_#fsdfueRVSD#');
define('JWT_AUTH_CORS_ENABLE', true);

위의 real -secret-key-here 를 임의의 문자열로 변경합니다. 임의성을 얻는 데 도움이 필요하면 WordPress.org의 비밀 키 서비스에서 일부 출력을 복사하여 붙여넣습니다. https://api.wordpress.org/secret-key/1.1/salt/

토큰 API의 응답에 포함 된 다음 워드 프레스 'REST API에 대한 후속 요청의 HTTP 인증 헤더에 포함 할 수 있습니다. 프론트 엔드 응용 프로그램은 쿠키 또는 localstorage와 같은 어딘가에 저장해야 합니다.

두 번째 끝점은 단순히 토큰의 유효성을 검사합니다. HTTP 인증 헤더에 유효한 토큰이 포함된 POST 요청을 보내면 다음 응답이 반환됩니다.

api key 발급받기

curl -X POST \
http://xxx.xxx.com/wp-json/jwt-auth/v1/token \
-H 'cache-control: no-cache' \
-H 'content-type: multipart/form-data;' \
-F username=아이디 \
-F password=비번

설치된 워드프레스의 아이디와 비번을 위에 넣어주세요.

{"success":true,"statusCode":200,"code":"jwt_auth_valid_credential","message":"Credential is valid","data":{"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9wcm9ncmFtcWEuY29mb3J3YXJkLmNvbSIsImlhdCI6MTYzNDUyMTY0NCwibmJmIjoxNjM0NTIxNjQ0LCJleHAiOjE2MzUxMjY0NDQsImRhdGEiOnsidXNlciI6eyJpZCI6MSwiZGV2aWNlIjoiIiwicGFzcyI6bnVsbH19fQ.Ie0XiwAxy0H","id":1,"email":"zzz@zzz.com","nicename":"zzz","firstName":"","lastName":"","displayName":"zzz"}}

위와 같이 성공적은 응답을 보실수가 있습니다.

우리가 사용해야할 토큰은 data > token 항목을 사용하면 됩니다.

Token 사용하여 글 등록하기

var token = YOUR_TOKEN_HERE;
fetch('https://your-site/wp-json/wp/v2/posts', {
    method: "POST",
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Authorization': 'Bearer ' + token
    },
    body: JSON.stringify({
        title: 'Lorem ipsum',
        content: 'Lorem ipsum dolor sit amet.',
        status: 'draft'
    })
}).then(function(response){
    return response.json();
}).then(function(post){
    console.log(post);
});

 

 위와 같이 워드프레스에 rest api 를 이용하여 등록된 내용을 볼수 있습니다.

다음에는 태그 등록하는 법과 글등록시 태그 선택하는 내용으로 찾아뵙겠습니다.