【Google API】Use Gmail API Send Mail(利用 Javascript 來寄 Email)

5月 11, 2018 , Posted by User31

---

起因來自於想在 Github Page 讓 User 留言能自動寄信給我。
但 Github Page 只能放 Html 網頁，不能使用 Server Side 只好使用 Javascript 來操作。

實驗結論

紀錄這次研究的過程，也許哪天用得到，也希望未來 Google 會有方法支援未登入使用。

操作步驟

1. 建立一個 Project
2. 申請 Gmail API
3. 建立憑證與金鑰
4. 授權帳號使用 Google API
5. JavaScript 實作

建立一個 Project

連接：Google Cloud Platform

建立 Project，專案名稱隨便取即可

申請 Gmail API

進入專案管理畫面，API 和服務 → 啟用 API 和服務

加入 Gmail API

建立憑證與金鑰

進入憑證畫面 (OAuth用戶端ID)

建立憑證

• 應用程式類型 → 網路應用程式
• 已授權的 JavaScript 來源 → http://localhost:8000
  (Ps.local端開發，使用預設，有其他正式網址也可以自行更改，驗證時會檢查網站位置)

產生憑證（重要）

• 用戶端ID = ClientID
• 用戶端密鑰本次未使用

產生金鑰（重要）

• 進入專案管理畫面，憑證 → 建立憑證 → API 金鑰
• 本金鑰為稍後用到的 API Key

授權帳號使用 Google API

也可以參考 Google 官方教學

步驟說明

1. 複製底下程式碼，並建立一個 html 檔案（記得更改ClientID)
2. 利用 Python 建立一個 Server
   (我用 python，亦可使用 IIS 或 Visual Studio 等開發環境，只要運行的網址符合第三步驟設定的 ex.http://localhost:8000)
3. 運行該頁面，並登錄Google帳號，以進行授權動作

步驟 1 - 建立 html 檔案，並修改 Client ID

程式碼摘要

<script type="text/javascript">//下載文件記得修改Client ID
var CLIENT_ID = ''; //步驟三的 Client ID
</script>

步驟 2 - 利用 Python 建立 Server

Python Simple Server Code

from http.server import HTTPServer, CGIHTTPRequestHandler
port = 8000
httpd = HTTPServer(('', port), CGIHTTPRequestHandler)
print("Starting simple_httpd on port: " + str(httpd.server_port))
httpd.serve_forever()

終端機執行

python3 -m 檔案名稱

步驟 3 - 運行該頁面，並登錄Google帳號

運行畫面

帳號授權

JavaScript 實作

程式碼摘要

<script type="text/javascript">
  var CLIENT_ID = 'Client ID';
  var API_KEY = 'API Key';
  var SCOPES = 'https://www.googleapis.com/auth/gmail.send';

  //進入畫面立即執行
  function handleClientLoad() {
     gapi.client.setApiKey(API_KEY);
     window.setTimeout(checkAuth, 10);
   }
   
   //檢查權限
   function checkAuth() {
      gapi.auth.authorize({
        client_id: CLIENT_ID,
        scope: SCOPES,
        immediate: true
      }, handleAuthResult);
     }
 
   //檢查權限結果
     function handleAuthResult(authResult) { 
   if(authResult &amp;&amp; !authResult.error) {
      loadGmailApi();
   }
   else{
      document.getElementById("warning-text").style.display = "";
      document.getElementById("send-div").style.display = "none";
   } 
  }

  //Load API
  function loadGmailApi() {
   gapi.client.load('gmail', 'v1',displayMail); //執行後呼叫 displayMail
  }

  //顯示寄信畫面
  function displayMail(){
   document.getElementById("warning-text").style.display = "none";
     document.getElementById("send-div").style.display = "";
  }

  function sendEmail(){  
     document.getElementById("send-button").disabled = true;//disable button
     var content = "Name:"+"\r\n"+document.getElementById('inputName').value + "\r\n"+
          "Email:"+"\r\n"+document.getElementById('inputEmail').value + "\r\n"+
          "Message:"+"\r\n" + document.getElementById('inputText').value;
     sendMessage(
     {
       'To': document.getElementById('inputEmail').value,
       'From': 'me',
       'Subject':  document.getElementById('inputText').value
     },
     content,
     reloadpage
   );
   return false;
  }

  function reloadpage(){
   alert('Send OK');
   location.reload();
  }

  //gapi.client.gmail.users.messages.send
  //https://developers.google.com/gmail/api/v1/reference/users/messages/send
  function sendMessage(headers_obj, message, callback)
  {
     //內容
     var email = '';
     for(var header in headers_obj)
       email += header += ": "+headers_obj[header]+"\r\n";
     email += "\r\n" + message;

     //轉 base64
     var base64EncodedEmail = btoa(unescape(encodeURIComponent(email)));
           
     var request = gapi.client.gmail.users.messages.send({
    'userId': 'me',
    'resource': {
     'raw': base64EncodedEmail
    }
      });
      return request.execute(callback);
  }
 </script>
 <!--啟動 api-->
 <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>

參考資料

• Google Javascript QuickStart
• Gmail API
• Use Javascript Send Gmail
• 完整程式下載