概述
起因來自於想在 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
建立 Project,專案名稱隨便取即可
申請 Gmail API
進入專案管理畫面,API 和服務 → 啟用 API 和服務
加入 Gmail API
建立憑證與金鑰
進入憑證畫面 (OAuth用戶端ID)
建立憑證
- 應用程式類型 → 網路應用程式
- 已授權的 JavaScript 來源 → http://localhost:8000
(Ps.local端開發,使用預設,有其他正式網址也可以自行更改,驗證時會檢查網站位置)
產生憑證 (重要)
- 用戶端ID = ClientID
- 用戶端密鑰本次未使用
產生金鑰 (重要)
進入專案管理畫面,憑證 → 建立憑證 → API 金鑰
本金鑰為稍後用到的 API Key
授權帳號使用 Google API
步驟說明
- 複製底下程式碼,並建立一個 html 檔案(記得更改ClientID)
- 利用 Python 建立一個 Server
(我使用 python,亦可使用 IIS 或 Visual Studio 等開發環境,只要運行的網址符合第三步驟設定的 ex.http://localhost:8000)
- 運行該頁面,並登錄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 && !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>
參考資料