Cloud Functions를 이용한 문의 기능 구현 [react.js]

이번에, react.js*firebase인 제품을 개발하고 있을 때,
문의 폼의 구현이 필요했으므로 여기에 구현의 순서를 두어 둡니다.
일반적인 gmail을 메일 서버로 메일 전송 기능을 실현시킵니다.

또 실장에 있어서, 이 기사 를 참고로 했습니다. 뭐라면 모두 여기에 기재되어 있습니다.

1.firebase project 설정

이 기사 을 확인해 주십시오.

2.function 설정

functions/index.js

const functions = require("firebase-functions");
const nodemailer = require("nodemailer");
const gmailEmail = functions.config().gmail.email;
const gmailPassword = functions.config().gmail.password;
const adminEmail = functions.config().admin.email;

// 送信に使用するメールサーバーの設定
const mailTransport = nodemailer.createTransport({
  service: "gmail",
  auth: {
    user: gmailEmail,
    pass: gmailPassword
  }
});

// 管理者用のメールテンプレート
const adminContents = data => {
  return `以下内容でホームページよりお問い合わせを受けました。
お名前：
${data.name}
メールアドレス：
${data.email}
内容：
${data.content}
`;
};

exports.sendMail = functions.https.onCall((data, context) => {
  // メール設定
  let adminMail = {
    from: gmailEmail,
    to: adminEmail,
    subject: "ホームページお問い合わせ",
    text: adminContents(data)
  };

  // 管理者へのメール送信
  mailTransport.sendMail(adminMail, (err, info) => {
    if (err) {
      return console.error(`send failed. ${err}`);
    }
    return console.log("send success.");
  });
});

3. 프론트(react.js) 설정

react 프로젝트 내에서 firebase(Cloud Functions)를 이용할 수 있도록 아래의 설명을 잊지 마세요.

firebase/firebase.js

import firebase from 'firebase';
import 'firebase/auth';

const config = {
    apiKey: "＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊",
    authDomain: "＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊",
    databaseURL: "＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊",
    projectId: "＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊",
    storageBucket: "＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊",
    messagingSenderId: "＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊"
}

firebase.initializeApp(config);

아래는 문의 양식입니다.

문의 양식

import React, { Component } from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button'

const firebase = require("firebase");
require("firebase/functions");


class ContactForm extends Component {
  constructor(){
    super()
    this.onSubmit = this.onSubmit.bind(this)
  }

  onSubmit(e){
    e.preventDefault()
    let data = {}
    data.name = e.target.name.value
    data.email = e.target.email.value
    data.content = e.target.content.value
    let sendMail = firebase.functions().httpsCallable('sendMail');
    sendMail(data)
    e.target.name.value = ""
    e.target.email.value = ""
    e.target.content.value = ""
    e.target.value = ""
  }

  render() {
    const textFieldStyle = {
      display: "flex",
      width: "300px",
    }

    const contactForm = {
      display: "flex",
      flexDirection: "column", 
      alignItems: "center",
      marginTop: "100px",
    }


    return (
      <React.Fragment>
        <div style={contactForm}>
          <h2>お問い合わせ</h2>
          <form onSubmit={this.onSubmit}>
            <TextField name="name" label="お名前" type="text" required style={textFieldStyle}  />
            <TextField name="email" label="メールアドレス" type="mail" required style={textFieldStyle}   />
            <TextField
              required
              name="content"
              label="お問い合わせ内容"
              multiline
              rows="8"
              margin="normal"
              variant="outlined"
              style={textFieldStyle} 
            />
            <Button variant="contained" color="primary" type="submit" style={textFieldStyle} >
              送信
            </Button>
          </form>
        </div>
      </React.Fragment>
    )
  }   
}

export default ContactForm

material-ui를 추가하지 않은 분은 여기

$ npm install @material-ui

이상이 됩니다.