Gmail JavaScript APIで受信トレイをマスターします-jsチュートリアル-php.cn

Gmail JavaScript APIで受信トレイをマスターします

Joseph Gordon-Levitt

リリース： 2025-02-19 10:49:10

オリジナル

324 人が閲覧しました

この記事では、Gmail Rest APIとJavaScriptを使用して、基本的なGmail Inbox Viewerの構築を示しています。 JQUERYとBOOTSTRAPを活用して効率を高めます。完全なコードは、githubリポジトリで入手できます。

Mastering Your Inbox with the Gmail JavaScript API

主要な機能：

Googleの開発者コンソールを介したGmail API統合

secure oauth 2.0認証。
ユーザーの最後の10個の受信ボックスメッセージを取得して表示します。
Gmail APIを有効にする

APISセクションに移動し、「Gmail API」を有効にします。 WebアプリケーションとブラウザAPIキーのOAUTH 2.0クライアントID資格情報を作成します（生産用、HTTPリファラーの制限を追加）。少なくとも1つの承認されたJavaScriptオリジン（例：）を指定します。リダイレクトURIは必要ありません。

gmail APIへの接続：
http://localhost合理化されたインタラクションには、GoogleのJavaScriptクライアントライブラリを使用します。当社のHTMLファイルには、jQuery、Bootstrap、およびGoogleクライアントライブラリが含まれています。

および Mastering Your Inbox with the Gmail JavaScript API を実際の資格情報に置き換えることを忘れないでください。

ユーザー認証：

、

<!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関数は、OAUTH 2.0を使用してユーザー認証を処理します。（これらの機能のコードは、簡潔にするためにここで省略されていますが、Github Repoで入手できます）。

受信トレイメッセージの取得と表示：

関数は、Gmail APIを使用して最後の10のメッセージを取得し、handleClientLoad()を呼び出してテーブルに追加します。また、完全な電子メールコンテンツを表示するためのモーダルリンクも追加されます。（これらの機能のコードは、簡潔にするためにここで省略されていますが、Github Repoで入手できます）。 checkAuth()handleAuthClick()電子メールコンテンツの表示：handleAuthResult()loadGmailApi()

モーダルウィンドウは、iframeを使用して電子メールコンテンツを安全に表示し、アプリのスタイリングとの潜在的な競合を防ぎます。（この機能のコードはBrevityのためにここで省略されていますが、Github Repoで入手できます）。

スタイリング：

提供されたCSSは、モーダル内のiframeをスタイルします。（このコードは簡潔にするためにここで省略されていますが、Github Repoで入手できます）。

Mastering Your Inbox with the Gmail JavaScript API