Fügen Sie Ihrer Nuxt-Applikation 2FA mit Nexmo Verify hinzu

In diesem Tutorial werden wir eine einfache Anwendung mit Zwei-Faktor-Authentifizierung unter Verwendung der Nuxt JS Framework.

Unsere Anwendung enthält einen geheimen Bereich, auf den nur zugegriffen werden kann, wenn sich der Nutzer durch Eingabe eines per SMS zugesandten PIN-Codes verifiziert.

Wenn Sie sich den gesamten Code für dieses Beispiel ansehen möchten, können Sie einen Blick auf die Datei nexmo-verify-nuxt Repository auf unserem Nexmo Community GitHub.

Voraussetzungen

Wenn Sie mitmachen wollen, benötigen Sie die folgenden Dinge:

• Node JS - diese Anwendung wurde mit Version 10.0 erstellt, aber sie sollte auch mit Version 8 oder höher funktionieren.

• Vorherige Erfahrung mit VueJS wäre hilfreich, ist aber nicht unbedingt notwendig. Dies ist eine sehr grundlegende App und dient als guter Einstieg für neue Lernende.

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

In diesem Lernprogramm wird auch eine virtuelle Telefonnummer verwendet. Um eine zu erwerben, gehen Sie zu Rufnummern > Rufnummern kaufen und suchen Sie nach einer Nummer, die Ihren Anforderungen entspricht.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Einführung in Nuxt

Nuxt ist ein Framework für die Erstellung von "Universal Vue.js Applications". Im Wesentlichen bedeutet dies, dass Sie bei der Verwendung von Nuxt die Möglichkeit haben, Ihre fertige App für die Produktion auf drei verschiedene Arten zu erstellen:

1. Als serverseitig gerenderte Anwendung, die das gesamte HTML, das im Browser gerendert werden soll, zur Laufzeit auf der Serverseite erstellt und dann an den Benutzer sendet.

2. Als Single Page Application, bei der das gesamte UI-Rendering zur Laufzeit im Browser stattfindet. Dies würde einer traditionellen Vue-JS-Anwendung am ähnlichsten sein.

3. Als statische Website, bei der alle HTML-, CSS- und JS-Dateien in statische Dateien umgewandelt werden, die Sie auf Amazon S3, GitHub-Seiten, Netlify - wo immer Sie wollen!

Es ist ein wirklich flexibles Framework, mit dem ich als Vue JS-Fan sehr gerne gearbeitet habe. Wenn Sie mehr darüber erfahren möchten, dann lesen Sie die Einführung in Nuxt JS in ihrer Dokumentation.

Warum in diesem Fall Nuxt verwenden?

Ich habe Nuxt für dieses Tutorial ausgewählt, weil ich ein paar Funktionen hervorheben wollte, die mich wirklich beeindruckt haben und die die Möglichkeiten der Arbeit mit einem Framework wie diesem fast grenzenlos machen. Diese sind:

• Serverseitiges Rendering

• Kundenspezifische Server-Middleware

Machen Sie sich keine Sorgen, wenn Sie noch nicht wissen, was das ist. Wir werden sie noch früh genug behandeln. Fangen wir mit dem Code für unsere App an, indem wir Nuxt installieren und unsere Ordnerstruktur aufbauen.

Strukturieren Sie die Anwendung

Beginnen Sie mit der Erstellung eines leeren Ordners, den Sie nach Belieben benennen können.

Wir werden Folgendes verwenden NPM verwenden, um die Abhängigkeiten für dieses Projekt zu installieren, also beginnen Sie mit der Ausführung:

Installieren Sie dann die Abhängigkeiten:

Wir werden auch mit dem ausgezeichneten dotenv Paket arbeiten, um unsere Umgebungsvariablen zu verwalten, also installieren Sie es als devDependency.

Bevor wir uns mit der Ordnerstruktur der App befassen, müssen wir noch eine kleine Änderung vornehmen. Öffnen Sie package.json in Ihrem Editor und ersetzen Sie den scripts Abschnitt durch diesen:

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start"
}

Hinzufügen der Ordnerstruktur

Nuxt verwendet eine Reihe von spezifischen Ordnern, um sich selbst zu organisieren. Oft wird durch das Vorhandensein dieser Ordner sichergestellt, dass die Abhängigkeiten für die Ausführung bestimmter Dinge automatisch enthalten sind, wenn Sie Ihre App erstellen.

Zum Beispiel, wenn Sie VueX in Ihrer Anwendung verwenden müssen, um den gemeinsamen Zustand zu verwalten, brauchen Sie es nicht zu installieren. Erstellen Sie einfach einen Ordner namens storeund füge ein index.js hinein und Nuxt wird automatisch VueX für dich einbinden. Das ist ziemlich cool.

Wir werden Wir werden VueX und ein paar andere Dinge in unserer App verwenden, also erstellen Sie im Stammverzeichnis Ihres Arbeitsverzeichnisses ein paar neue Ordner:

Die pages, store, und middleware Verzeichnisse sind spezifisch für Nuxt, dafür sind sie gedacht:

• pages - Dies ist der Ort, an dem Sie die Seiten Ihrer Website aufbewahren. Nuxt unterstützt automatische Routengenerierung die mit Ihrer Ordnerstruktur übereinstimmt. Um zum Beispiel https://myapp.xyz/register zu erreichen, müssten Sie einen Ordner namens register innerhalb des Ordners pages Ordner.

• store - Dieser Ordner enthält Ihre VueX-Store-Dateien. VueX wird automatisch eingebunden, wenn Sie diesen Ordner haben.

• middleware - Wenn Sie benutzerdefinierte Funktionen definieren wollen, die vor dem Rendern der Seiten ausgeführt werden sollen, müssen sie hier untergebracht werden.

Wenn Sie mehr darüber erfahren möchten, wie die Ordnerstruktur in Nuxt auf Aktionen abgebildet wird, schauen Sie sich deren Verzeichnisstruktur Anleitung.

Konfiguration, Styling, Shop und das Standard-Layout

Da es am besten ist, sich auf den Kernaspekt dieses Tutorials zu konzentrieren, werde ich vorschlagen, dass Sie bestimmte Aspekte direkt aus dem Repository oder aus Codeblöcken kopieren, um die Geschwindigkeit zu erhöhen.

Erstellen Sie im Stammverzeichnis Ihres Arbeitsverzeichnisses eine neue Datei namens ed nuxt.config.js und öffnen Sie sie. Fügen Sie den folgenden Code ein:

module.exports = {
  head: {
    meta: [
      { name: 'viewport', content: 'width=device-width, initial-scale=1.0' }
    ],
    script: [
      {
        src:
          'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js',
        body: true
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/icon?family=Material+Icons'
      },
      {
        rel: 'stylesheet',
        href:
          'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css'
      }
    ]
  },
  loading: false,
  build: {
    vendor: ['axios']
  },
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
};

Dadurch wird sichergestellt, dass das gesamte Styling und die Schriftarten, die ich verwendet habe, auch in Ihrer Version funktionieren. Wir verwenden Materialize CSS als UI-Framework, Sie können die deren Dokumentation wenn Sie weitere Informationen zu einem der Layout-Elemente benötigen.

Für weitere Informationen zur Konfiguration von Nuxt, finden Sie in der Anleitung.

Als nächstes öffnen Sie den Ordner layouts Ordner und erstellen Sie eine neue Datei namens default.vue. Fügen Sie das folgende Markup hinzu:

<template>
  <div class="container">
    <nuxt/>
  </div>
</template>

Dadurch wird sichergestellt, dass alle anderen Ansichten, die wir erstellen, ordnungsgemäß enthalten und korrekt angeordnet sind.

Diese Anwendung verwendet eine Zustandsverwaltung, also erstellen Sie innerhalb des store Ordner eine Datei namens index.js und fügen Sie den folgenden Code ein:

import Vuex from 'vuex';

export const store = () => {
  return new Vuex.Store({
    state: {
      token: null
    },
    mutations: {
      SET_TOKEN(state, token) {
        state.token = token || null;
      },
      INVALIDATE_TOKEN(state) {
        state.token = null;
      }
    },
    getters: {
      isVerified(state) {
        return state.token;
      }
    }
  });
};

export default store;

Wenn Sie das geschafft haben, ist es an der Zeit, etwas Code zu schreiben!

Erstellen Sie die Seiten

Die App, die wir entwickeln, hat zwei Seiten. Die erste ist eine Landing Page mit einem Anmeldeformular, die zweite ist ein geheimer Bereich, auf den die Nutzer zugreifen können, sobald sie verifiziert wurden.

Wir arbeiten zuerst an der Landing Page. Innerhalb des pages Verzeichnis erstellen Sie eine neue Datei namens index.vue.

Die Landing Page

Öffnen Sie die Datei index.vue Datei in Ihrem Editor und fügen Sie den folgenden Code hinzu:

<template>
  <div>
    <div class="row">
      <div class="col s12 center-align">
        <h1><i class="medium material-icons">verified_user</i> Login</h1>
      </div>
    </div>
    <div class="row" v-if="request.token === ''">
      <form v-on:submit.prevent class="col s12">
      <div class="row center-align">
        <div class="input-field col s12">
          <i class="material-icons prefix">phone</i>
          <input type="text" id="phoneNumber" v-model="phoneNumber"/>
          <label for="phoneNumber"> Phone Number</label>
        </div>
        <div class="row center-align">
          <button v-on:click.stop.prevent="sendVerificationCode" type="submit" class="waves-effect waves-light btn"><i class="material-icons left">account_box</i>Send me a verifiation code</button>
        </div>
      </div>
    </form>
    </div>
    <div class="row" v-else>
      <form v-on:submit.prevent class="col s12">
        <div class="row center-align">
          <div class="input-field col s12">
            <i class="material-icons prefix">sms</i>
            <input type="text" id="verificationPin" v-model="request.verificationPin"/>
            <label for="verificationPin"> Enter the pin you were sent</label>
          </div>
          <div class="row center-align">
            <button v-on:click.stop.prevent="verifyPin" type="submit" class="waves-effect waves-light btn"><i class="material-icons left">account_box</i>Verify me</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
import axios from 'axios';

export default {
  data() {
    return {
      phoneNumber: '',
      request: {
        token: '',
        verificationPin: ''
      }
    };
  },
  methods: {
    displayMessage: function(type, message) {
      if (type === 'error') {
        M.toast({
          html: `${message}`,
          classes: 'rounded red accent-1',
          displayTime: 3000
        });
      }
    },

    sendVerificationCode: async function() {
      const { data } = await axios.post('/verification/send', {
        phoneNumber: this.phoneNumber
      });
      if (!data.token) {
        this.displayMessage('error', data.error_text || data.error);
      } else {
        const { token } = data;
        this.request.token = token;
      }
    },

    verifyPin: async function() {
      const { data } = await axios.post('/verification/verify', {
        token: this.request.token,
        code: this.request.verificationPin
      });
      if (!data.token) {
        this.displayMessage('error', data.error_text || data.error);
      } else {
        const { token } = data;
        this.$store.commit('SET_TOKEN', token);
        this.$nuxt.$router.replace({ path: '/secret' });
      }
    }
  }
};
</script>

Es gibt zwei Abschnitte in dieser Datei, <template> und <script>. Der Abschnitt <template> Abschnitt enthält das HTML für unser Anmeldeformular und der <script> Abschnitt enthält alle Methoden, die wir brauchen, um mit dem Formular etwas zu tun.

Wir stellen hier drei Methoden vor, und zwar der Reihe nach, was sie tun:

• displayMessage - Dies ist nur eine Hilfsfunktion, die alle über die API zurückgegebenen Fehler in einer überlagerten Fehlermeldung anzeigt. Die Klassen, die Sie dort sehen, kommen direkt von Materialize CSS.

• sendVerificationCode - Nimmt die vom Benutzer eingegebene Telefonnummer und übergibt sie an unsere Middleware-API für die Arbeit mit Nexmo Verify

• verifyPin - Wenn der Benutzer seinen PIN-Code erhält, muss er ihn auch hier eingeben. Diese Methode leitet ihn an den Verify-Endpunkt in unserer Middleware-API weiter.

An dieser Stelle können Sie die Anwendung ausführen:

Wenn alles in Ordnung ist, sollten Sie die folgende Seite aufrufen können https://localhost:3000 und dies sehen:

Leider wird ein Klick auf "Send Me a Verification Code" nichts bewirken, da unser Code versucht, die Nummer an einen Endpunkt namens /verification/send der nicht existiert.

Es ist an der Zeit, auf die Serverseite zu wechseln.

Hinzufügen einer Mini-Verifizierungs-API

Die Nexmo Verify API erfordert die Verwendung eines Schlüssels und eines Geheimnisses zur Authentifizierung von Anfragen. In typischen Browser gerenderten oder Single-Page-Applikationen wäre dies nicht möglich, ohne dass wir unseren geheimen Schlüssel der Welt preisgeben - eine Katastrophe.

Der übliche Weg zur Lösung dieses Problems besteht darin, ein schnelles NodeJS-Skript zu erstellen, das einige Express-Endpunkte bereitstellt, auf die Sie zugreifen können, um das Gewünschte zu erreichen, während Sie Ihre Schlüssel geheim halten.

Der Nachteil ist, dass die Suche nach einem Ort, an dem Sie dieses Skript zusätzlich zu Ihrer Nuxt-App hosten können, mehr Aufwand bedeutet, als Sie benötigen, es sei denn, Ihre App benötigt wirklich eine umfangreiche API mit vielen Endpunkten und serverseitigen Funktionen.

Wussten Sie, dass Sie Express innerhalb von Nuxt ausführen können?

Das ist richtig. Da Nuxt die Dinge bereits serverseitig rendert, ist technisch gesehen NodeJS bereits im Spiel, was bedeutet, dass Sie Pakete wie Express als serverseitige Middleware verwenden.

Das bedeutet, dass kein zusätzlicher Server für unsere kleine Verifizierungs-API benötigt wird!

Eine Datei, zwei Endpunkte, alles serverseitig

Erstellen Sie eine neue Datei im Ordner node-scripts Ordner mit dem Namen verification_api.js und öffnen Sie sie in Ihrem Editor.

if (process.env.NODE_ENV !== 'production') {
  require('dotenv').config();
}
const express = require('express');
const Nexmo = require('nexmo');
const jwt = require('jsonwebtoken');

const API_KEY = process.env.apiKey;
const API_SECRET = process.env.apiSecret;
const JWT_SECRET = process.env.jwtSecret;

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

const nexmo = new Nexmo({ apiKey: API_KEY, apiSecret: API_SECRET });

app.post('/send', async (req, res) => {
  // Get the phone number from the request body of our main app
  let phoneNumber = req.body.phoneNumber;

  nexmo.verify.request(
    {
      number: phoneNumber,
      brand: 'MyApp',
      code_length: 6,
      pin_expiry: 60
    },
    async (err, result) => {
      if (err || result.status !== '0') {
        res.json({ error: err || result.error_text });
      } else {
        const accessToken = await jwt.sign(
          {
            phoneNumber,
            request_id: result.request_id
          },
          JWT_SECRET
        );
        res.json({ token: accessToken });
      }
    }
  );
});

app.post('/verify', async (req, res) => {
  let { token, code } = req.body;
  const tokenObject = await jwt.verify(token, JWT_SECRET);

  nexmo.verify.check(
    { request_id: tokenObject.request_id, code: code },
    async (err, result) => {
      if (err || result.status !== '0') {
        res.json({ error: err || result.error_text });
      } else {
        const tokenizeResult = await jwt.sign(result, JWT_SECRET);
        res.json({ token: tokenizeResult });
      }
    }
  );
});

app.post('/auth-check', async (req, res) => {
  let { token } = req.body;
  const tokenObject = await jwt.verify(token, JWT_SECRET);
  const { request_id } = tokenObject;

  nexmo.verify.search(request_id, async (err, result) => {
    if (err) {
      res.json({ error: err });
    } else {
      res.json(result);
    }
  });
});

module.exports = {
  path: '/verification',
  handler: app
};

Diejenigen von Ihnen, die mit Node & Express Applications vertraut sind, werden sich mit diesem Code sofort zu Hause fühlen.

Es gibt drei Endpunkte, /send, /verify und /auth-check werden ausgesetzt. Hier ist, was sie tun:

• /send - Empfängt die Telefonnummer des Benutzers aus dem Formular und erstellt eine neue Verifizierungsanfrage unter Verwendung des Nexmo-Knoten-SDK. Die request_id dieser neuen Anfrage wird in ein signiertes JSON-Web-Token umgewandelt und an das Frontend zurückgeschickt.

• /verify - Erhält den JWT und den PIN-Code vom Benutzer zurück. Der JWT wird entschlüsselt und das Original request_id wird extrahiert und dann zusammen mit dem Pin an die Verify API weitergeleitet, um zu sehen, ob sie übereinstimmen. Wenn ja, ist die Überprüfung erfolgreich!

• /check-auth - Ist eine Hilfsmethode, mit der geprüft wird, ob bereits eine Berechtigung für die request_idvorhanden ist, so dass die Benutzer ihre Nummer nicht jedes Mal neu eingeben müssen.

Im Gegensatz zu einer typischen Express-App, bei der Sie server.listen auf einen Port setzen, werden wir unser gesamtes Skript als Modul exportieren, damit Nuxt darauf verweisen kann.

Bevor es jedoch funktioniert, erstellen Sie eine Datei namens .env im Stammverzeichnis Ihres Arbeitsverzeichnisses und fügen Sie Folgendes hinzu:

apiKey = "YOUR NEXMO API KEY GOES HERE"
apiSecret = "YOUR NEXMO API SECRET GOES HERE"
jwtSecret = "ANY RANDOM STRING OF LETTERS & NUMBERS GOES HERE"

Hinweis: Achten Sie darauf, dass .env nicht in GitHub-Repositories enthalten ist, indem Sie auch ein .gitignore zu Ihrem Arbeitsverzeichnis hinzufügen. Sie können die das ich für dieses Projekt erstellt habe.

Montage von serverseitiger Middleware

Um unsere neuen Endpunkte in unserer Nuxt-App zugänglich zu machen, sind zwei Schritte erforderlich.

Die erste ist die Registrierung des Skripts als Middleware in nuxt.config.js. Fügen Sie dazu die folgende Zeile hinzu:

serverMiddleware: ['~/node-scripts/verification_api'];

Wenn Sie genau prüfen wollen, wo das hingehört, können Sie das Beispiel auf GitHub referenzieren.

Der zweite Schritt ist die bauen die App so zu gestalten, dass diese neuen Routen (/verification/send und /verification/verify) verfügbar sind. Führen Sie dazu diesen Befehl in Ihrem Terminal aus:

Sobald dies abgeschlossen ist, starten Sie den Dev-Server neu:

Gehen Sie auf https://localhost:3000 und geben Sie Ihre Nummer in das Formular ein. Achten Sie darauf, dass Sie auch die Landesvorwahl eingeben.

Wenn Sie auf "Verifizierungscode senden" klicken, sollten Sie eine SMS mit einem 6-stelligen Pin-Code erhalten. Sie werden auch feststellen, dass sich die Ansicht geändert hat und nun auf die PIN wartet.

Die Eingabe der PIN schließt die Verifizierung ab, und wenn alles erfolgreich ist, versucht die App, zu einer Route namens /secret.

...die es noch nicht gibt. Lassen Sie uns das erstellen und dafür sorgen, dass es mit einer Nuxt-Middleware sicher ist.

Die Sicherung unserer geheimen Seite

Erstellen Sie einen neuen Ordner innerhalb des pages Ordner, nennen Sie ihn secret und fügen Sie eine Datei namens index.vue hinzu.

Öffnen Sie index.vue in Ihrem Editor und fügen Sie den folgenden Code ein:

<template>
  <div>
    <div class="row center-align">
      <h1>Secret Area</h1>
    </div>
    <div class="row center-align">
      <button v-on:click.stop.prevent="logout" class="waves-effect waves-light btn red"><i class="material-icons left">account_box</i>Logout</button>
    </div>
  </div>
</template>

<script>
export default {
  middleware: 'check_auth',
  methods: {
    // Clicking log out triggers this function that wipes out any pre-existing tokens
    logout: function() {
      this.$store.commit('INVALIDATE_TOKEN');
      this.$nuxt.$router.replace({ path: '/' });
    }
  }
};
</script>

Sie werden feststellen, dass dieser Code auf ein Stück Middleware namens check_auth. Diese Middleware wird jedes Mal aufgerufen, wenn diese Datei angefordert wird, und kann daher verwendet werden, um die Seite zu sichern.

Erstellen Sie die Authentifizierungs-Middleware

Im Ordner middleware Ordner erstellen Sie eine neue Datei mit dem Namen check_auth.js und öffnen Sie sie in Ihrem Editor. Fügen Sie den folgenden Code ein:

import axios from 'axios';

export default function({ store, route, redirect }) {
  if (store.getters.isVerified) {
    const token = store.getters.isVerified;
    axios
      .post('/verification/auth-check', {
        token
      })
      .then(res => {
        const { data } = res;

        if (!data.error_text && data.checks[0].status === 'VALID') {
          console.log('valid, allowing access');
          redirect('/secret');
        } else {
          console.log('invalid, redirecting...');
          redirect('/');
        }
      })
      .catch(err => console.log(err));
  } else {
    redirect('/');
  }
}

Diese Datei wird jedes Mal aufgerufen, wenn /secret als Route angefordert wird, aber bevor das HTML gerendert und an den Browser gesendet wird. Oben finden die folgenden Schritte statt:

• Der VueX-Store wird mit einer Getter-Methode daraufhin überprüft, ob bereits ein JSON-Web-Token von unserer Verifizierungs-API zurückgegeben wurde

• Wenn dies der Fall ist, übergeben wir ihn an den /auth-check Endpunkt, um zu sehen, ob die Authentifizierung noch aktiv ist

• Wenn sie nicht existiert oder die Authentifizierung ungültig ist, leiten wir die Anfrage an das Anmeldeformular zurück.

Wenn Ihr Entwicklungsserver zu diesem Zeitpunkt noch läuft, starten Sie ihn neu, damit sich die Middleware ordnungsgemäß registriert, und wiederholen Sie den Anmeldevorgang. Diesmal sollte eine erfolgreiche Verifizierung Ihnen die /secret Seite anzeigen.

(Die geheime Seite, die ich für die Beispielanwendung erstellt habe, macht mehr Spaß als diese. Sie können sie hier bekommen wenn Sie sie verwenden möchten.)

Schlussfolgerung

Nuxt ermöglicht es uns, eine Technologie, die wir vielleicht schon kennen, wie Vue, zu nehmen und zusätzliche leistungsstarke Elemente hinzuzufügen, wie z.B. Authentifizierung über Middleware, ohne dass wir auf separate APIs auf verschiedenen Servern ausweichen müssen.

Natürlich gibt es Grenzen dafür, wie viel Sie in die serverseitige Middleware packen wollen, bevor Sie tatsächlich den Schritt zum Aufbau einer externen API machen, was die beste Option wäre. Es liegt an Ihnen, aber ich würde sagen, dass alles, was mehr als 5 grundlegende Endpunkte hat, den Aufwand rechtfertigen könnte. Alles, was weniger ist, sollte als Middleware erstellt werden - vor allem, wenn es sich nur um einen Proxy für Aufrufe an eine andere API handelt, wie es in diesem Beispiel der Fall ist.

Ich hoffe, dass dies einen guten Einblick in die Möglichkeiten gegeben hat und dass dieser Ansatz für viele der Nexmo APIs funktioniert, nicht nur für Verify. Sie könnten genauso gut Ihre Server Side Middleware dazu bringen, SMS-Nachrichten zu senden, anstatt Benutzer zu verifizieren.

Werden Sie kreativ, und wenn Ihnen weitere Beispiele einfallen, dann teilen Sie sie mit uns über unseren Nexmo Community Slack-Kanal.