【Electron】给你的electron应用添加一个邮箱验证找回密码功能

468 阅读2分钟

本文已参与「新人创作礼」活动, 一起开启掘金创作之路。

一、前言

本篇主要介绍如何使用electron+node实现发送邮件的功能,可用于账户验证、密码找回、以及群发邮件通知的功能。

二、实现方式

我们主要通过node的nodemailer这个插件来实现发送邮件功能。点击查看官网

准备工作

  1. 安装依赖
npm install nodemailer
// or
yarn add nodemailer
  1. 配置一个发送邮件的邮箱

这里我使用的是163的邮箱。首先登录邮箱,找到设置,如图

image.png

点击POP3/SMTP/IMAP,进入页面后点击开启,如图所示

image.png

之后会有一个安全确认,点击继续,然后另一个弹框是让你扫码发送短信,发送完短信之后,点击我已发送,会给你一个授权密码,弹窗如下

image.png

这个密码记得保存一下。

另外服务器地址在这里

image.png

以上我们准备工作就做好了。

发送邮件

首先我们创建一个js文件用于存放邮件发送逻辑

// ElectronEmail.js

import { ipcMain } from 'electron'

const nodemailer = require('nodemailer');

//创建一个SMTP客户端配置实例
const transporter = nodemailer.createTransport({
  host: 'smtp.163.com', // 这是163的邮箱host(准备工作中说的服务器地址)
  port: 465, // smtp 端口
  secure: true, // 如果是 true 则port填写465, 如果 false 则可以填写其它端口号
  auth: {
    user: '*******@163.com', // 发送邮件的邮箱名
    pass: '********', // 邮箱的授权码(准备工作中获取),也可以使用邮箱登陆密码
  },
})
export const handleEmail = () => {
  // 这里是监听发送邮件的命令arg,可以通过渲染进程用户输入来传递接收人、主体、内容等信息
  ipcMain.on('sendEmail', (e, arg) => {
    console.log('sendEmail===main', arg)
    transporter.sendMail({
        from: '*****@163.com', // 发送人邮箱
        to: arg.recipient // 接收人邮箱,多个使用数组或用逗号隔开
        subject: arg.title, // 主题
        // text: '你好世界', // 邮件正文 可以为 HTML 或者 text 
        html: arg.html
    })
  })
}

之后在background.js中引入

import {handleEmail} from './electron-config/ElectronEmail.js'
// 在app.ready之后引入
handleEmail()

渲染进程调用方法如下

<template>
  <div id="app">
    <el-button type="primary" @click="sendEmail()">发送邮件</el-button>
  </div>
</template>
<script>

export default {
  name: 'App', 
  methods: {
    sendEmail () {
      // 这里根据业务需求,选填传递的参数
      let params = {
          recipient: '*****@163.com',
          title: '密码找回'
          html: `<h1>您好:</h1>
                 <p style="font-size: 18px;color:red;">
                    您的验证码为:
                    <span style="font-size: 16px;color:#f00;">11111</span>,
                    您当前正在某某的个人博客网站注册账号,验证码告知他人将会导致数据信息被盗,请勿泄露
                 </p>`
      }
      window.ipcRenderer.send('sendEmail', params)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  width: 100%;
  height: 100%;
}
</style>

以上我们就实现了关于electron应用的邮箱验证功能,可以根据业务需求,做更多的关于邮箱的事情,这里咱们只举例这一种,其他的情况跟本篇介绍类似。

三、后记

本篇主要是结合electron应用本身集成了node,从而可以不用再搭建node服务,可以直接在主进程中使用相关功能,而实现的邮件发送功能。

本篇完结! 撒花! 感谢观看! 希望能帮助到你!