Webanwendung für den Gerätezugriff erstellen

1. Einführung

Das Gerätezugriffsprogramm bietet die Smart Device Management API, eine REST API, mit der Entwickler Google Nest-Geräte über ihre Anwendungen steuern können. Drittanbieter müssen ihre Einwilligung für den Zugriff auf ihre Nest-Geräte erteilen.

Für eine erfolgreiche Gerätezugriff-Integration sind drei wichtige Schritte erforderlich:

1. Projekterstellung: Erstellen Sie ein Projekt auf der Google Cloud Platform und registrieren Sie sich in der Gerätezugriffskonsole als Entwickler.
2. Kontoverknüpfung: Nutzer durch den Kontoverknüpfungsvorgang führen und einen Zugriffscode abrufen. Tauschen Sie den Code gegen ein Zugriffstoken aus.
3. Gerätesteuerung: Sie können Smart Device Management API-Anfragen senden, um Geräte zu steuern, indem Sie Befehle mit dem Zugriffstoken senden.

In diesem Codelab gehen wir näher darauf ein, wie der Gerätezugriff funktioniert. Dazu erstellen wir eine Webanwendung, die die Authentifizierung übernimmt und Smart Device Management API-Aufrufe ausführt. Außerdem erfahren Sie, wie Sie mit Node.js und Express einen einfachen Proxyserver bereitstellen, um Gerätezugriffsanfragen weiterzuleiten.

Bevor Sie beginnen, wäre es gut, wenn wir uns mit gängigen Webtechnologien vertraut machen, die wir in diesem Codelab verwenden, z. B. die Authentifizierung mit OAuth 2.0 oder das Erstellen einer Webanwendung mit Node.js. Diese sind jedoch keine Voraussetzung.

Voraussetzungen

• Node.js 8 oder höher
• Google-Konto mit einem verknüpften Nest Thermostat

Lerninhalte

• Firebase-Projekt einrichten, das statische Webseiten und Cloud Functions-Funktionen hostet
• Anfragen für den Gerätezugriff über eine browserbasierte Webanwendung senden
• Proxyserver mit Node.js und Express zum Weiterleiten von Anfragen erstellen

2. Projekterstellung

Entwickler müssen ein Google Cloud Platform-Projekt (GCP-Projekt) erstellen, um die Integration des Gerätezugriffs einzurichten. Eine im GCP-Projekt generierte Client-ID und ein Client-Secret werden im Rahmen des OAuth-Ablaufs zwischen der Anwendung des Entwicklers und Google Cloud verwendet. Entwickler müssen außerdem die Gerätezugriffskonsole aufrufen, um ein Projekt für den Zugriff auf die Smart Device Management API zu erstellen.

Google Cloud Platform

Rufen Sie die Google Cloud Platform auf. Klicken Sie auf „Neues Projekt erstellen“ und geben Sie einen Projektnamen ein. Es wird auch eine Projekt-ID [GCP-Project-Id] für Google Cloud angezeigt. Notieren Sie sich diese, da wir sie bei der Firebase-Einrichtung verwenden werden. Wir bezeichnen diese ID in diesem Codelab als [GCP-Project-Id].

Zuerst müssen Sie die erforderliche API-Bibliothek für das Projekt aktivieren. Rufen Sie APIs und Dienste > Bibliothek auf und suchen Sie nach „Smart Device Management API“. Sie müssen diese API aktivieren, um Ihr Projekt zu autorisieren, Anfragen an die Device Access API zu senden.

Bevor wir OAuth-Anmeldedaten erstellen, müssen wir den OAuth-Zustimmungsbildschirm für unser Projekt konfigurieren. Gehen Sie zu APIs und Dienste > OAuth-Zustimmungsbildschirm. Wählen Sie als Nutzertyp die Option extern aus. Geben Sie einen Namen und eine Support-E-Mail-Adresse für Ihre App sowie die Kontaktdaten des Entwicklers an, um den ersten Bildschirm zu vervollständigen. Wenn Sie nach Testnutzern gefragt werden, geben Sie in diesem Schritt die E-Mail-Adresse mit verknüpften Geräten an.

Nachdem Sie den OAuth-Zustimmungsbildschirm konfiguriert haben, rufen Sie APIs und Dienste > Anmeldedaten auf. Klicken Sie auf + Anmeldedaten erstellen und wählen Sie OAuth-Client-ID aus. Wählen Sie als Anwendungstyp Webanwendung aus.

Geben Sie einen Namen für den Kunden ein und klicken Sie auf ERSTELLEN. Wir fügen später eine autorisierte JavaScript-Quelle und eine autorisierte Weiterleitungs-URI hinzu. Wenn Sie diesen Vorgang abschließen, werden die [Client-Id] und [Client-Secret] angezeigt, die mit diesem OAuth 2.0-Client verknüpft sind.

Gerätezugriffskonsole

Rufen Sie die Gerätezugriffskonsole auf. Wenn Sie die Gerätezugriffskonsole noch nicht verwendet haben, werden Sie mit einer Vereinbarung über die Nutzungsbedingungen und einer Registrierungsgebühr in Höhe von 5 $begrüßt.

Erstellen Sie ein neues Projekt und geben Sie ihm einen Projektnamen. Geben Sie im nächsten Fenster die [Client-Id] an, die Sie im vorherigen Schritt von der GCP erhalten haben.

Wenn Sie Ereignisse aktivieren und die Projekterstellung abschließen, werden Sie zur Startseite Ihres Projekts weitergeleitet. Ihre [Project-Id] wird unter dem Namen aufgeführt, den Sie Ihrem Projekt zugewiesen haben.

Notieren Sie sich Ihre [Project-Id]. Wir verwenden sie, wenn wir Anfragen an die Smart Device Management API senden.

Standardmäßig wird ein Projekt im Sandbox-Modus erstellt. Bei Sandbox-Projekten muss das Google-Konto, mit dem Sie die Device Access Console registriert haben, der Inhaber oder ein Mitglied der Struktur des Geräts sein, das Sie steuern möchten.

3. Firebase-Einrichtung

Mit Firebase können Entwickler Webanwendungen schnell und einfach bereitstellen. Wir entwickeln eine clientseitige Webanwendung für die Gerätezugriff-Integration mithilfe von Firebase.

Firebase-Projekt erstellen

Rufen Sie die Firebase Console auf. Klicken Sie auf Projekt hinzufügen und wählen Sie das Projekt aus, das Sie im Schritt Projekterstellung erstellt haben. Dadurch wird ein Firebase-Projekt erstellt, das mit Ihrem GCP-Projekt [GCP-Project-Id] verknüpft wird.

Nachdem das Firebase-Projekt erstellt wurde, sollten Sie folgenden Bildschirm sehen:

Firebase-Tools installieren

Firebase bietet eine Reihe von Befehlszeilentools zum Erstellen und Bereitstellen Ihrer App. Öffnen Sie ein neues Terminalfenster und führen Sie den folgenden Befehl aus, um diese Tools zu installieren. Dadurch werden Firebase-Tools weltweit installiert.

$ npm i -g firebase-tools

Prüfen Sie anhand der Versionsinformationen, ob die Firebase-Tools korrekt installiert sind.

$ firebase --version

Sie können sich mit dem Befehl „login“ mit Ihrem Google-Konto in den Firebase CLI-Tools anmelden.

$ firebase login

Hostingprojekt initialisieren

Sobald Sie sich anmelden können, ist der nächste Schritt das Initialisieren eines Hostingprojekts für Ihre Webanwendung. Rufen Sie im Terminal den Ordner auf, in dem Sie das Projekt erstellen möchten, und führen Sie den folgenden Befehl aus:

$ firebase init hosting

Firebase stellt Ihnen eine Reihe von Fragen, um Ihnen den Einstieg in ein Hostingprojekt zu erleichtern:

1. Wählen Sie eine Option aus: Vorhandenes Projekt verwenden
2. Wählen Sie ein Firebase-Standardprojekt für dieses Verzeichnis aus: Auswählen***[GCP-Project-Id]***
3. Welches Verzeichnis möchten Sie als öffentliches Verzeichnis verwenden? – Öffentlich
4. Als Single-Page-Anwendung konfigurieren? – Ja
5. Automatische Builds und Bereitstellungen mit GitHub einrichten? – Nein

Sobald Ihr Projekt initialisiert ist, können Sie es mit dem folgenden Befehl in Firebase bereitstellen:

$ firebase deploy

Firebase scannt Ihr Projekt und stellt die erforderlichen Dateien für Cloud Hosting bereit.

Wenn Sie die Hosting-URL in einem Browser öffnen, sollte die Seite angezeigt werden, die Sie gerade bereitgestellt haben:

Nachdem Sie nun die Grundlagen zum Bereitstellen einer Webseite mit Firebase kennen, können wir mit der Bereitstellung unseres Codelab-Beispiels beginnen.

4. Codelab-Beispiel

Sie können das Codelab-Repository, das auf GitHub gehostet wird, mit dem folgenden Befehl klonen:

$ git clone https://github.com/google/device-access-codelab-web-app.git

In diesem Repository finden Sie Samples in zwei separaten Ordnern. Der Ordner codelab-start enthält die erforderlichen Dateien, um von diesem Punkt aus mit diesem Codelab fortzufahren. Der Ordner codelab-done enthält eine vollständige Version dieses Codelabs mit dem voll funktionsfähigen Client und Node.js-Server.

In diesem Codelab verwenden wir die Dateien aus dem Ordner codelab-start. Wenn Sie nicht weiterkommen, können Sie sich jederzeit auch die fertige Version des Codelabs ansehen.

Codelab-Beispieldateien

Die Dateistruktur des Ordners „codelab-start“ sieht so aus:

public
├───index.html
├───scripts.js
├───style.css
firebase.json

Der öffentliche Ordner enthält statische Seiten unserer Anwendung. firebase.json ist für die Weiterleitung von Webanfragen an unsere App verantwortlich. In der Version codelab-done sehen Sie auch ein functions-Verzeichnis, das die Logik für unseren Proxyserver (Express) enthält, der in Google Cloud-Funktionen bereitgestellt wird.

Codelab-Beispiel bereitstellen

Kopieren Sie die Dateien aus der Datei codelab-start in das Verzeichnis Ihres Projekts.

$ firebase deploy

Sobald die Bereitstellung in Firebase abgeschlossen ist, sollte die Codelab-Anwendung angezeigt werden:

Für die Authentifizierung sind Partneranmeldedaten erforderlich. Diese werden im nächsten Abschnitt behandelt.

5. Umgang mit OAuth

OAuth ist der Webstandard für die Zugriffsbevollmächtigung. Er wird häufig verwendet, um Anwendungen von Drittanbietern Zugriff auf ihre Kontoinformationen zu gewähren, ohne Passwörter weiterzugeben. Wir verwenden OAuth 2.0, um Entwicklern zu ermöglichen, die über den Gerätezugriff auf Nutzergeräte zugreifen.

Weiterleitungs-URI angeben

Im ersten Schritt des OAuth-Ablaufs werden eine Reihe von Parametern an den Google OAuth 2.0-Endpunkt übergeben. Nachdem die Nutzereinwilligung eingeholt wurde, senden die Google OAuth-Server eine Anfrage mit einem Autorisierungscode an Ihre Weiterleitungs-URI.

Aktualisieren Sie die SERVER_URI-Konstante (Zeile 19) mit Ihrer eigenen Hosting-URL in scripts.js:

const SERVER_URI = "https://[GCP-Project-Id].web.app";

Wenn Sie die Anwendung mit dieser Änderung noch einmal bereitstellen, wird der für Ihr Projekt verwendete Weiterleitungs-URI aktualisiert.

$ firebase deploy

Weiterleitungs-URI aktivieren

Nachdem Sie die Weiterleitungs-URI in der Scripts-Datei aktualisiert haben, müssen Sie sie auch der Liste der zulässigen Weiterleitungs-URIs für die Client-ID hinzufügen, die Sie für Ihr Projekt erstellt haben. Rufen Sie in der Google Cloud Platform die Seite „Anmeldedaten“ auf. Dort werden alle für Ihr Projekt erstellten Anmeldedaten aufgeführt:

Wählen Sie in der Liste der OAuth 2.0-Client-IDs die Client-ID aus, die Sie im Schritt Projekterstellung erstellt haben. Fügen Sie den Weiterleitungs-URI Ihrer App der Liste der autorisierten Weiterleitungs-URIs für Ihr Projekt hinzu.

Melde dich doch mal an!

Rufe die Hosting-URL auf, die du mit Firebase eingerichtet hast, gib deine Partner-Anmeldedaten ein und klicke auf die Schaltfläche ANMELDEN. Client-ID und Client-Secret sind die Anmeldedaten, die Sie von der Google Cloud Platform erhalten haben. Die Projekt-ID stammt aus der Device Access Console.

Wenn Sie eine Error 400: redirect_uri_mismatch, erhalten, prüfen Sie Ihren Weiterleitungs-URI noch einmal. Er muss genau mit den zulässigen URIs übereinstimmen, einschließlich Protokoll (https://) und eventueller Schrägstriche.

Wenn Sie die Meldung Error 403: access_denied, The developer hasn't given you access to this app - erhalten, prüfen Sie, ob Sie das E-Mail-Konto, das Sie für die Kontoverknüpfung verwenden, bei der Einrichtung des OAuth-Zustimmungsbildschirms als Testnutzer hinzugefügt haben.

Wenn Sie aufgefordert werden, die E-Mail-Adresse des Entwicklers als Haushaltsmitglied in den Einstellungen der Google Home App hinzuzufügen, tun Sie dies, da die neu erstellten Projekte in der Gerätezugriffskonsole der Sandbox-Einschränkung unterliegen.

Wenn Sie während der Kontoverknüpfung aufgefordert werden, Ihr Nest-Konto zu Google zu migrieren, folgen Sie der Migrationsanleitung und versuchen Sie dann noch einmal, sich anzumelden.

Über die Schaltfläche ANMELDEN werden Ihre Nutzer durch den OAuth-Vorgang für Ihr Unternehmen geführt, beginnend mit dem Anmeldebildschirm zum Google-Konto. Nach der Anmeldung werden Nutzer aufgefordert, Ihrem Projekt Zugriff auf ihre Nest-Geräte zu gewähren.

Da dies eine Mock-App ist, gibt Google eine Warnung aus, bevor eine Weiterleitung erfolgt.

Klicken Sie auf „Erweitert“ und wählen Sie „Zu web.app gehen (unsicher)“ aus, um die Weiterleitung zu Ihrer App abzuschließen.

Dadurch wird ein OAuth-Code als Teil der eingehenden GET-Anfrage bereitgestellt, den die App dann gegen ein Zugriffstoken und ein Aktualisierungstoken eintauscht.

6. Gerätesteuerung

Die Beispielanwendung für den Gerätezugriff verwendet REST API-Aufrufe der Smart Device Management API, um Google Nest-Geräte zu steuern. Bei diesen Aufrufen wird das Zugriffstoken im Header einer GET- oder POST-Anfrage zusammen mit einer für bestimmte Befehle erforderlichen Nutzlast übergeben.

Zur Verarbeitung dieser Aufrufe haben wir eine generische Zugriffsanfragefunktion geschrieben. Allerdings müssen Sie für diese Funktion den richtigen Endpunkt sowie gegebenenfalls das Nutzlastobjekt angeben.

function deviceAccessRequest(method, call, localpath, payload = null) {...}

• method: Art der HTTP-Anfrage (GET oder POST))
• call: Ein String, der unseren API-Aufruf darstellt und zum Weiterleiten von Antworten verwendet wird (listDevices, thermostatMode, temperatureSetpoint).
• localpath: Endpunkt, an den die Anfrage gesendet wird, mit der Projekt-ID und der Geräte-ID (angehängt nach https://smartdevicemanagement.googleapis.com/v1)
• payload (*) – zusätzliche Daten, die für den API-Aufruf erforderlich sind (z. B. ein numerischer Wert, der die Temperatur für einen Sollwert darstellt)

Wir werden Beispiele für UI-Steuerelemente zur Steuerung eines Nest Thermostats erstellen (Geräte auflisten, Modus festlegen, Temperatur einstellen):

Diese UI-Steuerelemente rufen die entsprechenden Funktionen (listDevices(), postThermostatMode(), postTemperatureSetpoint()) aus scripts.js auf. Sie werden leer gelassen, um sie zu implementieren. Ziel ist es, die richtige Methode bzw. den richtigen Pfad auszuwählen und die Nutzlast an die Funktion deviceAccessRequest(...) zu übergeben.

Geräte auflisten

Der einfachste Gerätezugriffsaufruf ist listDevices. Es wird ein GET-Request verwendet und es ist keine Nutzlast erforderlich. Der Endpunkt muss mithilfe von projectId strukturiert werden. Schließen Sie die Funktion listDevices() so ab:

function listDevices() {
  var endpoint = "/enterprises/" + projectId + "/devices";
  deviceAccessRequest('GET', 'listDevices', endpoint);
}

Speichern Sie Ihre Änderungen und stellen Sie Ihr Firebase-Projekt mit dem folgenden Befehl noch einmal bereit:

$ firebase deploy

Sobald die neue Version der App bereitgestellt wurde, aktualisieren Sie die Seite und klicken Sie auf GERÄTE LISTEN. Dies sollte in der Liste unter Gerätesteuerung enthalten sein und die ID Ihres Thermostats sehen:

Wenn du Geräte aus der Liste auswählst, wird das Feld deviceId in der Datei scripts.js aktualisiert. Für die nächsten beiden Steuerelemente müssen wir die deviceId für das Gerät angeben, das wir steuern möchten.

Thermostatsteuerung

In der Smart Device Management API gibt es zwei Eigenschaften für die grundlegende Steuerung eines Nest Thermostats. ThermostatMode und TemperatureSetpoint Mit dem Modus „Thermostat-Modus“ können Sie Ihren Nest Thermostat auf einen der vier möglichen Modi einstellen: {Aus, Heizen, Kühlen, HeizenKühl}. Wir müssen dann den ausgewählten Modus als Teil der Nutzlast angeben.

Ersetzen Sie die Funktion postThermostatMode() in scripts.js durch Folgendes:

function postThermostatMode() {
  var endpoint = "/enterprises/" + projectId + "/devices/" + deviceId + ":executeCommand";
  var tempMode = id("tempMode").value;
  var payload = {
    "command": "sdm.devices.commands.ThermostatMode.SetMode",
    "params": {
      "mode": tempMode
    }
  };
  deviceAccessRequest('POST', 'thermostatMode', endpoint, payload);
}

Die nächste Funktion, postTemperatureSetpoint(), übernimmt die Temperatureinstellung (in Celsius) für deinen Nest Thermostat. Je nach ausgewähltem Thermostatmodus können in der Nutzlast zwei Parameter festgelegt werden: heatCelsius und coolCelsius.

function postTemperatureSetpoint() {
  var endpoint = "/enterprises/" + projectId + "/devices/" + deviceId + ":executeCommand";
  var heatCelsius = parseFloat(id("heatCelsius").value);
  var coolCelsius = parseFloat(id("coolCelsius").value);

  var payload = {
    "command": "",
    "params": {}
  };
  
  if ("HEAT" === id("tempMode").value) {
    payload.command = "sdm.devices.commands.ThermostatTemperatureSetpoint.SetHeat";
    payload.params["heatCelsius"] = heatCelsius;
  }
  else if ("COOL" === id("tempMode").value) {
    payload.command = "sdm.devices.commands.ThermostatTemperatureSetpoint.SetCool";
    payload.params["coolCelsius"] = coolCelsius;
  }
  else if ("HEATCOOL" === id("tempMode").value) {
    payload.command = "sdm.devices.commands.ThermostatTemperatureSetpoint.SetRange";
    payload.params["heatCelsius"] = heatCelsius;
    payload.params["coolCelsius"] = coolCelsius;
  } else {
    console.log("Off and Eco mode don't allow this function");
    return;
  }
  deviceAccessRequest('POST', 'temperatureSetpoint', endpoint, payload);
}

Wichtig: Denken Sie daran, zuerst den Modus Ihres Thermostats festzulegen und eine entsprechende TemperatureSetpoint-Änderung vorzunehmen. heatCelsius und coolCelsius können nur in den entsprechenden Modi gesendet werden. Wenn Sie die Temperatur in einem nicht unterstützten Modus festlegen, wird der HTTP-Fehler 500 ausgegeben.

7. Node.js-Server (optional)

Glückwunsch! Sie haben eine clientseitige Webanwendung erstellt, die Smart Device Management API-Anfragen über einen Browser stellen kann. Für diejenigen, die serverseitig arbeiten möchten, empfehlen wir einen Proxy-Server, der Ihre Anfragen vom Browser weiterleiten kann.

Für diesen Proxyserver verwenden wir Firebase Cloud Functions, Node.js und Express.

Cloud Functions initialisieren

Öffnen Sie ein neues Terminalfenster, gehen Sie zu Ihrem Projektverzeichnis und führen Sie den folgenden Befehl aus:

$ firebase init functions

Firebase stellt Ihnen eine Reihe von Fragen, um Cloud Functions-Funktionen zu initialisieren:

1. In welcher Sprache möchten Sie Cloud Functions-Funktionen schreiben? – JavaScript
2. Möchtest du ESLint verwenden, um mögliche Fehler zu erkennen und den Stil durchzusetzen? — Nein
3. Möchten Sie jetzt Abhängigkeiten mit npm installieren? – Ja

Dadurch wird ein functions-Ordner in Ihrem Projekt initialisiert und die erforderlichen Abhängigkeiten werden installiert. Sie sehen, dass Ihr Projektordner ein Verzeichnis „functions“ mit der Datei index.js zum Definieren unserer Cloud-Funktionen, package.json zum Definieren der Einstellungen und ein Verzeichnis node_modules mit den Abhängigkeiten enthält.

Wir verwenden zwei npm-Bibliotheken, um die serverseitigen Funktionen zu erstellen: express und xmlhttprequest. Fügen Sie der Liste der Abhängigkeiten in der Datei „package.json“ die folgenden Einträge hinzu:

"xmlhttprequest": "^1.8.0",
"express": "^4.17.0"

Wenn Sie dann im Verzeichnis „functions“ npm install ausführen, werden Abhängigkeiten für Ihr Projekt installiert:

$ npm install

Falls bei npm beim Herunterladen von Paketen ein Problem auftritt, können Sie versuchen, xmlhttprequest zu speichern und mit dem folgenden Befehl explizit auszudrücken:

$ npm install express xmlhttprequest --save

Upgrade auf Blaze-Tarif

Wenn Sie den Befehl firebase deploy verwenden, müssen Sie ein Upgrade auf den Tarif „Blaze“ ausführen. Dazu müssen Sie Ihrem Konto eine Zahlungsmethode hinzufügen. Gehen Sie zu Projektübersicht > Nutzung und Abrechnung und wählen Sie den Blaze-Tarif für Ihr Projekt aus.

Express-Server erstellen

Ein Express-Server folgt einem einfachen Framework, um auf eingehende GET- und POST-Anfragen zu antworten. Wir haben ein Servlet entwickelt, das auf POST-Anfragen wartet, sie an eine in der Nutzlast angegebene Ziel-URL überträgt und mit der Antwort antwortet, die von der Übertragung empfangen wurde.

Ändern Sie die Datei index.js im Funktionsverzeichnis so, dass sie so aussieht:

const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
const functions = require('firebase-functions');
const express = require('express');
const http = require('http');

const app = express();
app.use(express.json());


//***** Device Access - Proxy Server *****//

// Serving Get Requests (Not used) 
app.get('*', (request, response) => {
  response.status(200).send("Hello World!");
});
// Serving Post Requests
app.post('*', (request, response) => {
  
  setTimeout(() => {
    // Read the destination address from payload:
    var destination = request.body.address;
    
    // Create a new proxy post request:
    var xhr = new XMLHttpRequest();
    xhr.open('POST', destination);
    
    // Add original headers to proxy request:
    for (var key in request.headers) {
            var value = request.headers[key];
      xhr.setRequestHeader(key, value);
    }
    
    // Add command/parameters to proxy request:
    var newBody = {};
    newBody.command = request.body.command;
    newBody.params = request.body.params;
    
    // Respond to original request with the response coming
    // back from proxy request (to Device Access Endpoint)
    xhr.onload = function () {
      response.status(200).send(xhr.responseText);
    };
    
    // Send the proxy request!
    xhr.send(JSON.stringify(newBody));
  }, 1000);
});

// Export our app to firebase functions:
exports.app = functions.https.onRequest(app);

Damit Anfragen an unseren Server weitergeleitet werden können, müssen wir die Umschreibungen von firebase.json so anpassen:

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [{
        "source": "/proxy**",
        "function": "app"
      },{
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Dadurch werden URLs, die mit /proxy beginnen, an unseren Express-Server weitergeleitet. Die restlichen URLs werden weiterhin an index.html weitergeleitet.

Proxy-API-Aufrufe

Jetzt, da unser Server bereit ist, definieren wir einen Proxy-URI in scripts.js, damit unser Browser Anfragen an diese Adresse sendet:

const PROXY_URI = SERVER_URI + "/proxy";

Fügen Sie dann eine proxyRequest-Funktion „scripts.js“ hinzu, die dieselbe Signatur wie die deviceAccessRequest(...)-Funktion hat, für indirekte Aufrufe des Gerätezugriffs.

function proxyRequest(method, call, localpath, payload = null) {
    var xhr = new XMLHttpRequest();
    
    // We are doing our post request to our proxy server:
    xhr.open(method, PROXY_URI);
    xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    xhr.onload = function () {
      // Response is passed to deviceAccessResponse function:
      deviceAccessResponse(call, xhr.response);
    };
    
    // We are passing the device access endpoint in address field of the payload:
    payload.address = "https://smartdevicemanagement.googleapis.com/v1" + localpath;
    if ('POST' === method && payload)
        xhr.send(JSON.stringify(payload));
    else
        xhr.send();
}

Im letzten Schritt werden die deviceAccessRequest(...)-Aufrufe durch die proxyRequest(...)-Funktion in den Funktionen postThermostatMode() und postTemperatureSetpoint() innerhalb von scripts.js ersetzt.

Führen Sie firebase deploy aus, um die App zu aktualisieren.

$ firebase deploy

Sie haben jetzt einen laufenden Node.js-Proxyserver mit Express in Cloud Functions.

Cloud Functions-Berechtigungen angeben

Im letzten Schritt überprüfen Sie die Zugriffsberechtigungen für Ihre Cloud Functions-Funktionen und stellen sicher, dass Ihre clientseitige Anwendung diese aufrufen kann.

Gehen Sie in der Google Cloud Platform über das Menü zum Tab „Cloud Functions“ und wählen Sie Ihre Cloud Functions-Funktion aus:

Klicken Sie auf Berechtigungen und dann auf Mitglied hinzufügen. Geben Sie „allUsers“ in das Feld für neue Mitglieder ein und wählen Sie als Rolle „Cloud Functions“ > „Cloud Functions-Aufrufer“ aus. Wenn Sie auf Speichern klicken, wird eine Warnmeldung angezeigt:

Wenn Sie „Öffentlichen Zugriff zulassen“ auswählen, kann Ihre clientseitige Anwendung die Cloud Functions-Funktion verwenden.

Sie haben alle Schritte abgeschlossen. Sie können jetzt die Webanwendung aufrufen und die über Ihren Proxyserver geleitete Gerätesteuerung ausprobieren.

Nächste Schritte

Sie möchten Ihr Wissen über den Gerätezugriff erweitern? In der Dokumentation zu den Traits findest du weitere Informationen zur Steuerung anderer Nest-Geräte und zum Zertifizierungsprozess, in dem du erfährst, wie du dein Produkt weltweit auf den Markt bringst.

Mit der Beispiel-Webanwendung für den Gerätezugriff können Sie Ihre Fähigkeiten ausbauen. Sie bauen auf Ihren Codelab-Erfahrungen auf und stellen eine funktionierende Webanwendung zur Steuerung von Nest-Kameras, -Türklingeln und -Thermostaten bereit.