Headless drupal 8 + AngularJS + NodeJS

Events happening in the community are now at Drupal community events on www.drupal.org.
nemanja's picture

We are looking for the best way to create the authentication using Drupal 8 rest server, angular + nodejs...
We created drupal instance, angular app which is hosted on nodejs server, this way we have separated hosts. What we achieved is successful writing of data in drupal session table, but we cannot keep angular session alive... So what is the best way to do this?
Do you have any tips for integrating these technologies?
We would like when we log in to angular app and switch pages to keep the session alive on drupal and in ang. app...

Comments

I have a very similar

kimberlydb's picture

I have a very similar project. We originally had the webapp/Angular side separated out from the Drupal 8 side living on different ports but we ran into a lot of different CORS issues - authentication being one of them. We've now switched so that Drupal is a subdirectory of the webapp which solved a lot of those issues.

We use Basic Auth when initially logging in to Post to Drupal and then set the Session cookie. From there, the angular app can call data from the Drupal side of things because we have that session cookie set. On the Angular side, in my I have an auth interceptor and a auth service. In the auth service I verify that I have a valid user and CSRF token when checking to see if I am still logged in and as soon as I am unable to access Drupal data I consider the session dead and it logs the user out (they are fairly tightly coupled in this regard).

I had issues getting the session cookie set on the Drupal side so I'd be curious to know how you achieved it. I ended up patching with an 8.1 Drupal patch for a User Login Resource on the core rest module (does it count as hacking core if its a 8.1 patch?? I am considering refactoring this to a custom module as a custom endpoint so I don't have to worry about updates - but thats a //TODO)

As far as integration of these two technologies, I'm heavily utilizing the rest export views for my various content types. You can switch from the default entity view to fields to pull in specific values or relationships you need (useful for images as otherwise you just get the file id). I'm still in the early stages of my application as well, but I think I am over most of the large hurdles.

I'm not sure if this answered your question but I'd be happy to chat more about it.

Take a look at this patch

marthinal's picture

Take a look at this patch https://www.drupal.org/node/2403307 . I think this is what you need if you are searching for a cookie session.

I have created a module for angular and d8 but needs to be updated because missing a few services I think. Anyways you can take a look and hope it helps. https://github.com/marthinal/ngDrupal (only cookie session too). I would like to update the module if I have time next week.

Cheers!!

We are using

nemanja's picture

We are using https://github.com/clemens-tolboom/drupal-8-rest-angularjs
as starting point. In drupal REST we enable "User Login" (Supported formats
:hal_json, Authentication providers: cookie). Also we enable permission
"Access POST on User Login resource". After that, angular-nodejs was
able to send cookie login request to drupal. That request creates entry
in session table. Also we get response from drupal

Access-Control-Allow-Cred... true
Access-Control-Allow-Head... X-CSRF-Token, x-requested-with,
Content-Type, Origin, Authorization, Accept, client-security-token,
php_auth_user
, php_auth_pw
Access-Control-Allow-Meth... POST, GET, OPTIONS, DELETE, PUT, PATCH
Access-Control-Allow-Orig... *
Access-Control-Max-Age 1000
Cache-Control must-revalidate, no-cache, post-check=0, pre-check=0,
private
Connection Keep-Alive
Content-Language en
Content-Length 28
Content-Type application/json
Date Fri, 10 Jul 2015 19:02:08 GMT
Expires Sun, 19 Nov 1978 05:00:00 GMT
Keep-Alive timeout=5, max=99
Server Apache/2.4.7 (Ubuntu) PHP/5.5.9-1ubuntu4.9
Set-Cookie
SESS43aa7d73103958f3632d3bf9f8b637e0=rYZtYEFhNEGDUY3z6JJX8HBMkCj31Tq8tMP8QrOsggU;
expires=Sun, 02-Aug-2015
22:35:30 GMT; Max-Age=2000000; path=/; domain=.headless-drupal8.dev;
HttpOnly
X-Drupal-Cache-Contexts user.permissions
X-Drupal-Cache-Tags config:rest.settings
X-Powered-By PHP/5.5.9-1ubuntu4.9
X-UA-Compatible IE=edge
x-content-type-options nosniff, nosniff

Problem is that cookie is never been created on angular-nodejs page.

We applied this patch as well:
https://www.drupal.org/node/2403307

That's pretty funny they

travisc's picture

That's pretty funny they decided to implement Bartik as an Angular app. Too bad they didn't use a useful framework like Bootstrap or Foundation, I'm sure it would have been far more work though. Cool example project and worth a look for sure.

I cannot find the User login

cloudbull's picture

I cannot find the User login resource anymore, does it require other module to support ?

Doesn't Exist

tyler.frankenstein's picture

AFAIK, there is no user login resource, instead you "fake" submit the login form via the URL: https://www.drupal.org/node/2405657

CORS

nemanja's picture

At the beginning I was unsure about CORS cookie creation. But I found this example http://arunranga.com/examples/access-control/credentialedRequest.html
Request from arunranga.com triggers response from aruner.net and creates cookie.

It seems that cookies in CORS environment works. But I am still not sure what I am missing. Can anybody confirm that cookie can be created from different domain in CORS environment?

I am having issues getting

deja711's picture

I am having issues getting cookie authentication to work as well. Does anybody knows are there any working examples out there that I can use to see how this should be implemented? Or should I switch my efforts to just basic authentication.

Did you ever have any luck,

droti's picture

Did you ever have any luck, I've been struggling with with my cookie auth as well and am getting close to just using basic auth.

CORS & Cookies Config

rhclayto's picture

The key to getting CORS to work with cookies is to make sure the Access-Control-Allow-Credentials header is set to true as well as the Access-Control-Allow-Origin header. For example, you would put the below in your Apache config in the virtual host section for the backend site. If the backend is Drupal you may as well use the CORS module.

Example recipe

Header set Access-Control-Allow-Origin https://exampl.io:8989
Header set Access-Control-Allow-Credentials true
Header set Access-Control-Allow-Headers Content-Type
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"

I didn't think the CORS

droti's picture

I didn't think the CORS module was available for D8 yet. I did get this working but I also had to "Authorization" under Access-Control-Allow-Headers so right now it looks like this:

Header always set Access-Control-Allow-Origin "http://localhost:9000"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, PATCH, DELETE"
Header always set Access-Control-Allow-Headers: "Authorization, Content-Type"
Header always set Access-Control-Allow-Credentials: true

Then I make sure to pass the XSRF-TOKEN with all of my calls.

I'm using this patch

marthinal's picture

I'm using this patch https://www.drupal.org/node/2403307. Once you can log in then you need to request for the token at rest/session/token.

Each time you want to make a request to Drupal, then you need to use this token. I'm using Accept(application/hal+json), X-CSRF-Token(the token) and Content-Type(application/hal+json) headers.

Take a look at this example https://www.drupal.org/node/2076725 (POSTing a node). I recommend you to use a rest client (Advanced Rest Client for Chrome is an option) and then test different methods (POST, GET).

I also recommend you to verify that you have the correct permissions for rest module and others.

I didn't visit this group for

hadi farnoud's picture

I didn't visit this group for a long time. Is there any demo/video on this Headless Drupal thing? I'd love the idea of drupal as backend

I'd be interested as well.

dave-a's picture

I'd be interested as well. Helps to get newbies in this area gain traction faster.

Hadi jan

Any one have attempt with angular + D8 + oAuth

mrunwal's picture

Hello,
Anyone have tried Social_AUTH API using angular ?

Headless Drupal

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: