
シェア:
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.
Node.jsとExpressを使ってReact NativeアプリにSMS認証を追加する
所要時間: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 connectivity
Vonageアカウントの設定
UIができたので、サーバーに取りかかろう。私たちが求めている機能を実現するために、今日はVonage APIのうちの2つを使うことにする:
{"type":"signUp","props":{"number":false}}
アカウントを取得すると、API キーと API シークレットは次のように表示されます。 Vonage APIダッシュボード.
The Vonage dashboard showing the API secrets
これらの値が手に入ったら、それを .envファイルに保存しましょう:
ファイルを
.envファイルを.gitignoreルールに追加することを忘れないでください!というシナリオは避けたい。git commitというシナリオに陥らないようにしてください!
ダッシュボードからもう1つ値が必要です:Vonageアカウントに関連付けられている電話番号です。あなたのVonageアカウントに関連付けられている電話番号です。 ナンバー > お客様の番号.
The numbers tab in the Vonage dashboard with the number area highlighted
もう一度言う。 .envファイルに保存することになる:
NEXMO_NUMBER=5555555555Numbers 以外の記号は必ず除外してください。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 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アカウント!