Webanwendung für den Gerätezugriff erstellen

1. Einführung

Das Programm „Gerätezugriff“ bietet die Smart Device Management API, eine REST API, mit der Entwickler Google Nest-Geräte über ihre Anwendungen steuern können. Nutzer müssen der Drittanbieter-App die Einwilligung zum Zugriff auf ihre Nest-Geräte erteilen.

Für eine erfolgreiche Device Access-Integration sind drei wichtige Schritte erforderlich:

1. Projekterstellung: Erstellen Sie ein Projekt in Google Cloud Platform und registrieren Sie sich als Entwickler in der Device Access Console.
2. Kontoverknüpfung: Nutzer über den Kontoverknüpfungsvorgang gewinnen und einen Zugriffscode abrufen. Tauschen Sie den Code gegen ein Zugriffstoken ein.
3. Gerätesteuerung: Mit der Smart Device Management API können Sie Geräte steuern, indem Sie Befehle mit dem Zugriffstoken senden.

In diesem Codelab erfahren Sie, wie Device Access funktioniert. Dazu erstellen wir eine Webanwendung, die die Authentifizierung übernimmt und Smart Device Management API-Aufrufe ausführt. Außerdem erfahren Sie, wie Sie einen einfachen Proxyserver mit Node.js und Express bereitstellen, um die Device Access-Anfragen weiterzuleiten.

Bevor Sie beginnen, sollten Sie sich mit den gängigen Webtechnologien vertraut machen, die wir in diesem Codelab verwenden, z. B. Authentifizierung mit OAuth 2.0 oder Erstellen einer Webanwendung mit Node.js. Sie sind jedoch keine Voraussetzungen.

Voraussetzungen

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

Lerninhalte

• Firebase-Projekt zum Hosten statischer Webseiten und Cloud-Funktionen einrichten
• Gerätezugriffsanfragen über eine browserbasierte Webanwendung stellen
• Proxyserver mit Node.js und Express zum Weiterleiten von Anfragen erstellen

2. Projekterstellung

Entwickler müssen ein Google Cloud-Projekt erstellen, um die Device Access-Integration einzurichten. Eine Client-ID und ein Clientschlüssel, die im GCP-Projekt generiert werden, 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 sie sich, da wir sie bei der Firebase-Einrichtung verwenden werden. (Wir bezeichnen diese ID in diesem Codelab als [GCP-Project-Id].)

Als Erstes müssen wir die erforderliche API-Bibliothek in unserem Projekt aktivieren. Rufen Sie APIs & Dienste > Bibliothek auf und suchen Sie nach der Smart Device Management API. Sie müssen diese API aktivieren, um Ihr Projekt für Anfragen an Device Access API-Aufrufe zu autorisieren.

Bevor wir OAuth-Anmeldedaten erstellen, müssen wir den OAuth-Zustimmungsbildschirm für unser Projekt konfigurieren. Rufen Sie APIs & Dienste > OAuth-Zustimmungsbildschirm auf. Wählen Sie unter 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 auszufüllen. Wenn Sie nach Testnutzern gefragt werden, geben Sie in diesem Schritt die E‑Mail-Adresse mit den 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 Client 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 das [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 aufgefordert, den Nutzungsbedingungen zuzustimmen und eine Registrierungsgebühr in Höhe von 5 $zu bezahlen.

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

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

Notieren Sie sich Ihre [Project-Id], da wir sie beim Senden von Anfragen an die Smart Device Management API verwenden.

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 einrichten

Firebase bietet Entwicklern eine schnelle und einfache Möglichkeit, Webanwendungen bereitzustellen. Wir entwickeln eine clientseitige Webanwendung für unsere Device Access-Integration mit Firebase.

Firebase-Projekt erstellen

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

Nachdem das Firebase-Projekt erfolgreich erstellt wurde, sollte der folgende Bildschirm angezeigt werden:

Firebase-Tools installieren

Firebase bietet eine Reihe von CLI-Tools 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 die Firebase-Tools global installiert.

$ npm i -g firebase-tools

Prüfen Sie die Versionsinformationen, um zu bestätigen, dass die Firebase-Tools korrekt installiert sind.

$ firebase --version

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

$ firebase login

Hostingprojekt initialisieren

Sobald Sie sich anmelden können, müssen Sie als Nächstes ein Hosting-Projekt für Ihre Webanwendung initialisieren. Rufen Sie im Terminal den Ordner auf, in dem Sie Ihr Projekt erstellen möchten, und führen Sie den folgenden Befehl aus:

$ firebase init hosting

Firebase stellt Ihnen einige Fragen, um Ihnen den Einstieg in ein Hosting-Projekt zu erleichtern:

1. Wählen Sie eine Option aus: Vorhandenes Projekt verwenden
2. Wählen Sie ein Standard-Firebase-Projekt 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-App konfigurieren? – Ja
5. Automatische Builds und Bereitstellungen mit GitHub einrichten? – Nein

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

$ firebase deploy

Firebase scannt Ihr Projekt und stellt die erforderlichen Dateien im 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 für die Bereitstellung einer Webseite mit Firebase kennen, können wir das Codelab-Beispiel bereitstellen.

4. Codelab-Beispiel

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

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

In diesem Repository stellen wir Beispiele in zwei separaten Ordnern bereit. Der Ordner codelab-start enthält die erforderlichen Dateien, damit Sie an dieser Stelle des Codelabs fortfahren können. Der Ordner codelab-done enthält eine vollständige Version dieses Codelabs mit dem voll funktionsfähigen Client und dem Node.js-Server.

In diesem Codelab verwenden wir die Dateien aus dem Ordner codelab-start. Wenn Sie an irgendeiner Stelle nicht weiterkommen, können Sie sich auch die Version des Codelabs ansehen, die bereits fertiggestellt ist.

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 das Weiterleiten 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 Functions bereitgestellt werden soll.

Codelab-Beispiel bereitstellen

Kopieren Sie die Dateien aus dem Ordner codelab-start in das Verzeichnis Ihres Projekts.

$ firebase deploy

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

Zum Starten des Authentifizierungsablaufs sind Partneranmeldedaten erforderlich, die wir im nächsten Abschnitt behandeln.

5. OAuth-Anfragen verarbeiten

OAuth ist der Webstandard für die Zugriffsdelegierung. Er wird häufig verwendet, damit Nutzer Drittanbieteranwendungen Zugriff auf ihre Kontoinformationen gewähren können, ohne Passwörter weiterzugeben. Wir verwenden OAuth 2.0, um Entwicklern den Zugriff auf Nutzergeräte über Device Access zu ermöglichen.

Weiterleitungs-URI angeben

Im ersten Schritt des OAuth-Vorgangs wird eine Reihe von Parametern an den Google OAuth 2.0-Endpunkt übergeben. Nachdem der Nutzer seine Einwilligung erteilt hat, senden die Google OAuth-Server eine Anfrage mit einem Autorisierungscode an Ihren Weiterleitungs-URI.

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

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

Wenn Sie die App mit dieser Änderung neu bereitstellen, wird die für Ihr Projekt verwendete Weiterleitungs-URI aktualisiert.

$ firebase deploy

Weiterleitungs-URI aktivieren

Nachdem Sie die Weiterleitungs-URI in der Skriptdatei 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 unter der Liste der OAuth 2.0-Client-IDs die Client-ID aus, die Sie in Projekterstellung erstellt haben. Fügen Sie die Weiterleitungs-URI Ihrer App der Liste Autorisierte Weiterleitungs-URIs für Ihr Projekt hinzu.

Melden Sie sich an.

Rufen Sie die Hosting-URL auf, die Sie mit Firebase eingerichtet haben, geben Sie Ihre Partneranmeldedaten ein und klicken Sie auf die Schaltfläche ANMELDEN. Client-ID und Client-Secret sind die Anmeldedaten, die Sie von Google Cloud Platform erhalten haben. Die Projekt-ID stammt aus der Device Access Console.

Wenn Sie die Fehlermeldung Error 400: redirect_uri_mismatch, erhalten, prüfen Sie noch einmal Ihren Weiterleitungs-URI. Sie muss genau mit Ihren zulässigen URIs übereinstimmen, einschließlich des Protokolls (https://) und aller abschließenden Schrägstriche.

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

Wenn du aufgefordert wirst, die E‑Mail-Adresse des Entwicklers als Haushaltsmitglied in den Einstellungen der Google Home App hinzuzufügen, tue dies bitte, da für die neu erstellten Projekte in der Device Access Console die Sandbox-Einschränkung gilt.

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

Über die Schaltfläche ANMELDEN werden Ihre Nutzer durch den OAuth-Vorgang für Ihr Unternehmen geleitet, beginnend mit dem Anmeldebildschirm für ihr Google-Konto. Nach der Anmeldung werden Nutzer aufgefordert, Berechtigungen für Ihr Projekt zu erteilen, damit auf ihre Nest-Geräte zugegriffen werden kann.

Da es sich um eine Test-App handelt, gibt Google eine Warnung aus, bevor eine Weiterleitung erfolgt.

Klicken Sie auf „Erweitert“ und wählen Sie dann „Zu web.app (unsicher) wechseln“ 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 Device Access-Beispiel-App verwendet Smart Device Management REST API-Aufrufe, um Google Nest-Geräte zu steuern. Bei diesen Aufrufen wird das Zugriffstoken im Header einer GET- oder POST-Anfrage zusammen mit einer Nutzlast übergeben, die für bestimmte Befehle erforderlich ist.

Wir haben eine generische Funktion für Zugriffsanfragen geschrieben, um diese Aufrufe zu verarbeiten. Sie müssen dieser Funktion jedoch den richtigen Endpunkt und bei Bedarf das Nutzlastobjekt zur Verfügung stellen.

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

• method: Typ 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: Der Endpunkt, an den die Anfrage gesendet wird. Er enthält die Projekt-ID und die 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 für die Temperatur für einen Sollwert

Wir erstellen Beispiel-UI-Steuerelemente (List Devices, Set Mode, Set Temp) zum Steuern eines Nest Thermostat:

Über diese UI-Steuerelemente werden entsprechende Funktionen (listDevices(), postThermostatMode(), postTemperatureSetpoint()) aus scripts.js aufgerufen. Sie sind leer, damit Sie sie implementieren können. Das Ziel ist, die richtige Methode/den richtigen Pfad auszuwählen und die Nutzlast an die deviceAccessRequest(...)-Funktion zu übergeben.

Geräte auflisten

Der einfachste Device Access-Aufruf ist listDevices. Dazu wird eine GET-Anfrage verwendet und es ist keine Nutzlast erforderlich. Der Endpunkt muss mit projectId strukturiert werden. Vervollständigen Sie die Funktion listDevices() so:

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

Nachdem die neue Version der App bereitgestellt wurde, aktualisieren Sie die Seite und klicken Sie auf GERÄTE AUFLISTEN. Dadurch sollte die Liste unter „Gerätebedienung“ aktualisiert werden. Dort sollte die ID Ihres Thermostats angezeigt werden:

Wenn Sie Geräte aus der Liste auswählen, 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 jeweilige Gerät angeben, das wir steuern möchten.

Thermostatsteuerung

Es gibt zwei Traits für die grundlegende Steuerung eines Nest Thermostats in der Smart Device Management API. ThermostatMode und TemperatureSetpoint. Mit ThermostatMode wird der Modus für Ihren Nest Thermostat auf einen der vier möglichen Modi festgelegt: {Off, Heat, Cool, HeatCool}. Der ausgewählte Modus muss dann als Teil der Nutzlast angegeben werden.

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(), legt die Temperatur (in Grad Celsius) für Ihren Nest Thermostat fest. 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 dann 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 einstellen, wird ein HTTP‑500-Fehler ausgegeben.

7. Node.js-Server (optional)

Glückwunsch! Sie haben eine clientseitige Webanwendung erstellt, die Smart Device Management API-Anfragen von einem Browser aus stellen kann. Für alle, die serverseitig entwickeln möchten, stellen wir einen Proxy-Server zur Verfügung, der Anfragen aus dem Browser weiterleiten kann.

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

Cloud Functions initialisieren

Öffnen Sie ein neues Terminalfenster, wechseln Sie in Ihr Projektverzeichnis und führen Sie Folgendes aus:

$ firebase init functions

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

1. In welcher Sprache möchten Sie Cloud Functions schreiben? – JavaScript
2. Möchten Sie ESLint verwenden, um wahrscheinliche Fehler zu erkennen und den Stil zu erzwingen? – 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. Der Projektordner enthält ein „functions“-Verzeichnis mit einer Datei index.js zum Definieren der Cloud-Funktionen, einer Datei package.json zum Definieren der Einstellungen und einem Verzeichnis node_modules für die Abhängigkeiten.

Wir verwenden zwei npm-Bibliotheken, um die serverseitige Funktionalität zu erstellen: „express“ und „xmlhttprequest“. Sie müssen der Liste der Abhängigkeiten in der Datei „package.json“ die folgenden Einträge hinzufügen:

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

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

$ npm install

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

$ npm install express xmlhttprequest --save

Upgrade auf den Blaze-Tarif

Wenn Sie den firebase deploy-Befehl verwenden möchten, müssen Sie ein Upgrade auf den Blaze-Tarif durchführen und Ihrem Konto eine Zahlungsmethode hinzufügen. Rufen Sie die Projektübersicht > Nutzung und Abrechnung auf 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 reagieren. Wir haben ein Servlet entwickelt, das auf POST-Anfragen wartet, sie an eine in der Nutzlast angegebene Ziel-URL überträgt und mit der vom Transfer empfangenen Antwort antwortet.

Ä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, müssen wir die Rewrites 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 und die restlichen URLs weiterhin an unseren index.html.

Proxy-API-Aufrufe

Nachdem wir unseren Server eingerichtet haben, definieren wir in scripts.js einen Proxy-URI, an den unser Browser Anfragen senden soll:

const PROXY_URI = SERVER_URI + "/proxy";

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

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 müssen Sie die deviceAccessRequest(...)-Aufrufe in den Funktionen postThermostatMode() und postTemperatureSetpoint() in scripts.js durch die Funktion proxyRequest(...) ersetzen.

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

$ firebase deploy

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

Cloud Functions-Berechtigungen bereitstellen

Im letzten Schritt müssen Sie die Zugriffsberechtigungen für Ihre Cloud Functions-Funktionen prüfen und dafür sorgen, dass Ihre clientseitige Anwendung sie aufrufen kann.

Rufen Sie in der Google Cloud Platform über das Menü den Tab „Cloud Functions“ auf 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 das neue Mitglied ein und wählen Sie „Cloud Functions > Cloud Functions-Aufrufer“ als Rolle aus. Wenn Sie auf „Speichern“ klicken, wird eine Warnmeldung angezeigt:

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

Herzlichen Glückwunsch, Sie haben alle Schritte abgeschlossen. Sie können jetzt Ihre Web-App aufrufen und die über Ihren Proxyserver weitergeleiteten Gerätesteuerungen ausprobieren.

Nächste Schritte

Möchten Sie mehr über den Gerätezugriff erfahren? In der Dokumentation zu Merkmalen findest du weitere Informationen zum Steuern anderer Nest-Geräte. Im Zertifizierungsprozess erfährst du, wie du dein Produkt auf den Markt bringen kannst.

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