Maîtriser votre boîte de réception avec l'API JavaScript Gmail-js tutoriel-php.cn

Maîtriser votre boîte de réception avec l'API JavaScript Gmail

Joseph Gordon-Levitt

Libérer： 2025-02-19 10:49:10

original

332 Les gens l'ont consulté

Cet article montre la construction d'une visionneuse de boîte de réception Gmail de base à l'aide de l'API GMail REST et JavaScript. Nous exploiterons JQuery et Bootstrap pour l'efficacité. Le code complet est disponible sur notre référentiel GitHub.

Mastering Your Inbox with the Gmail JavaScript API

Caractéristiques de clé:

Intégration de l'API Gmail via la console des développeurs de Google.
La bibliothèque client JavaScript de Google pour une authentification simplifiée et des appels API.
Authentification OAuth 2.0 sécurisée.
récupérer et afficher les dix derniers messages de la boîte de réception de l'utilisateur.
Fenêtre modale pour afficher le contenu de l'e-mail complet (en utilisant les iframes pour la sécurité).

Activation de l'API Gmail:

Accédez à la console de développeur de Google.
Créer ou sélectionner un projet.
Accédez à la section API et activez l'API "Gmail".
Créer des informations d'identification ID Client ID OAuth 2.0 pour une application Web et une clé API de navigateur (pour la production, ajoutez des restrictions de références HTTP). Spécifiez au moins une origine JavaScript autorisée (par exemple, http://localhost). Un URI de redirection n'est pas nécessaire.

Mastering Your Inbox with the Gmail JavaScript API

Connexion à l'API Gmail:

Nous utiliserons la bibliothèque client JavaScript de Google pour l'interaction rationalisée. Notre fichier HTML comprend jQuery, Bootstrap et la bibliothèque client Google:

<!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>

Copier après la connexion

N'oubliez pas de remplacer YOUR_CLIENT_ID et YOUR_API_KEY par vos informations d'identification réelles.

Authentification de l'utilisateur:

Les fonctions handleClientLoad(), checkAuth(), handleAuthClick(), handleAuthResult() et loadGmailApi() gèrent l'authentification de l'utilisateur à l'aide de OAuth 2.0. (Le code de ces fonctions est omis ici pour brièveté mais est disponible dans le repo GitHub).

Récupérer et afficher les messages de la boîte de réception:

La fonction displayInbox() récupère les dix derniers messages à l'aide de l'API Gmail et des appels appendMessageRow() pour les ajouter à la table. appendMessageRow() ajoute également un lien modal pour consulter le contenu de l'e-mail complet. (Le code de ces fonctions est omis ici pour brièveté mais est disponible dans le repo GitHub).

Affichage du contenu des e-mails:

La fenêtre modale utilise un iframe pour afficher le contenu de l'e-mail en toute sécurité, empêchant les conflits potentiels avec le style de l'application. (Le code de cette fonctionnalité est omis ici pour brièveté mais est disponible dans le repo GitHub).

Styling:

Le CSS fourni styles l'iframe dans le modal. (Le code pour cela est omis ici pour brièveté mais est disponible dans le repo GitHub).

Mastering Your Inbox with the Gmail JavaScript API

Améliorations supplémentaires:

Amélioration du formatage des dattes
moteur de modèles (moustache ou guidon)
Ordonnance de date appropriée
Pagination pour plus de 10 messages
Auto-mise à jour avec notifications

Le code source complet, y compris les fonctions utilitaires et les fonctions d'authentification / de gestion des messages, est disponible sur notre répension GitHub. La section FAQ a été omise car elle est largement répétitive des informations déjà fournies.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!