概要
kintone标准功能里已经包含了发送通知的功能,通常我们给kintone用户发送通知的时候,很少用到邮件。但是也有某些场合,我们需要给kintone用户以外的人发送邮件。所以这次我们使用插件,来发送邮件。
申请SendCloud帐号
kintone 本身不带有E-mail的功能,所以我们可以使用外部的产品。这次我们来尝试下SendCloud。
点击首页里的注册按钮,就会出现下面这样的注册页面。
获取API key
SendCloud是收费的,但是有每天10封邮件的免费额。
注册成功进入系统后,我们会看到已经有一个测试帐号API_USER被创建了。
当然如果您想的话,也可以自己新创建一个^^
在SendCloud里,发送邮件时主要验证API_USER和API_KEY的值组合。
所以,我们可以点击 “更多API_USER和API_KEY设置” 按钮,进入具体的设置页面。
点击 “生成新的API_KEY”后,会弹出对话框。
选择您想要的用户名,然后输入密码和验证码后,点击 ”确认” 键后,就会自动生成新的API_KEY。
需要说明的是:
在15分钟内,原API_KEY和新API_KEY均有效,15分钟后原API_KEY就失效了。
另外,API_KEY将永久无法二次显示,所以需要大家截图或复制,并妥善保管好API_KEY。
好了,SendCloud端的准备我们做好了。
插件准备
这次我们使用插件来发送邮件。关于插件的基本开发方法,在下面的这篇文章里,做了比较详细的解说。
大家可以关注这篇文章:
文件构成
manifest.json
给插件设置了中日英的文言。
{ "manifest_version":1, "version":1, "type":"APP", "name":{ "ja":"SendCloud for kintone", "en":"SendCloud for kintone", "zh":"SendCloud for kintone" }, "description":{ "ja":"kintoneからSendCloudを使用してメールを送信するためのプラグインです。", "en":"Plugin, which use SendCloud to send E-mail from kintone.", "zh":"使用SendCloud发送kintone邮件的插件。" }, "icon":"img/icon.png", "homepage_url":{ "ja":"https://cybozudev.kf5.com/hc/kb/article/1121966/", "en":"https://cybozudev.kf5.com/hc/kb/article/1121966/", "zh":"https://cybozudev.kf5.com/hc/kb/article/1121966/" }, "desktop":{ "js":[ "https://js.cybozu.cn/jquery/2.1.3/jquery.min.js", "js/desktop.js" ] }, "mobile":{ "js":[ "https://js.cybozu.cn/jquery/2.1.3/jquery.min.js", "js/desktop.js" ] }, "config":{ "html":"html/config.html", "js":[ "https://js.cybozu.cn/jquery/2.1.3/jquery.min.js", "https://js.cybozu.com/jsrender/0.9.90/jsrender.min.js", "js/config.js" ], "css":[ "css/51-modern-default.css", "css/config.css" ], "required_params":[ "apiKey", "apiUser" ] } }
插件设置页面
config.js
jQuery.noConflict(); (function($, PLUGIN_ID) { 'use strict'; $(document).ready(function() { var terms = { 'ja': { 'apiUser': 'SendCloudのapiUser', 'apiKey': 'SendCloudのapiKey', }, 'en': { 'apiUser': 'SendCloud apiUser', 'apiKey': 'SendCloud apiKey', }, 'zh': { 'apiUser': 'SendCloud的apiUser', 'apiKey': 'SendCloud的apiKey', } }; // To switch the display by the login user's language var lang = kintone.getLoginUser().language; var i18n = (lang in terms) ? terms[lang] : terms['en']; var configHtml = $('#sendcloud-plugin-config').html(); var tmpl = $.templates(configHtml); $('div#sendcloud-plugin-config').html(tmpl.render({'terms': i18n})); var config = kintone.plugin.app.getConfig(PLUGIN_ID); if (config && config.apiUser && config.apiKey) { var apiUser = config.apiUser; $('#sendcloud-plugin-api-user').val(apiUser); var apiKey = config.apiKey; $('#sendcloud-plugin-api-key').val(apiKey); } // Click "Save" to enter the settings $('#sendCloud-plugin-submit').click(function() { var apiUser = $('#sendcloud-plugin-api-user').val(); var apiKey = $('#sendcloud-plugin-api-key').val(); if (!apiUser) { alert("请输入apiUser的值"); } if (!apiKey) { alert("请输入apiKey的值"); } var config = { 'apiUser': apiUser, 'apiKey': apiKey }; kintone.plugin.app.setConfig(config); }); // Click "Cancel" to return to the previous page $('#sendCloud-plugin-cancel').click(function() { if (window.confirm('Are you sure to cancel this setting?')) { history.back(); } else { return; } }); }); })(jQuery, kintone.$PLUGIN_ID);
我们使用了中日英三个语言,可以自由切换
用户页面开发
用户页面,我们使用了SendCloud的API。SendCloud的API式样可以参考下面的链接:
http://www.sendcloud.net/doc/email_v2/send_email/
例)
POST | http://api.sendcloud.net/apiv2/mail/send |
desktop.js
jQuery.noConflict(); (function($, PLUGIN_ID) { 'use strict'; // create form var createFormData = function(data) { var array = []; for (var key in data) { var val = data[key]; if ($.isArray(val)) { for (var i = 0; i < val.length; i++) { array.push(key + '[]=' + encodeURIComponent(val[i])); } } else { array.push(key + '=' + encodeURIComponent(val)); } } return array.join('&'); }; window.kintonePlugin = {}; window.kintonePlugin.sendcloud = { sendMail: function(to, cc, bcc, mailFrom, subject, plain, html, callback, errback) { var data = {}; var config = kintone.plugin.app.getConfig(PLUGIN_ID); if (config && config.apiUser && config.apiKey) { data.apiUser = config.apiUser; data.apiKey = config.apiKey; } data.to = to; if (cc) { data.cc = cc; } if (bcc) { data.bcc = bcc; } data.from = mailFrom; data.subject = subject; data.plain = plain; if (html) data.html = html; var formData = createFormData(data); var url = 'http://api.sendcloud.net/apiv2/mail/send'; kintone.plugin.app.proxy(PLUGIN_ID, url, "POST", {'Content-Type': 'application/x-www-form-urlencoded'}, formData, function(resp, status, header) { if (callback) { callback.call(this, resp, status, header); } }, function(error) { if (errback) { errback.call(this, error); } }); } }; })(jQuery, kintone.$PLUGIN_ID);
代码sample:
试一下
将下载好的安装包导入到kintone的系统管理页面。
在待安装的应用的设置页面上安装插件,这里我任意找了个自己环境里的应用。
“kintone活动日历插件的作成范例【后篇】 ”的教程里介绍了插件的安装方法和动作确认,大家可以参考一下。
装好插件后,打开插件的设置页面。
在插件设置页面输入SendCloud的apiUser和apiKey。
点击 “OK” 按钮,保存。
另外在 应用设置 -> “通过JavaScript/CSS自定义” 里加上自定义js文件(文件名可以任意取),具体方法可以参考:
自定义js
如果大家测试的话,记得把 to@domain.com 替换成希望收到E-mail的地址。
pc版自定义js:
(function() { "use strict"; kintone.events.on("app.record.create.submit", function(e) { return new kintone.Promise(function(resolve, reject) { kintonePlugin.sendcloud.sendMail( 'to@domain.com', null, null, 'from@domain.com', 'E-mail', '您有新的邮件!', null, function(resp) { resolve(e); }, function() { event.error = '邮件发送失败'; reject(e); }); }); }); })();
手机版自定义js:
(function() { "use strict"; kintone.events.on("mobile.app.record.create.submit", function(e) { return new kintone.Promise(function(resolve, reject) { kintonePlugin.sendcloud.sendMail( 'to@domain.com', null, null, 'from@domain.com', 'E-mail', '您有新的邮件!', null, function(resp) { resolve(e); }, function() { event.error = '邮件发送失败'; reject(e); }); }); }); })();
分别上传这两段自定义js到“JavaScript文件(电脑专用)”和“JavaScript文件(智能手机专用)”后,
点击 “保存”,且更新应用,我们的kintone就在电脑和手机端都实现了添加记录后自动发送邮件的功能。
下面是收到的邮件样子:
总结
这次我们在插件设置页面里输入apiUser和apiKey的方式来发送邮件。但是实际使用的时候,由于在浏览器端可以看到 apiUser和apiKey,并不是很安全。所以我们不是很推荐用这种方式来发送邮件。
下一篇我们将介绍,将apiUser和apiKey保存在服务器端,来发送邮件的方法,这种方式比较安全,敬请期待。