この記事では、Gmail Rest APIとJavaScriptを使用して、基本的なGmail Inbox Viewerの構(gòu)築を示しています。 JQUERYとBOOTSTRAPを活用して効率を高めます。完全なコードは、githubリポジトリで入手できます。
主要な機(jī)能：
Googleの開発者コンソールを介したGmail API統(tǒng)合
簡素化された認(rèn)証とAPI呼び出しのためのGoogleのJavaScriptクライアントライブラリ。
- secure oauth 2.0認(rèn)証。
- ユーザーの最後の10個の受信ボックスメッセージを取得して表示します。
完全な電子メールコンテンツを表示するためのモーダルウィンドウ（セキュリティのためにIFRAMEを使用）。
-
Gmail APIを有効にする
-
Googleの開発者コンソールにアクセスします。-
プロジェクトを作成または選択します。
APISセクションに移動し、「Gmail API」を有効にします。
WebアプリケーションとブラウザAPIキーのOAUTH 2.0クライアントID資格情報を作成します（生産用、HTTPリファラーの制限を追加）。 少なくとも1つの承認(rèn)されたJavaScriptオリジン（例：）を指定します。 リダイレクトURIは必要ありません。
-
-
- gmail APIへの接続：
-
http://localhost合理化されたインタラクションには、GoogleのJavaScriptクライアントライブラリを使用します。 當(dāng)社のHTMLファイルには、jQuery、Bootstrap、およびGoogleクライアントライブラリが含まれています。
およびを?qū)g際の資格情報に置き換えることを忘れないでください。
ユーザー認(rè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を使用してユーザー認(rèn)証を処理します。 （これらの機(jī)能のコードは、簡潔にするためにここで省略されていますが、Github Repoで入手できます）。
受信トレイメッセージの取得と表示：
関數(shù)は、Gmail APIを使用して最後の10のメッセージを取得し、handleClientLoad()を呼び出してテーブルに追加します。 また、完全な電子メールコンテンツを表示するためのモーダルリンクも追加されます。 （これらの機(jī)能のコードは、簡潔にするためにここで省略されていますが、Github Repoで入手できます）。
checkAuth()handleAuthClick()電子メールコンテンツの表示：handleAuthResult()loadGmailApi()
モーダルウィンドウは、iframeを使用して電子メールコンテンツを安全に表示し、アプリのスタイリングとの潛在的な競合を防ぎます。 （この機(jī)能のコードはBrevityのためにここで省略されていますが、Github Repoで入手できます）。
スタイリング：
提供されたCSSは、モーダル內(nèi)のiframeをスタイルします。 （このコードは簡潔にするためにここで省略されていますが、Github Repoで入手できます）。
さらなる改善：
- 改善された日付のフォーマット
- テンプレートエンジン（口ひげまたはハンドルバー）
- 適切な日付注文
10以上のメッセージのページネーション-
通知による自動更新
-
ユーティリティ関數(shù)や認(rèn)証/メッセージ処理機(jī)能を含む完全なソースコードは、GitHubリポジトリで入手できます。 FAQSセクションは、既に提供されている情報を大部分繰り返しているため、省略されています。
以上がGmail JavaScript APIで受信トレイをマスターしますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。