Webanwendung für den Gerätezugriff erstellen

1. Einführung

Das Gerätezugriff-Programm bietet die Smart Device Management API, eine REST API, mit der Entwickler Google Nest-Geräte über ihre Apps steuern können. Nutzer müssen dem Zugriff Dritter auf ihre Nest-Geräte zustimmen.

Für eine erfolgreiche Integration des Gerätezugriffs sind drei wichtige Schritte erforderlich:

1. Projekterstellung – Erstellen Sie ein Projekt in der Google Cloud Platform und registrieren Sie sich als Entwickler in der Gerätezugriffskonsole.
2. Kontoverknüpfung – Du kannst Nutzer mithilfe des Kontoverknüpfungsvorgangs aufrufen und einen Zugriffscode abrufen. Tauschen Sie den Code gegen ein Zugriffstoken aus.
3. Gerätesteuerung: Sie können Smart Device Management API-Anfragen zur Gerätesteuerung stellen, indem Sie Befehle mit dem Zugriffstoken senden.

In diesem Codelab werfen wir einen genaueren Blick auf die Funktionsweise des Gerätezugriffs. Dazu erstellen wir eine Webanwendung, die die Authentifizierung abwickelt und Smart Device Management API-Aufrufe durchführt. Außerdem wird die Bereitstellung eines einfachen Proxyservers mithilfe von Node.js und Express zur Weiterleitung von Gerätezugriffsanfragen untersucht.

Bevor du beginnst, wäre es schön, dich mit den gängigen Webtechnologien, die wir in diesem Codelab verwenden, noch einmal auffrischen zu können, z. B. die Authentifizierung mit OAuth 2.0 oder das Erstellen einer Webanwendung mit Node.js, auch wenn diese nicht zwingend erforderlich sind.

Voraussetzungen

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

Lerninhalte

• Firebase-Projekt einrichten, das statische Webseiten und Cloud Functions hostet
• Gerätezugriffsanfragen ü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 Gerätezugriff-Integration einzurichten. Eine im GCP-Projekt generierte Client-ID und ein Clientschlüssel werden als Teil 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 an. Außerdem wird eine Projekt-ID [GCP-Project-Id] für Google Cloud angezeigt. Notieren Sie sich diese, da sie beim Einrichten von Firebase verwendet wird. Diese ID wird in diesem Codelab als [GCP-Project-Id] bezeichnet.

Aktivieren Sie zuerst die erforderliche API-Bibliothek für Ihr Projekt. Gehen Sie zu APIs und Dienste > Bibliothek und suchen Sie nach der Smart Device Management API. Sie müssen diese API aktivieren, um Ihr Projekt zum Senden von Anfragen an Device Access API-Aufrufe zu autorisieren.

Bevor wir mit dem Erstellen von OAuth-Anmeldedaten fortfahren, müssen wir den OAuth-Zustimmungsbildschirm für unser Projekt konfigurieren. Rufen Sie APIs und Dienste > OAuth-Zustimmungsbildschirm auf. Wählen Sie für 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 Testnutzer 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 werden später einen autorisierten JavaScript-Ursprung und einen autorisierten Weiterleitungs-URI hinzufügen. Wenn Sie diesen Vorgang abschließen, werden die [Client-Id] und der [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 den Nutzungsbedingungen begrüßt und es wird eine Registrierungsgebühr in Höhe von 5 $erhoben.

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 Schritte zur Projekterstellung abschließen, gelangen Sie zur Startseite für Ihr Projekt. Ihre [Project-Id] wird unter dem Namen aufgeführt, den Sie Ihrem Projekt gegeben haben.

Bitte notieren Sie sich Ihre [Projekt-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 Gerätezugriffskonsole 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 mit Firebase eine clientseitige Webanwendung für die Gerätezugriff-Einbindung.

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 den folgenden Bildschirm sehen:

Firebase-Tools installieren

Firebase bietet eine Reihe von Befehlszeilentools zum Erstellen und Bereitstellen Ihrer App. Öffnen Sie zum Installieren dieser Tools ein neues Terminalfenster und führen Sie den folgenden Befehl aus. Dadurch werden Firebase-Tools global installiert.

$ npm i -g firebase-tools

Prüfen Sie die Versionsinformationen, um zu prüfen, ob die Firebase-Tools korrekt installiert sind.

$ firebase --version

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

$ firebase login

Hosting-Projekt initialisieren

Sobald Sie sich anmelden können, besteht der nächste Schritt darin, ein Hostingprojekt für Ihre Webanwendung zu initialisieren. Gehen Sie im Terminal zu dem Ordner, in dem Sie Ihr Projekt erstellen möchten, und führen Sie den folgenden Befehl aus:

$ firebase init hosting

In Firebase werden Ihnen einige Fragen gestellt, 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. Was möchten Sie als öffentliches Verzeichnis verwenden? – Öffentlich
4. Als Single-Page-App 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 soeben bereitgestellte Seite angezeigt werden:

Sie kennen nun die Grundlagen zum Bereitstellen einer Webseite mit Firebase. Als Nächstes geht es um die Bereitstellung unseres Codelab-Beispiels.

4. Codelab-Beispiel

Mit dem folgenden Befehl können Sie das auf GitHub gehostete Codelab-Repository 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 von der aktuellen Stelle in diesem Codelab aus loslegen können. Der Ordner „codelab-done“ enthält eine vollständige Version dieses Codelab mit dem voll funktionsfähigen Client und Node.js-Server.

Wir werden in diesem Codelab die Dateien aus dem Ordner codelab-start verwenden. Wenn du jedoch nicht weiterweißt, kannst du auch die Codelab-Fertig-Version als Referenz verwenden.

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 Anwendung verantwortlich. In der codelab-done-Version sehen Sie auch ein functions-Verzeichnis mit Logik für unseren Proxyserver (Express), der in Google Cloud-Funktionen bereitgestellt werden soll.

Codelab-Beispiel bereitstellen

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

$ firebase deploy

Sobald die Bereitstellung von Firebase abgeschlossen ist, sollten Sie die Codelab-Anwendung sehen:

Für das Initiieren des Authentifizierungsvorgangs sind Partneranmeldedaten erforderlich. Diese werden im nächsten Abschnitt behandelt.

5. Umgang mit OAuth

OAuth ist der Webstandard für die Zugriffsdelegierung. Er wird häufig für Nutzer verwendet, um Anwendungen von Drittanbietern Zugriff auf ihre Kontoinformationen zu gewähren, ohne dass Passwörter weitergegeben werden. Wir verwenden OAuth 2.0, damit Entwickler über den Gerätezugriff auf Nutzergeräte zugreifen können.

Weiterleitungs-URI angeben

Der erste Schritt des OAuth-Vorgangs beinhaltet die Übergabe einer Reihe von Parametern an den Google OAuth 2.0-Endpunkt. 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) in scripts.js mit Ihrer eigenen Hosting-URL:

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 den Weiterleitungs-URI in der Skriptdatei aktualisiert haben, müssen Sie ihn auch der Liste der zulässigen Weiterleitungs-URIs für die Client-ID hinzufügen, die Sie für Ihr Projekt erstellt haben. Gehen Sie in der Google Cloud Platform zur Seite „Anmeldedaten“. 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 an!

Rufen Sie die Hosting-URL auf, die Sie mit Firebase eingerichtet haben, geben Sie Ihre Partner-Anmeldedaten ein und klicken Sie auf die Schaltfläche ANMELDEN. Die Client-ID und der Clientschlüssel sind die Anmeldedaten, die Sie von der Google Cloud Platform erhalten haben. Die Projekt-ID stammt aus der Gerätezugriffskonsole.

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

Wenn Sie ein 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 als Testnutzer bei der Einrichtung des OAuth-Zustimmungsbildschirms verwenden, hinzugefügt haben.

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

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

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

Da es sich um eine Simulations-App handelt, gibt Google eine Warnung aus, bevor eine Weiterleitung veranlasst wird.

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

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

6. Gerätesteuerung

Die Beispiel-App „Gerätezugriff“ steuert Google Nest-Geräte mithilfe von REST API-Aufrufen für die Smart Device Management. Diese Aufrufe beinhalten die Übergabe des Zugriffstokens im Header einer GET- oder POST-Anfrage zusammen mit einer für bestimmte Befehle erforderlichen Nutzlast.

Wir haben eine generische Zugriffsanfragefunktion entwickelt, um diese Aufrufe zu verarbeiten. Sie müssen jedoch den richtigen Endpunkt sowie bei Bedarf das Nutzlastobjekt für diese Funktion angeben.

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

• Methode: 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, mit der Projekt-ID und der Geräte-ID (nach dem https://smartdevicemanagement.googleapis.com/v1 angehängt)
• 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 beispielhafte UI-Steuerelemente (Geräte auflisten, Set-Modus, Temperatur einstellen) erstellen, um einen Nest Thermostat zu steuern:

Diese UI-Steuerelemente rufen die entsprechenden Funktionen (listDevices(), postThermostatMode(), postTemperatureSetpoint()) aus scripts.js auf. Sie können sie auch nicht implementieren. Das Ziel besteht darin, 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. Sie verwendet eine GET-Anfrage und benötigt keine Nutzlast. 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 die Änderungen und stellen Sie das Firebase-Projekt mit dem folgenden Befehl noch einmal bereit:

$ firebase deploy

Versuchen Sie nach der Bereitstellung der neuen Version der App, die Seite zu aktualisieren, und klicken Sie auf GERÄTE AUFLISTEN. Dies sollte in der Liste unter Gerätesteuerung erscheinen. Dort sollten Sie 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 deviceId für das Gerät angeben, das gesteuert werden soll.

Thermostatsteuerung

Es gibt zwei Eigenschaften für die grundlegende Steuerung eines Nest Thermostats in der Smart Device Management API. ThermostatMode und TemperatureSetpoint. Über den Thermostatmodus wird für Ihren Nest Thermostat einer der vier möglichen Modi ausgewählt: {Aus, Heizen, Kühlen, Heizen}. Anschließend müssen wir den ausgewählten Modus als Teil der Nutzlast bereitstellen.

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(), steuert die Einstellung der Temperatur (in Celsius) deines Nest Thermostats. Es gibt zwei Parameter, die in der Nutzlast festgelegt werden können: heatCelsius und coolCelsius, je nach ausgewähltem Thermostatmodus.

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 des Thermostats festzulegen und entsprechend eine TemperatureSetpoint-Änderung vorzunehmen. heatCelsius und coolCelsius können nur in den entsprechenden Modi gesendet werden. Wenn die Temperatur in einem nicht unterstützten Modus festgelegt wird, 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 über einen Browser senden kann. Für diejenigen, die serverseitig entwickeln möchten, möchten wir mit einem Proxyserver beginnen, der Ihre Anfragen vom Browser aus umleiten kann.

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

Cloud Functions initialisieren

Öffnen Sie ein neues Terminalfenster, rufen Sie Ihr Projektverzeichnis auf und führen Sie folgenden Befehl aus:

$ firebase init functions

Firebase stellt Ihnen eine Reihe von Fragen zum Initialisieren von Cloud Functions:

1. Welche Sprache möchten Sie zum Schreiben von Cloud Functions-Funktionen verwenden? – 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 installiert. Sie sehen, dass Ihr Projektordner ein Funktionsverzeichnis enthält, mit der Datei index.js zur Definition der Cloud Functions-Funktionen, mit package.json die Einstellungen und dem Verzeichnis node_modules für die Abhängigkeiten.

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 „npm install“ aus dem Funktionsverzeichnis ausführen, sollten Sie Abhängigkeiten für Ihr Projekt installieren:

$ npm install

Falls bei npm Probleme beim Herunterladen von Paketen auftreten, können Sie versuchen, xmlhttprequest und ausdrücklich mit dem folgenden Befehl zu speichern:

$ npm install express xmlhttprequest --save

Upgrade auf Blaze-Tarif

Wenn du den Befehl firebase deploy verwendest, musst du ein Upgrade auf den Tarif „Blaze“ ausführen. Dafür musst du deinem Konto eine Zahlungsmethode hinzufügen. Rufen Sie Projektübersicht > Nutzung und Abrechnung auf und wählen Sie den Tarif „Blaze“ für Ihr Projekt aus.

Express-Server erstellen

Ein Express-Server verwendet ein einfaches Framework für die Beantwortung eingehender GET- und POST-Anfragen. Wir haben ein Servlet erstellt, das auf POST-Anfragen wartet, diese an eine Ziel-URL überträgt, die in der Nutzlast angegeben ist, und mit der von der Übertragung erhaltenen Antwort antwortet.

Ändern Sie die Datei index.js im Funktionsverzeichnis so:

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);

Um Anfragen an unseren Server weiterzuleiten, müssen wir das Umschreiben 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. Der Rest geht weiter zu index.html.

Proxy-API-Aufrufe

Der Server ist bereit. Definieren wir nun einen Proxy-URI in scripts.js, damit der Browser Anfragen an diese Adresse sendet:

const PROXY_URI = SERVER_URI + "/proxy";

Fügen Sie dann für indirekte Gerätezugriffsaufrufe die proxyRequest-Funktion scripts.js hinzu, die dieselbe Signatur wie die deviceAccessRequest(...)-Funktion 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 werden die deviceAccessRequest(...)-Aufrufe in den Funktionen postThermostatMode() und postTemperatureSetpoint() innerhalb von scripts.js durch die Funktion proxyRequest(...) ersetzt.

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

$ firebase deploy

Damit haben Sie jetzt einen ausgeführten Node.js-Proxyserver, der Express in Cloud Functions verwendet.

Cloud Functions-Berechtigungen erteilen

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

Öffnen Sie in der Google Cloud Platform im Menü den Tab „Cloud Functions“ und wählen Sie dann Ihre Cloud Functions-Funktion aus:

Klicken Sie auf Berechtigungen und dann auf Mitglied hinzufügen. Schreiben Sie allUsers in das Feld für neue Mitglieder 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 nutzen.

Herzlichen Glückwunsch – Sie haben alle Schritte abgeschlossen. Sie können jetzt die Web-App aufrufen und die über Ihren Proxyserver weitergeleitete Gerätesteuerung ausprobieren.

Nächste Schritte

Möchten Sie Ihre Kenntnisse zum Gerätezugriff vertiefen? In der Dokumentation zu Traits findest du weitere Informationen zur Steuerung anderer Nest-Geräte und den Zertifizierungsprozess, um zu erfahren, wie du dein Produkt weltweit auf den Markt bringen kannst.

Vertiefen Sie Ihre Kenntnisse mit der Beispiel-App für den Gerätezugriff, in der Sie auf Ihrer Codelab-Erfahrung aufbauen und eine funktionierende Webanwendung bereitstellen, um Nest-Kameras, -Türklingeln und -Thermostate zu steuern.