Propos
Cette Function va nous permettre de nous connecter en tant qu'utilisateur à Drupal 8 via une application react en mode couplage.
Libraries
Si nous observons le fichier libraries de notre module, nous remarquons, qu'il prends en charge en dépendance, jQuery (oui, certains dirons que charger Jquery dans une Application react, c'est étrange, mais, si je veux profiter des fonctionnalités de ma Toolbar Drupal, je suis obligé de charger Jquery, donc, bientôt on trouveras d'autres solutions, on s'y attache...) -- et que la font est chargée à partir de Drupal, au niveau de la compilation et de l'appelle de la font, c'est plus easy.
/nom_du_module.libraries.yml
react:
js:
js/nom_du_module.js: {}
react/dist/app.bundle.js: {}
css:
component:
'https://fonts.googleapis.com/css?family=PT+Serif|Open+Sans:300,400,600,700,800': { type: external }
'css/nom_du_module.css': {}
dependencies:
- core/jquery
- core/drupal.ajax
- core/drupal
- core/drupalSettings
- core/jquery.once
Interface
Juste pour info, dans le fichier nom_du_module.js du module, je vais préparer une interface de configuration Drupal, qui permettra d'échanger des objets et functions avec ReactJS.
/js/nom_du_module.js
/**
* @file
* Attaches behaviors for the nom du module.
*/
(function ($, Drupal, drupalSettings) {
'use strict';
/**
* Namespace for nom du module related functionality.
*
* @namespace
*/
Drupal.App= {
/**
* The
*/
// Dans cet objet nous allons pouvoir stocker des configurations
// (Le nom, prénom et le portrait de l'utilisateur connecté par exemple)
// drupal et les partager dans ReactJs a partir de l'élément
// window de Javascript.
desktop: {},
};
Drupal.App.desktop = {
// INITIALIZE APP
initialize: function () {
console.log('Initialize App');
},
// Example de function partagé
callFunctionAjaxExample: function (element = null) {
if(element) {
return 'example';
}
},
};
})(jQuery, Drupal, drupalSettings);
capture :Retour du console.log(window)
Fonctions Drupal info vers ReactJs
Puis dans mon App ReactJs, je vais faire un fichier Utils avec des Functions reactJs.
getCurrentPath() va nous permettre de récupérer les informations url de la page Drupal active.
getCurrentUser() va nous permettre de récupérer les informations de l'utilisateur connecté.
getDrupal() renverra l'objet javascript Drupal, c'est très intéressant, c'est ici que l'on découvre que l'on peut appeler toutes les functions core et module de Drupal, notament les AjaxCommand() ou encore la fonction t(), de traduction, dans react, BIG !!!
getDrupalSettings() renverra l'objet DrupalSettings
getDrupalApp() renverra toutes les variables que l'on aura stocker a partir de Preprosess ou autres Drupal.
/react/src/utils/BuildFunct.js
/*
* getCurrentPath()
*
* retun Object drupalSettings.path
*/
export function getCurrentPath() {
if (window) {
return window.drupalSettings.path;
}else {
return null
}
}
/*
* getCurrentUser()
*
* retun Object window.drupalSettings.user
*/
export function getCurrentUser() {
if (window) {
return window.drupalSettings.user
} else {
return null
}
}
/*
* getDrupalSettings()
*
* retun Object window.drupalSettings
*/
export function getDrupalSettings() {
if (window) {
return window.drupalSettings
} else {
return null
}
}
/*
* getDrupal()
*
* retun Object window.Drupal
*/
export function getDrupal() {
if (window) {
return window.Drupal
} else {
return null
}
}
/*
* getDrupal()
*
* retun Object window.DRUPAL.App.Desktop
*/
export function getDrupalApp() {
if (window) {
return window.DRUPAL.App.Desktop
} else {
return null
}
}
Connexion Utilisateur
Nous avons créer notre Class Login ReactJs et notre formulaire (pas ici, mais je vous fais confiance pour l'avoir fais !!!), je passe à la function de connexion.
/react/src/container/HomeLogin.js
loginForm = (event) => {
event.preventDefault();
// App API_END_POINT
const kidsSettings = getAppSettings();
const appPath = getCurrentPath();
const HTTP = 'http://';
const API_END_POINT = kidsSettings.host + kidsPath.baseUrl + kidsPath.pathPrefix + 'user/login?_format=json';
// On prépare un objet, avec les informations que l'utilisateur a renseigné dans la form.
var payload = {
"name": this.state.username,
"pass": this.state.password
}
// Vérification Sommaire nous permettant de ne pas envoyer du vide dans la requete.
if (this.state.username == '' && this.state.password == '') {
console.log('username and password empty');
} else if (this.state.password == '' && this.state.username != '' ) {
console.log('Password empty');
} else if (this.state.username == '' && this.state.password != '' ) {
console.log('Username empty');
}else {
// Si les vérifications ne renvoie pas d'erreur
// Envoyons la requete.
axios.post(API_END_POINT, payload)
.then(function (response) {
console.log(response);
if (response.status == 200) {
window.location.href = '/';
console.log("Login successfull");
console.log(response.data);
}else {
console.log("Username or Password does not exists");
}
})
.catch(function (error) {
console.log(error);
});
}
}
Pour info, le csrf_token et le logout_token on été modifé, faite attention ane pas transmettre des tokens valides, Facebook s'en mord les doigts.
Information utilisateur
Si vous souhaitez charger un utilisateur, cela fonctionne pareil.
requestInfoUser = (event, type) => {
event.preventDefault();
// End_point_drupal
// /rest/session/token
// /user/login_status?_format=json
// /user/logout?_format=json&token=asdasd09a8sdaslkdasl-asdasdklsajdlkasdjlksj
// App API_END_POINT
const kidsSettings = getLesKidsSettings();
const kidsPath = getCurrentPath();
const HTTP = 'http://';
const API_END_POINT = kidsSettings.host + kidsPath.baseUrl + kidsPath.pathPrefix + 'user/6?_format=hal_json';
axios.get(API_END_POINT)
.then(function (response) {
console.log(response);
if (response.status == 200) {
console.log(response.data);
}
else {
console.log("Oups somthings is wrong!");
}
})
.catch(function (error) {
console.log(error);
});
}
Clean Cache
Noter que, si vous souhaitez propager la validation de la connexion à Drupal, il faudra faire en sorte de recharger la page.