sendgrid와 Firebase claud functions로 메일 만들기
다음 모드가 생성되었습니다.
순서는 간단히 할 수 있는 순서다.
전제 조건
컨디션
차리다
컨텐트
http 요청에서 메일 받기
1. sendgrid에서 appiKey 가져오기
const functions = require("firebase-functions");
const sgMail = require('@sendgrid/mail')
exports.sendMail=functions.https.onRequest(async (req,res)=>{
sgMail.setApiKey('*******************') //←sendgirdで生成したApi Key
res.set('Access-Control-Allow-Origin', '*');
const msg = {
to: '****@****.***', //←受信したいメールアドレス
from: req.query.mail,
subject: '問い合わせ',
text: req.query.content,
html: `<strong>${req.query.content}</strong>`,
}
sgMail
.send(msg)
.then(() => {
res.send('成功')
})
.catch((error) => {
res.send('失敗',error)
})
})
closud functions 제작 요청
?name=hibimosaku&[email protected]&content=test 추가 발송4. 결과
질의 테이블에서 메시지 수신
1. vue의 소스 코드
<template>
名前<input type="text" v-model="name"><br>
メール<input type="email" v-model="email"><br>
内容<input type="text" v-model="content"><br>
<button @click="submit">メール送信</button>
</template>
<script>
import { ref } from "vue";
import axios from "axios"
export default({
setup() {
const name=ref()
const email=ref()
const content=ref()
const submit=()=>{
axios({
baseURL: "https://us-central1********",//←上で作成したfunctionsのURL
method: 'post',
params:{
name:name.value,
mail:email.value,
content:content.value
}
})
.then(()=>{
console.log('成功')
})
.catch((e)=>{
console('失敗',e)
})
}
return{
name,
email,
content,
submit
}
},
})
</script>
3. 결과
메시지 템플릿화 후 메시지 수신
1. sendgrid에 템플릿 만들기
1-1.Legacy Templates 클릭
1-2.Create Template 를 클릭하고 name 을 입력한 후 Add Version 을 클릭합니다.
1-3.code Editor 를 선택하고 Continue 를 클릭합니다.
1-4.다음 코드를 입력하고 Save Template를 클릭하고 "←"를 클릭하십시오.
<html>
<head>
</head>
<body>
{{name}}様より問い合わせがありました。。
<br /><br/>
<p>内容</p>
<p>{{content}}</p>
<br /><br/>
</body>
</html>
2.cloud functions 코드 제작
const functions = require("firebase-functions");
const sgMail = require('@sendgrid/mail')
exports.sendMail=functions.https.onRequest(async (req,res)=>{
sgMail.setApiKey('*******************') //←sendgirdで生成したApi Key
sgMail.setSubstitutionWrappers('{{', '}}');
res.set('Access-Control-Allow-Origin', '*');
const msg = {
to: '****@****.***', //←受信したいメールアドレス
from: req.query.mail,
subject: '問い合わせ',
text: req.query.content,
html: `<strong>${req.query.content}</strong>`,
template_id: '***************', //←1-5.で取得したid
substitutions: {
name: req.query.test,
},
}
sgMail
.send(msg)
.then(() => {
res.send('成功')
})
.catch((error) => {
res.send('失敗',error)
})
})
"문의 형식에서 메일을 받기"와 동일
4. 만든 양식에서 보내기
5. 결과
자동 응답
제작 방법은'메일 문장을 템플릿화하고 메일을 수신한다'
<html>
<head>
</head>
<body>
{{name}}様。
<br /><br/>
<p>いつもお世話になっております。</p>
<p>内容受け付けました</p>
<p>回答は改めてご連絡いたします。</p>
<br /><br/>
<p>問い合わせ内容</p>
<p>{{content}}</p>
</body>
</html>
const functions = require("firebase-functions");
const sgMail = require('@sendgrid/mail')
exports.sendMail=functions.https.onRequest(async (req,res)=>{
sgMail.setApiKey('******************') //←sendgirdで生成したApi Key
sgMail.setSubstitutionWrappers('{{', '}}');
res.set('Access-Control-Allow-Origin', '*');
//メール受信内容
const msgRecieve = {
to: '*********', //受信先のメールアドレス
from: req.query.mail, //問い合わせ先からのメール
subject: `${req.query.name}様からの問い合わせ`,
text: req.query.content,
html: `<strong>${req.query.content}</strong>`,
}
//メール自動返信内容
const msgReply = {
to: req.query.mail, //自動返信先のメールアドレス
from: '*************', //受信先のメールアドレス
subject: `問い合わせありがとうございます`,
// text: req.query.content,
// html: `<strong>${req.query.content}</strong>`,
template_id: '3bfa8e5c-6e02-4cc4-9b64-fe2ba14aeac1',
substitutions: {
name: req.query.name,
content:req.query.content
},
}
await sgMail.send(msgRecieve)
await sgMail.send(msgReply)
.then(() => {
res.send('成功')
})
.catch((error) => {
res.send('失敗',error)
})
})
"문의 형식에서 메일을 받기"와 동일
4. 만든 양식에서 보내기
5. 결과
Reference
이 문제에 관하여(sendgrid와 Firebase claud functions로 메일 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/hibimosaku/articles/2d2fd9934f9113텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
