Wearables verbinden: Oura Ring API-Integration

Wearable-Technologie wie der Oura Ring liefert eine Fülle persönlicher Gesundheitsdaten. Für Entwickler sind diese Daten eine Goldgrube für die Erstellung personalisierter Wellness-Anwendungen. Die Herausforderung liegt jedoch darin, auf diese Daten sicher zuzugreifen und sie dann aussagekräftig zu visualisieren.

In diesem Tutorial werden wir ein Wellness-Dashboard erstellen, das sich mit der Oura Ring API verbindet, Ihre täglichen Gesundheitsmetriken abruft und sie in einer übersichtlichen grafischen Oberfläche anzeigt. Wir verwenden einen modernen Web-Stack: Next.js als unser React-Framework und Recharts für die Datenvisualisierung.

Am Ende dieses Leitfadens verfügen Sie über eine funktionierende Webanwendung und ein solides Verständnis dafür, wie Sie Wearable-Tech-APIs in Ihre eigenen Projekte integrieren können. Dies ist eine praktische Fähigkeit für jeden, der sich für den boomenden Gesundheitstechnologiemarkt interessiert.

Das Problem verstehen

Während die Oura-App selbst hervorragend ist, möchten Sie möglicherweise Ihre Oura-Daten mit anderen Datenquellen korrelieren, benutzerdefinierte Visualisierungen erstellen oder eine einzigartige Wellness-Anwendung entwickeln. Die offizielle Oura API ist das Tor zu diesen Möglichkeiten. Die Integration mit einer beliebigen API, insbesondere mit einer, die OAuth2 zur Authentifizierung verwendet, kann jedoch knifflig sein.

Unser Ansatz wird sein, eine Next.js-Anwendung zu erstellen, die den OAuth2-Handshake abwickelt, die Zugriffstokens sicher speichert und diese Tokens dann verwendet, um Daten von der Oura API abzurufen. Diese Daten übergeben wir dann an unser Frontend, um sie in aufschlussreiche Diagramme zu rendern.

Voraussetzungen

• Ein Oura Ring und ein Oura-Konto.
• Node.js (v18 oder höher) und npm installiert.
• Grundlegende Kenntnisse in React und Next.js.

Schritt 1: Einrichten Ihrer Oura API-Anwendung

Zuerst müssen wir eine neue Anwendung im Oura-Entwicklerportal registrieren.

Was wir tun

Wir erstellen eine OAuth2-Anwendung, um eine Client-ID und ein Client-Secret zu erhalten, die unsere Next.js-App zur Authentifizierung bei der Oura API verwenden wird.

Implementierung

1. Gehen Sie zum Abschnitt „API Applications" in Ihrem Oura-Entwicklerportal und klicken Sie auf „Create New Application".
2. Füllen Sie die Anwendungsdetails aus.
3. Nach der Erstellung erhalten Sie eine Client-ID und ein Client-Secret. Bewahren Sie diese sicher auf; wir werden sie im nächsten Schritt benötigen.

Schritt 2: Initialisierung unseres Next.js-Projekts

Jetzt lassen Sie uns unsere Next.js-Anwendung zum Laufen bringen.

Was wir tun

Wir erstellen ein neues Next.js-Projekt und richten unsere Umgebungsvariablen ein, um unsere Oura API-Anmeldedaten sicher zu speichern.

Implementierung

npx create-next-app@latest oura-wellness-dashboard
cd oura-wellness-dashboard

Erstellen Sie als Nächstes eine Datei namens .env.local im Stammverzeichnis Ihres Projekts und fügen Sie Ihre Oura API-Anmeldedaten hinzu:

OURA_CLIENT_ID=your_client_id
OURA_CLIENT_SECRET=your_client_secret
NEXTAUTH_URL=http://localhost:3000

Wie es funktioniert

Die .env.local-Datei ist eine spezielle Datei in Next.js zum Speichern von Umgebungsvariablen, die nicht in die Quellcodeverwaltung übertragen werden. Dadurch bleiben Ihre API-Schlüssel geheim und sicher.

Schritt 3: Implementierung der Oura API-Authentifizierung

Wir verwenden Next.js-API-Routen, um den OAuth2-Flow zu abzuschließen.

Was wir tun

Wir erstellen zwei API-Routen: eine, um den Benutzer zur Oura-Autorisierungsseite weiterzuleiten, und eine weitere, um den Callback von Oura zu verarbeiten, nachdem der Benutzer die Berechtigung erteilt hat.

Implementierung

Zuerst erstellen wir die Login-Route. Erstellen Sie eine neue Datei unter pages/api/auth/login.js:

// pages/api/auth/login.js
export default function handler(req, res) {
  const authUrl = `https://cloud.ouraring.com/oauth/authorize?client_id=${process.env.OURA_CLIENT_ID}&redirect_uri=${process.env.NEXTAUTH_URL}/api/auth/callback&response_type=code&scope=daily`;
  res.redirect(authUrl);
}

Jetzt erstellen wir die Callback-Route unter pages/api/auth/callback.js:

// pages/api/auth/callback.js
import { serialize } from 'cookie';

export default async function handler(req, res) {
  const { code } = req.query;

  if (!code) {
    return res.status(400).send('No code provided');
  }

  const tokenResponse = await fetch('https://api.ouraring.com/oauth/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams({
      grant_type: 'authorization_code',
      code,
      redirect_uri: `${process.env.NEXTAUTH_URL}/api/auth/callback`,
      client_id: process.env.OURA_CLIENT_ID,
      client_secret: process.env.OURA_CLIENT_SECRET,
    }),
  });

  const tokenData = await tokenResponse.json();

  if (tokenData.error) {
    return res.status(400).json(tokenData);
  }

  const cookie = serialize('oura_token', tokenData.access_token, {
    httpOnly: true,
    secure: process.env.NODE_ENV !== 'development',
    maxAge: tokenData.expires_in,
    sameSite: 'lax',
    path: '/',
  });

  res.setHeader('Set-Cookie', cookie);
  res.redirect('/dashboard');
}

Wie es funktioniert

Die /api/auth/login-Route leitet den Benutzer einfach zur Oura-Autorisierungsseite mit unserer client_id und redirect_uri weiter. Sobald der Benutzer zustimmt, leitet Oura ihn zurück zu unserer /api/auth/callback-Route mit einem temporären code.

Im Callback tauschen wir diesen code gegen ein access_token aus. Dieses access_token speichern wir dann in einem httpOnly-Cookie für eine sichere Speicherung.

Schritt 4: Abrufen und Anzeigen von Oura-Daten

Jetzt, da wir authentifiziert sind, können wir die Benutzerdaten abrufen und auf einer Dashboard-Seite anzeigen.

Was wir tun

Wir erstellen eine neue Seite unter pages/dashboard.js, die die Oura-Daten serverseitig mit getServerSideProps abruft und sie dann an die Seitenkomponente übergibt, um sie zu rendern. Außerdem installieren wir die recharts-Bibliothek für unsere Diagramme.

Implementierung

Installieren Sie zuerst recharts:

npm install recharts

Erstellen Sie jetzt die Datei pages/dashboard.js:

// pages/dashboard.js
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

export default function Dashboard({ sleepData, readinessData, activityData }) {
  return (
    <div>
      <h1>Your Oura Wellness Dashboard</h1>
      <div style={{ width: '100%', height: 300 }}>
        <h2>Sleep Score</h2>
        <ResponsiveContainer>
          <BarChart data={sleepData}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="day" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Bar dataKey="score" fill="#8884d8" />
          </BarChart>
        </ResponsiveContainer>
      </div>
      {/* Add similar charts for readiness and activity data */}
    </div>
  );
}

export async function getServerSideProps(context) {
  const { oura_token } = context.req.cookies;

  if (!oura_token) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    };
  }

  const [sleepResponse, readinessResponse, activityResponse] = await Promise.all([
    fetch('https://api.ouraring.com/v2/usercollection/daily_sleep', {
      headers: {
        'Authorization': `Bearer ${oura_token}`,
      },
    }),
    // ... similar fetch calls for readiness and activity
  ]);

  const sleepJson = await sleepResponse.json();
  // ... similar json parsing for readiness and activity

  return {
    props: {
      sleepData: sleepJson.data,
      // ... readinessData and activityData
    },
  };
}

Abschließend erstellen wir eine einfache Startseite unter pages/index.js mit einem Login-Button:

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Welcome to your Wellness Dashboard</h1>
      <a href="/api/auth/login">Login with Oura</a>
    </div>
  );
}

Wie es funktioniert

In getServerSideProps greifen wir auf das oura_token aus den Cookies zu. Wenn es nicht existiert, leiten wir den Benutzer zur Startseite weiter, um sich einzuloggen. Wenn es existiert, verwenden wir es im Authorization-Header, um Anfragen an die Oura API-Endpunkte für Schlaf-, Bereitschafts- und Aktivitätsdaten zu stellen. Diese Daten werden dann als Props an unsere Dashboard-Komponente übergeben, die Recharts verwendet, um ein einfaches Balkendiagramm zu erstellen.

Alles zusammenführen

Mit allen Teilen an Ort und Stelle können Sie jetzt Ihre Anwendung ausführen:

npm run dev

Navigieren Sie zu http://localhost:3000. Sie sollten den Login-Button sehen. Wenn Sie darauf klicken, werden Sie durch den Oura-Authentifizierungsflow geführt und zu Ihrem Dashboard mit Ihren visualisierten Schlafdaten weitergeleitet!

Best Practices für die Sicherheit

• HttpOnly-Cookies: Wir speichern das Zugriffstoken in einem httpOnly-Cookie, was bedeutet, dass es nicht von clientseitigem JavaScript zugegriffen werden kann. Dies hilft, XSS-Angriffe zu mildern.
• Serverseitiger Datenabruf: Durch das Abrufen der Daten in getServerSideProps wird unser Zugriffstoken niemals dem Browser des Clients ausgesetzt.

Fazit

Sie haben nun erfolgreich eine Next.js-Anwendung erstellt, die sich bei der Oura Ring API authentifizieren, Benutzerdaten abrufen und sie in einem Wellness-Dashboard visualisieren kann. Dieses Projekt dient als großartige Grundlage für den Aufbau komplexerer und personalisierter Gesundheits- und Wellness-Anwendungen.

Ressourcen

• Oura API V2 Dokumentation
• Next.js API Routes Dokumentation
• Recharts Dokumentation

Kurzübersicht

Häufig gestellte Fragen

F: Woher weiß ich, ob dies auf mich zutrifft? A: Besprechen Sie Ihre persönliche und familiäre Krankengeschichte mit Ihrem Arzt, um Ihre individuellen Risikofaktoren zu bewerten und geeignete nächste Schritte zu bestimmen.

F: Was sollte ich meinen Arzt fragen? A: Gute Fragen sind: „Was bedeuten meine Ergebnisse?", „Was sind meine Optionen?", „Welche Lebensstiländerungen würden helfen?" und „Wann sollte ich nachfolgen?"

F: Gibt es Lebensstiländerungen, die helfen können? A: Die meisten Erkrankungen profitieren von grundlegenden Maßnahmen: ausgewogene Ernährung, regelmäßige körperliche Aktivität (150+ Minuten/Woche), качественный Schlaf (7-9 Stunden), Stressbewältigung und Vermeidung von Tabak.

Haftungsausschluss

Dieser Artikel dient nur zu Bildungszwecken und stellt keine medizinische Beratung dar. Konsultieren Sie immer einen qualifizierten Arzt, bevor Sie Entscheidungen über Ihre Gesundheit, Behandlung oder Pflege treffen. Individuelle Umstände variieren, und was für eine Person angemessen ist, ist möglicherweise nicht für eine andere Person geeignet.

Wenn Sie einen medizinischen Notfall erleben, rufen Sie sofort 911 (oder Ihre örtliche Notrufnummer) an.