https://d226lax1qjow5r.cloudfront.net/blog/blogposts/add-sms-verification-in-a-react-native-app-using-node-js-and-express-dr/Social_React-Native_Verify_1200x600.png

Node.jsとExpressを使ってReact NativeアプリにSMS認証を追加する

最終更新日 November 5, 2020

所要時間:1 分

モバイルアプリの構築には多くの課題がつきものです。React Nativeは、クロスコンパチビリティをサポートすることで、これらの課題の多くを緩和することができますが、どのようなアプリであっても、かなりのエンジニアリングの労力が必要であることは明らかです。SMSベースの二要素認証(2FA)を実装して、ボットベースのアカウント奪取を100%以上ブロックしたい場合もあるでしょう。 ボットベースのアカウント乗っ取りを100%ブロックするためにあるいは、「このアプリを友人と共有する」マーケティング・ツールを統合することもできる。

幸いにも、Vonageはあなたのアプリにこれらのような機能を統合するのは簡単です!

何を作るのか?

今日の目標は、ユーザーが電話番号とSMS 2FAを使って「アカウントを作成」できるアプリを作ることです。さらに、ユーザーが "サインイン "したら、連絡先リストから連絡先を選択し、SMSでアプリの利用を招待することができるようにします。

この機能を実現するために、UIにはReact Nativeを、バックエンドにはNode/Expressサーバーを使用する。

この記事の焦点を絞るために、あらかじめビルドされたUIから始めることにする。このReact Nativeアプリはサーバーに接続されていないが、モック・データでUIがレイアウトされている。この状態のアプリは比較的小さく(~300LOC)、そして 完全にオープンソース化されている.

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

Vonageアカウントの設定

UIができたので、サーバーに取りかかろう。私たちが求めている機能を実現するために、今日はVonage APIのうちの2つを使うことにする:

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

アカウントを取得すると、API キーと API シークレットは次のように表示されます。 Vonage APIダッシュボード.

The Vonage dashboard showing the API secretsThe Vonage dashboard showing the API secrets

これらの値が手に入ったら、それを .envファイルに保存しましょう:

NEXMO_API_KEY=XXXXXXXX NEXMO_API_SECRET=XXXXXXXXXXXXXXXX

ファイルを .envファイルを .gitignoreルールに追加することを忘れないでください!というシナリオは避けたい。 git commitというシナリオに陥らないようにしてください!

ダッシュボードからもう1つ値が必要です:Vonageアカウントに関連付けられている電話番号です。あなたのVonageアカウントに関連付けられている電話番号です。 ナンバー > お客様の番号.

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

もう一度言う。 .envファイルに保存することになる:

NEXMO_NUMBER=5555555555

Numbers 以外の記号は必ず除外してください。Vonage SDKは、コード内で使用する電話番号として、フォーマットのないものを好みます。

Expressサーバーのセットアップ

バックエンドを必要とするアプリの機能をセットアップするのは、サーバーが動いていないと難しい!そのため、テンプレートExpressのコードの一部から始めましょう。まず app.jsファイルを作成し、以下のテンプレートから始めます:

// 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}`))

このコードによって、リクエストボディとしてJSONを使い、後で req.body.もし リクエストをリクエストを /testにペイロード {hello: "Hi there"}にPOSTリクエストを送れば "Hi there"を通して req.body.hello.

最初のExpressコードを実行させたら、Vonage Node SDKをセットアップします。このパッケージは、アプリケーションに Vonage API を統合するために必要なすべての機能を提供します。

パッケージをプロジェクトに追加することから始めよう:

npm i nexmo

これが設定できたら、ファイルの先頭でコンストラクタを実行し、後でAPIを使えるようにする:

const Nexmo = require('nexmo');

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

検証コードのリクエスト

まず、2FA SMSコードのリクエストとベリファイを行うコードを作ることから始めよう。コードのリクエスト部分から始めよう:

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

コード・コメントにあるように、番号にコード・リクエストを送ると、返されるのは request_id.それをクライアントに返し、ステートに格納する必要がある。これにより、ユーザーがリクエストコードそのものを受け取ったら、「検証」リクエストを送信できるようになる。

とはいえ、ユーザーがリクエストをしたら、それをVerifyする方法が必要ですよね?今からそのルートを設定しよう:

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

より本番に近いアプリケーションでは、これを次のような認証システムに結びつけるだろう。 パスポート.APIがシンプルなので、統合は比較的簡単だろう。

ユーザーの電話番号が認証されたという「確認」が取れたので、UIを進めることができる。

React Nativeからサーバーを呼び出す

UIのロジックはほとんどセットアップしてあるので、React Native側のセットアップは簡単だ。サーバーへの呼び出しには fetchAPIを使ってサーバーに呼び出します:

// 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,
    }),
  })
}

他のAPIと同じように、Reactのコード内でこれらのメソッドを呼び出せば完了だ!

SMS DemoSMS Demo

SMSを送信する

デモを最後まで見ていただくと、連絡先リストから連絡先を選び、アプリを使うように招待SMSを送ることができたことに気づいていただけると思います!

幸運なことに、これは verifyコードと同じくらい些細なことだ。Expressに戻れば、テキストを送信する別のルートを追加するのは簡単だ:

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

そして、最後のコードをReact Nativeの services.jsファイルに追加するのも簡単だ:

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

結論

完成したコードサンプル(ExpressサーバーとReact Nativeアプリの両方)をご覧になりたい場合は、以下をご覧ください。 GitHubにあります。.

アプリは順調な滑り出しだが、ユーザーに送信されるSMSを次のようなものにできるかもしれない。 インタラクティブなSMS配信システムにできるかもしれない。.アプリに機能を追加する方法について何かアイデアがあれば、私たちの Vonage開発者コミュニティSlack.

最後に、このような今後のコンテンツを見逃さないように、以下をフォローしてください。 VonageデベロッパーTwitterアカウント!

シェア:

https://a.storyblok.com/f/270183/384x384/25ea95a56d/corbin-crutchley.png
Corbin Crutchley

Corbin in a passionate developer, teacher, and retro game enthusiast. Driven to help others, they started a site called Unicorn Utterances to help engage the community and provide a place for learning CS topics.