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

概述

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

實驗結論 ...
不算成功，Google的權限問題，一定要使用者登入Google帳號才能使用 Javascript 呼叫 API
(如果是 Server Side 程式，還能使用 Service Account，Client Side 目前沒找到方法)

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

操作步驟

• 建立一個 Project
• 申請 Gmail API
• 建立憑證與金鑰
• 授權帳號使用 Google API
• 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 實作

程式碼摘錄

以下只放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
• 完整程式下載