18年11月07日

Mailchimp API 自架伺服器實現AJAX請求

前言

本來我使用MailChimp這類email marketing服務是想避免自架伺服器好讓我能省一點錢,可惜它跟大部份公司的做法都是要redirect到其他頁面再填寫表格的(以安全性和防spamming的角度我是能理解啦),想要一個簡簡單單輸入個email就能訂閱的表格其實不太簡單!

用MailChimp做免費仔

MailChimp本來就有免費的plan,而且它的免費用量足夠給一些剛起步的網站,界面用起來也不錯,這裡說一下另一家叫MailJet的基本上付合我的要求而且不用設伺服器,但因為界面太糟糕而且各種奇怪設定問題所以決定不採用…

事前準備

  • 一個MailChimp帳戶
  • 一張Contact List
  • 一條MailChimp API Key
  • 一點Node.js的知識
  • 一台伺服器(我的是Raspberry Pi 3)

取得API Key

怎樣註冊MailChimp我就不說了,Contact List可以在Lists頁面建立,API Key可以在Account頁面建立,詳情請看官方教學

取得data center位置和API root

取得API Key之後我們首先要知道自己帳號的data center位置,登入MailChimp後看看URL的位置最前那段就是data center

以下例子的<dc>us18

https://us18.admin.mailchimp.com/

所以API root就是

https://us18.api.mailchimp.com/3.0

取得List ID

如果你還沒有Contact List請到這裡建立一張,然後我們可以用API取得Contact List的ID,最簡單的方法是用curl

Copy Code

curl https://<dc>.api.mailchimp.com/3.0/lists --user 'anystring:<api-key>'

修改成你的設定,你會收到一串像這樣的JSON,當中的id就是List ID,先把它記著我們之後要用到

Copy Code

{
  "lists": [
    {
      "id": "12345abcde",
      "web_id": 12345,
      "name": "auphone.net",
      ...
    }
  ]
}

安裝Node.js

如果還沒有Node.js,建議使用nvm安裝

Linux / MacOS用戶

https://github.com/creationix/nvm

Windows用戶

https://github.com/coreybutler/nvm-windows

Nodejs伺服器原碼

先附上原碼,需要整個project可以到我的Github下載

https://github.com/auphone/simple-mailchimp-api-server

NPM模組

Copy Code

npm init
npm install express cors body-parser request request-promise
touch index.js

index.js與設定

你需要把index.js內的config改成之前取得的dc位置和api key

Copy Code

const rp = require('request-promise');
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');

// Change to your MailChimp config
const config = {
  dc: '<dc>',
  apiKey: '<your-api-key>',
  listId: '<your-list-id>'
};

// Express
const app = express();
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// API
app.post('/subscribe', (req, res) => {
  const { email } = req.body;
  if (!email) {
    return res.status(422).send('Missing Parameter: email');
  }
  rp({
    method: 'POST',
    uri: `https://${config.dc}.api.mailchimp.com/3.0/lists/${
      config.listId
    }/members`,
    headers: {
      Authorization: `Basic ${new Buffer(`anystring:${config.apiKey}`).toString(
        'base64'
      )}`
    },
    body: {
      email_address: email,
      status: 'subscribed'
    },
    json: true
  })
    .then(result => {
      res.send('OK');
    })
    .catch(err => {
      res.status(400).send(err);
    });
});

app.listen(config.port || 3000, () => {
  console.log('server started');
});

運行伺服器

Copy Code

node .

使用方法

最簡單是使用html + 純js做HTTP請求

index.html

Copy Code

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <form onsubmit="subscribe()">
    <input id="sub-email" type="email" required>
    <button type="submit">Subscribe</button>
  </form>
  <script src="./script.js"></script>
</body>
</html>

script.js

Copy Code

function subcribe() {
  const email = document.getElementById('sub-email').value;
  const data = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json; charset=utf-8'
    },
    body: JSON.stringify({ email })
  };
  fetch('http://localhost:3000/subscribe', data).then(() => {
    // Do Something here
  });
  return false;
}

資料補充

客戶端的請求

整個伺服器就只有一個POST call,也沒有任何Auth method,要怎樣使用請自行斟酌

Copy Code

http://localhost:3000/subscribe

這裡我只接收email一個parameter,實際上MailChimp有更多的選項

Copy Code

{
  email: xxx@example.com
}

伺服器端請求

因為CORS的關係不能使用客戶端直接API請求,就算可以你也不想公開你的API Key吧?回正題,這個伺服器請求會只接把Email傳到MailChimp,而且status會即時變為已訂閱,如有需要請自行更改

Copy Code

body: {
  email_address: email,
  status: 'subscribed'
}

DEMO

為何不訂閱我的網誌看看?(ゝ∀・)b