Retour à l'accueil

Réceptionner un formulaire avec Strapi et Gmail

L’atout de Strapi, c’est qu’en plus d’être un très bon CMS, il a été pensé pour être une base à votre développement. C’est - relativement - peu mis en en avant, mais il existe un CLI qui permet de générer des plugins, controllers,…

Créer un controller et une route

npm run strapi generate

De là, on a toute une sélection possible. Dans le cadre de ce post, on va créer une API.

? Strapi Generators (Use arrow keys)
❯ api - Generate a basic API
  controller - Generate a controller for an API
  content-type - Generate a content type for an API
  plugin - Generate a basic plugin
  policy - Generate a policy for an API
  middleware - Generate a middleware for an API
  service - Generate a service for an API

Donnez lui un nom et ne créez pas de plugins.

Installer le provider

npm i @strapi/provider-email-nodemailer

Cette librairie va nous permettre de se connecter à un mail via SMTP (et donc, à Gmail)

Après l’avoir installé, il faut ajouter la configuration : config/plugins.js

module.exports = ({ env }) => ({
  email: {
    config: {
      provider: "nodemailer",
      providerOptions: {
        host: "smtp.gmail.com",
        port: 465,
        auth: {
          user: "gmail_username",
          pass: "gmail_password",
        },
      },
      settings: {
        defaultFrom: "[email protected]",
        defaultReplyTo: "[email protected]",
      },
    },
  },
});

Edit 13/09/2022: Attention, j’ai découvert depuis que GMAIL peut bloquer la connexion avec mail/mot de passe, mais vous pouvez utiliser vos fournisseur de mail comme Infomaniak.

Envoyer le mail depuis l’API

Notre API créée plutôt a générée 3 fichiers:

✔  ++ /api/contact-form/routes/contact-form.js
✔  ++ /api/contact-form/controllers/contact-form.js
✔  ++ /api/contact-form/services/contact-form.js

Depuis le fichier de routes (routes/contact-form.js), on a accès à un array de router et le controller qui sera appelé.

module.exports = {
  routes: [
    {
      method: "POST",
      path: "/contact-form",
      handler: "contact-form.sendEmail",
      config: {
        policies: [],
        middlewares: [],
      },
    },
  ],
};

Dans notre cas, on va faire une méthode POST sur le handler sendEmail. Par défaut, le handler va aller chercher la fonction dans l’API auquel il se réfère (donc contact-form -> sendEmail).

Dans notre fichier controllers/contact-form.js, on va donc créer cette fonction.

module.exports = {
  sendEmail: async (ctx, next) => {
    try {
      //Récupérer les données de la requête
      const { firstname, name, message, phone, email } = ctx.request.body;

      //Envoyer le mail avec le provider Strapi
      await strapi.plugins["email"].services.email.send({
        to: "DESTINATAIRE",
        from: "SOURCE",
        cc: "",
        bcc: "",
        replyTo: "",
        subject: "Message depuis Strapi",
        text: `${name} ${firstname} (${email}, ${phone}) a écrit : "${message}"`,
        html: `${name} ${firstname} (${email}, ${phone}) a écrit : "${message}"`,
      })(
        //Envoyer une réponse
        (ctx.body = {
          status: "success",
        })
      );
    } catch (err) {
      ctx.body = err;
    }
  },
};

Donner les permissions

Par défaut, Strapi va restreinte votre route. Vous devez donc vous connecter à votre admin panel afin d’ajouter le droit de poster sur la route au rôle public. Depuis cette interface, vous pouvez gérer individuellement les droits de chaque fonction.

http://localhost:1337/admin/settings/users-permissions/roles

Maintenant, en effectuant cette requête depuis une page avec du JavaScript, un mail va être envoyé!

await fetch(`http://localhost:1337/api/contact-form`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    firstname,
    name,
    email,
    message,
    phone,
  }),
});