Hinzufügen von SMS-Verifizierung in einer React Native App mit Node.js und Express

Die Entwicklung einer mobilen App ist mit vielen Herausforderungen verbunden. React Native kann viele dieser Herausforderungen erleichtern, wenn es um die Unterstützung von Cross-Kompatibilität geht, aber natürlich ist immer noch ein erheblicher technischer Aufwand für jede App erforderlich. Vielleicht möchten Sie eine SMS-basierte Zwei-Faktor-Authentifizierung (2FA) implementieren, um mehr als 100 % der Bot-basierten Kontoübernahmenoder sogar ein Marketing-Tool zum Weitergeben dieser App an Ihre Freunde integrieren.

Glücklicherweise macht Vonage die Integration von Funktionen wie diesen in Ihre App zu einem Kinderspiel!

Was werden wir erschaffen?

Unser heutiges Ziel ist es, eine App zu entwickeln, die es den Nutzern ermöglicht, mit ihrer Telefonnummer und SMS 2FA ein Konto zu erstellen. Sobald der Nutzer "angemeldet" ist, können wir ihm außerdem erlauben, einen Kontakt aus seiner Kontaktliste auszuwählen und eine Einladung zur Nutzung der App per SMS an sein Telefon zu senden.

Um diese Funktionalität zu ermöglichen, werden wir React Native für die Benutzeroberfläche und einen Node/Express-Server für das Backend verwenden.

Um diesen Artikel fokussiert zu halten, beginnen wir mit einer vordefinierten Benutzeroberfläche. Diese React Native-Anwendung ist nicht mit einem Server verbunden, hat aber ihre Benutzeroberfläche mit Mock-Daten erstellt. Die App in diesem Zustand ist relativ klein (~300 LOC) und ist vollständig quelloffen.

A demo of the React Native app with mocked data and no server connectivity

Vonage-Konto einrichten

Nachdem wir nun eine Benutzeroberfläche erstellt haben, können wir mit der Arbeit am Server beginnen. Um die gewünschten Funktionalitäten zu aktivieren, werden wir heute zwei der Vonage-APIs verwenden:

• API überprüfen

• SMS-API

{"type":"signUp","props":{"number":false}}

Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

The Vonage dashboard showing the API secrets

Sobald wir diese Werte haben, speichern wir sie in einer .env Datei:

Vergessen Sie nicht, die Datei .env Datei zu Ihren .gitignore Regeln hinzuzufügen! Sie wollen nicht in einem Szenario enden, in dem Sie git commit Ihre API-Geheimnisse!

Wir benötigen einen weiteren Wert aus dem Dashboard für unsere Verwendung: Die Telefonnummer, die mit Ihrem Vonage-Konto verknüpft ist. Sie finden diese unter Telefonnummern > Ihre Nummern.

The numbers tab in the Vonage dashboard with the number area highlighted

Auch diesen Wert speichern wir in der gleichen .env Datei zur späteren Verwendung:

NEXMO_NUMBER=5555555555

Achten Sie darauf, dass Sie alle anderen Symbole außerhalb der Nummern selbst ausschließen. Das Vonage SDK bevorzugt eine formatlose Telefonnummer, die im Code verwendet werden kann.

Express Server einrichten

Es ist schwierig, eine App-Funktionalität einzurichten, die ein Back-End ohne einen funktionierenden Server erfordert! Beginnen wir also mit einem Teil des Express-Vorlagencodes. Machen Sie weiter und erstellen Sie eine app.js Datei und beginnen Sie mit der folgenden Vorlage:

// app.js
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const port = process.env.PORT || 3000

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json())

app.get('/', (req, res) => {
    res.send({message: "Hello, world!"});
});

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

Dieser Code sollte es uns ermöglichen, JSON als unsere Anfragekörper zu verwenden und später auf sie durch req.body. Wenn wir eine POST Anfrage an /test mit der Nutzlast {hello: "Hi there"}senden, können wir auf "Hi there" über req.body.hello.

Sobald unser anfänglicher Express-Code läuft, wollen wir uns mit dem Vonage Node SDK einrichten. Dieses Paket bietet alle Funktionen, die wir für die Integration der Vonage APIs in unsere Anwendung benötigen.

Wir beginnen mit dem Hinzufügen des Pakets zu unserem Projekt:

npm i nexmo

Sobald das konfiguriert ist, können wir den Konstruktor am Anfang unserer Datei ausführen, damit wir die APIs später verwenden können:

const Nexmo = require('nexmo');

const nexmo = new Nexmo({
    apiKey: process.env.NEXMO_API_KEY,
    apiSecret: process.env.NEXMO_API_SECRET,
});

Verifizierungscode anfordern

Beginnen wir mit der Erstellung des Codes zum Anfordern und Verifizieren eines 2FA-SMS-Codes. Wir beginnen mit dem Anforderungsteil des Codes:

app.post('/request', (req, res) => {
    // We verify that the client has included the `number` property in their JSON body
    if (!req.body.number) {
        res.status(400).send({message: "You must supply a `number` prop to send the request to"})
        return;
    }
    // Send the request to Vonage's servers
    nexmo.verify.request({
        number: req.body.number,
        // You can customize this to show the name of your company
        brand: 'Vonage Demo App',
        // We could put `'6'` instead of `'4'` if we wanted a longer verification code
        code_length: '4'
    }, (err, result) => {
        if (err) {
            // If there was an error, return it to the client
            res.status(500).send(err.error_text);
            return;
        }
        // Otherwise, send back the request id. This data is integral to the next step
        const requestId = result.request_id;
        res.send({requestId});
    });
})

Wie die Code-Kommentare zeigen, erhalten wir beim Senden einer Code-Anfrage an eine Nummer eine request_id. Diesen müssen wir an den Client zurückgeben und im Status speichern. So können wir die "Verifizierungs"-Anforderung übermitteln, sobald der Benutzer den Anforderungscode selbst erhält.

Sobald der Benutzer die Anfrage stellt, muss es eine Möglichkeit geben, dies zu überprüfen, nicht wahr? Wir werden diesen Weg jetzt einrichten:

app.post('/verify', (req, res) => {
    // We require clients to submit a request id (for identification) and a code (to check)
    if (!req.body.requestId || !req.body.code) {
        res.status(400).send({message: "You must supply a `code` and `request_id` prop to send the request to"})
        return;
    }
    // Run the check against Vonage's servers
    nexmo.verify.check({
        request_id: req.body.requestId,
        code: req.body.code
    }, (err, result) => {
        if (err) {
            res.status(500).send(err.error_text);
            return;
        }
        res.send(result);
    });
})

In einer produktionsreifen Anwendung würden wir dies wahrscheinlich in ein Authentifizierungssystem einbinden, wie Reisepass. Aufgrund der Einfachheit der verwendeten APIs sollte die Integration relativ trivial sein.

Nun, da wir eine "Bestätigung" haben, dass die Telefonnummer des Benutzers überprüft wurde, können wir mit der Benutzeroberfläche fortfahren.

Server aus React Native aufrufen

Da wir den Großteil der Logik in der Benutzeroberfläche bereits eingerichtet haben, ist die Einrichtung auf der React Native-Seite trivial. Wir werden die fetch API, um Aufrufe an den Server zu tätigen:

// services.js
// Using the npm package `ngrok`, we can temporarily "deploy" our local server to test against 
const SERVER_BASE = 'http://test.ngrok.io'

export const request = ({ phoneNumber }) => {
  return fetch(`${SERVER_BASE}/request`, {
    method: 'post',
    // Tell our server we're sending JSON
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      number: phoneNumber,
    }),
  })
}

export const verify = ({ requestId, code }) => {
  return fetch(`${SERVER_BASE}/verify`, {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      requestId,
      code,
    }),
  })
}

Rufen Sie diese Methoden einfach innerhalb des React-Codes auf, wie Sie es mit jeder anderen API tun würden, und voilà!

SMS Demo

Eine SMS senden

Wenn Sie sich die Demo bis zum Ende ansehen, werden Sie feststellen, dass wir einen Kontakt aus unserer Kontaktliste auswählen und ihm eine Einladungs-SMS zur Nutzung der App schicken konnten!

Glücklicherweise ist dies so trivial zu implementieren wie der verify Code. Mit Blick zurück auf Express ist das Hinzufügen einer weiteren Route zum Senden von Texten einfach:

// app.js
// We need the phone number now to send an SMS
const nexmoNumber = process.env.NEXMO_NUMBER;

app.post('/invite', (req, res) => {
    if (!req.body.number) {
        res.status(400).send({message: "You must supply a `number` prop to send the request to"})
        return;
    }
    // Customize this text to your liking!
    const text = 'You\'re invited to use the hot new app! Details here:';
    const from = nexmoNumber;
    // This regex removes any non-decimal characters. 
    // This allows users to pass numbers like "(555) 555-5555" instead of "5555555555"
    const to = req.body.number.replace(/[^\d]/g, '');

    nexmo.message.sendSms(
        from,
        to,
        text,
        {},
        (err, data) => {
            if (err) {
                const message = err.message || err;
                res.status(500).send({message});
                return;
            }
            res.send(data);
        }
    );
})

Das Hinzufügen des letzten Teils des Codes zur React Native services.js Datei hinzuzufügen, ist genauso einfach:

export const invite = ({ phoneNumber }) => {
  return fetch(`${SERVER_BASE}/invite`, {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      number: phoneNumber,
    }),
  })
}

Schlussfolgerung

Wenn Sie das fertige Code-Beispiel (sowohl für den Express-Server als auch für die React Native-App) sehen möchten, können Sie finden Sie diesen Code auf GitHub.

Auch wenn die App einen soliden Start hat, können wir vielleicht die an die Benutzer gesendeten SMS ein interaktives SMS-Zustellsystem. Wenn Sie Ideen haben, wie man die App um weitere Funktionen erweitern kann, können Sie sich gerne mit uns in unserer Vonage Entwickler-Community Slack.

Damit Sie auch in Zukunft keine Inhalte wie diese verpassen, folgen Sie Twitter-Konto der Vonage-Entwickler!