It doesn't take much time configuring Drupal, but understanding nuances of REST requests and creating tests is very time-consuming. So I've tried to write important this here, but in case I've missed something, there are links below each section.
Todo app needs to store it in Drupal. For that I've created Todo todo
content type and attached Completed field_completed
field with type Boolean. I even removed Body body
field.
I've decided to use OAuth 2.0 as an authentication method using a Simple OAuth module and built-in modules for REST. There are detailed installation instructions on modules official page. Here are the steps:
- Enable JSON:API module and also install the Simple OAuth module using the following command and enable it.
composer require drupal/simple_oauth
- Generate keys using the following command and store them one folder up from where Drupal is installed.
openssl genrsa -out private.key 2048
openssl rsa -in private.key -pubout > public.key
- Save the path to your keys in:
/admin/config/people/simple_oauth
. If you followed my instruction, then the paths should be../public.key
and../private.key
. Also setting token expiration time from 300 to 86400 is a good idea. - Create a Client Application by going to:
/admin/config/services/consumer/add
. Remember what you've set inNew Secret
field value andUUID
value, which is shown after saving. These values will be used in the Vue app. - To make REST endpoints (POST, PATCH, DELETE) work, go to
/admin/config/services/jsonapi
and select Accept all JSON:API create, read, update, and delete operations.. Make sure that user has permissions to do just that.
After this, Drupal should be ready to go.
This is an important issue I've encountered. If Vue app and Drupal REST endpoints are hosted in different domains, you need to enable CORS in Drupal. Here is how you do it:
- Copy
sites/default/default.services.yml
tosites/default/services.yml
. - Edit the
sites/default/services.yml
to look like this: https://gist.github.com/elaman/9bda6ba947fecd8569c655282439a776 - Flush all caches.
Since we are using OAuth 2.0 as our authentication method, the only REST endpoint for auth we will use is /oauth/token
. This endpoint can be used to login and to refresh the token.
To use /oauth/token
endpoint for login you must do POST
request, with headers Content-Type: application/x-www-form-urlencoded
and request body must contain following keys:
grant_type
with valuepassword
username
andpassword
, which user that will be logging it.client_id
andclient_secret
, which are values from step 4 in Drupal / Installation & configuration section.
This will return access_token
and refresh_token
. access_token
should be used for all further HTTP request as Bearer {access_token}
.
To use /oauth/token
endpoint for a token refresh you must do POST
request, same as for Login, but two changes:
- No
username
andpassword
in the request body. - Add
refresh_token
stored from the Login request in the request body.
JSON:API has only two requirements:
- All the requests need authentication, which is
Bearer {access_token}
in the request header. - All requests must have
Content-Type: application/vnd.api+json
in the header.
Please look at the link bellow for more detailed descriptions of GET, POST, PATCH and DELETE requests.
I assume you know how Vue, Vuex, and Axios works, so the rest will be explained in code comments. Instead, I'm going to describe the configuration and building of existing code.
- Clone the git repository I've provided and run
yarn install
. - Create
.env.local
file in the folder. - Set
VUE_APP_API_URL
as your Drupal installation URL. - Set
VUE_APP_CLIENT_ID
asUUID
value from step 4 in Drupal / Authentication & Rest section. - Set
VUE_APP_CLIENT_SECRET
asNew Secret
value from step 4 in Drupal / Installation & configuration section. - Run
yarn serve
oryarn build
.