>本文展示了使用Gmail Rest API和JavaScript構(gòu)建基本的Gmail收件箱查看器。 我們將利用jQuery和Bootstrap提高效率。完整的代碼可在我們的github存儲庫中可用。
>
密鑰功能：
通過Google的開發(fā)人員控制臺- gmail API集成。
> Google的JavaScript客戶端庫，用于簡化身份驗(yàn)證和API調(diào)用。- >
安全的OAuth 2.0身份驗(yàn)證。-
提取和顯示用戶的最后十個收件箱消息。>
- >模式窗口，用于查看完整的電子郵件內(nèi)容（使用IFRAMES進(jìn)行安全安全）。
-
啟用Gmail API：
>
>訪問Google的開發(fā)人員控制臺。
創(chuàng)建或選擇一個項(xiàng)目。
- >導(dǎo)航到APIS部分，并啟用“ Gmail API”。
>為Web應(yīng)用程序和瀏覽器API密鑰創(chuàng)建OAUTH 2.0客戶端ID憑據(jù)（為生產(chǎn)，添加HTTP轉(zhuǎn)介限制）。 指定至少一個授權(quán)的JavaScript Origin（例如，- ）。 不需要重定向URI。
-
-
http://localhost
連接到gmail api：
>
>我們將使用Google的JavaScript客戶端庫進(jìn)行簡化的交互。 我們的HTML文件包括jQuery，Bootstrap和Google客戶端庫：>
記住用您的實(shí)際憑據(jù)替換
> 。>
用戶身份驗(yàn)證：
<!DOCTYPE html>
<html>
<head>
<title>Gmail API demo</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style>
.hidden { display: none; }
</style>
</head>
<body>
<div class="container">
<h1>Gmail API demo</h1>
<button id="authorize-button" class="btn btn-primary hidden">Authorize</button>
<table class="table table-striped table-inbox hidden">
<thead>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date/Time</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<??>
<??>
<??>
<??>
</body>
</html>
，YOUR_CLIENT_ID>，YOUR_API_KEY，
，
， 函數(shù)使用OAuth 2.0處理用戶身份驗(yàn)證。 （此處省略了這些功能的代碼，但可在GitHub repo中使用）。
>。
handleClientLoad()>提取和顯示收件箱消息：checkAuth()>
handleAuthClick()handleAuthResult()函數(shù)使用gmail API獲取最后十個消息，并調(diào)用loadGmailApi()將它們添加到表中。
>還添加了一個模態(tài)鏈接，用于查看完整的電子郵件內(nèi)容。 （此處省略了這些功能的代碼，但可在GitHub repo中使用）。
>。
顯示電子郵件內(nèi)容：
displayInbox()>模態(tài)窗口使用iframe安全地顯示電子郵件內(nèi)容，從而防止了與應(yīng)用程序的樣式發(fā)生的潛在沖突。 （此處省略了此功能的代碼，但在GitHub repo中可用）。appendMessageRow()>
appendMessageRow()
樣式：
>提供的CSS樣式在模態(tài)內(nèi)iframe。 （此處省略了此處的代碼，但可以在GitHub repo中使用）。>
進(jìn)一步的改進(jìn)：
改進(jìn)的日期格式-
模板引擎（小胡子或車把）-
適當(dāng)?shù)娜掌谂判?li>
超過10條消息的分頁
- >自動更新通知
-
>全部源代碼，包括實(shí)用程序功能和身份驗(yàn)證/消息處理功能，可在我們的GitHub repo上獲得。 FAQS部分已被省略，因?yàn)樗诤艽蟪潭壬现貜?fù)了已經(jīng)提供的信息。
以上是使用Gmail JavaScript API掌握收件箱的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！