0

I have a site with Drupal 7 backend and Angular 8 front end.

I use services on Drupal 7, as we I try to access to these services with postman that is possible.

First I get a token and then by that token I get a sessionId and use it on the next request to get user info as a test.

But when I try the same why on Angular first I got the error that not allowed to set Cookie on less secure way.

So what is the steps to authenticate the remote site with Drupal 7?

POST man requests

get token

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  redirect: 'follow'
};

fetch("tma:81/api/search/news_item/user/token.json", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Get sessid

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("X-CSRF-Token", "w9Nqqjb0FItm9C1TKvjpFSwDXsFpdLhfq_ZeGMdBmZg");

var formdata = new FormData();
formdata.append("username", "siteadmin");
formdata.append("password", "admin");

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: formdata,
  redirect: 'follow'
};

fetch("tma:81/api/search/news_item/user/login.json", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Get user info

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("X-CSRF-Token", "w9Nqqjb0FItm9C1TKvjpFSwDXsFpdLhfq_ZeGMdBmZg");
myHeaders.append("Cookie", "6E0Vc9VEPHLMUQ4tBQagxhHSJHJfSpchMLli8YVKRoE");

var requestOptions = {
  method: 'GET',
  headers: myHeaders,
  redirect: 'follow'
};

fetch("tma:81/api/search/news_item/user/1", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

In same step I try with Angular

  apiUrl = "http://tma:81/api/search/news_item/";
  token = null;
  cookie = this.cookieService.get('cookie');

  getToken() {
    this.token = this.httpClient.post(`${this.apiUrl}user/token.json`, {
      headers: new HttpHeaders({
        "Content-Type": "application/json",
      })
    });
    return this.token;
  }

  auth(formdata) {

    const body = JSON.stringify(formdata);    
    const resp = this.httpClient.post(`${this.apiUrl}user/login.json`, body,{
      headers: new HttpHeaders({
        "Content-Type": "application/json",
        "X-CSRF-Token": this.token,
      })
    });
    return resp;
  }

  loadNews() {


    // const body = JSON.stringify(filterData);
    const resp = this.httpClient.get(`${this.apiUrl}user/1`, {
      headers: new HttpHeaders({
        "Content-Type": "application/json",
        "X-CSRF-Token": this.token,
        "Cookie": this.cookieService.get('cookie'),
      })
    });
    console.log(resp);

    return resp;
  }

the angular subscriber for getting token and sessid

doAuth() {
    this.appService.getToken().subscribe(
      result => {        
        var formdata = {
          "username" : "siteadmin",
          "password": "admin"
        }

        this.appService.auth(formdata).subscribe(
          result => {
            var date = new Date();
            // Set expiration time for the cookie.
            date.setTime(date.getTime() + 600 * 1000);
            this.cookieService.set("cookie", result["sessid"], date); 
          },
          error => {
            console.log(error);
          },
        )
      },
      error => {
        console.log(error);
      }
    );
  }

and finally the subscriber to fetch user info

this.appService.loadNews().subscribe(
      result => {
        console.log(result);
      },
      error => {
        console.log(error);
      },
    );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.