シェア:
){kind=small}
Juliaは、チュートリアル、ガイド、実用的なリソースを作成することで、仲間の開発者に力を与えることに尽力しています。アウトリーチと教育のバックグラウンドを持つ彼女は、テクノロジーをより身近なものにし、開発者の経験全体を向上させることを目指しています。地域のコミュニティイベントでもよく見かける。
Node-REDによる電話番号の検証
所要時間：4 分
注：この記事で説明されているツールや方法の中には、サポートが終了しているものや最新のものではないものがあります。最新の内容やサポートについては、最新の投稿をご確認いただくか、Vonage Community Slackの VonageコミュニティSlack
チュートリアル これまでのチュートリアルNexmoのSMS APIとVoice APIについて学び、メッセージや通話の送受信に慣れてきたと思います。
このチュートリアルでは Verify API を見てみましょう。を見て、ユーザーの電話番号を検証する便利な方法を探ります。
多くのアプリは、プロセスをできるだけシンプルにするために、電話番号だけでユーザーを登録し、その識別子を後で認証に使用する必要がある。
重複したアカウントが存在しないこと、そしてユーザーが提供した電話番号で本当に連絡が取れることを確認する。
始める前に必要なものがいくつかある：
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
Verify APIを利用するには、いくつかの注意点があります。Nexmoアカウントを作成したら、ダッシュボードの ダッシュボードにアクセスし、APIキーとシークレットを見つけてください。これらの認証情報は後ほどAPIで認証する際に使用します。
まず インストールする必要があります。をインストールする必要がある。これは、ローカルマシン、シングルボードコンピュータ（例：Raspberry Pi）、またはクラウドホスティングのいずれかの方法で行うことができる。
Node-REDをグローバルにインストールしたら、ターミナルで以下のコマンドを入力してください。
Node-REDエディタにアクセスするには、ブラウザの http://localhost:1880.
エディタを開いたら、Nexmoノードをインストールする必要があります。これは パレットの管理メニューから node-red-contrib-nexmoパッケージを検索し、インストールをクリックします。
install node red
次に node-red-dashboardパッケージについても同様に前のステップを繰り返す。
Node-REDを再起動すると、NexmoとDashboardノードが画面左側のノードパレットに表示されます。
このチュートリアルでは、ユーザーの入力を収集するためのシンプルなユーザーインターフェースが必要です。自分でHTMLやCSSを書くなど、いくつかの方法がありますが、Node-REDのダッシュボードノードを使うのが手っ取り早いでしょう。
ユーザーの 電話番号
テキストフィールド PINコード
A 検証のキャンセルボタン
A コール・ミーPINコードを受け取る手段として、SMSに加えて電話を要求するオプションがあります。
以下の方法でプロセスをスピードアップ クリップボードからインポートするダッシュボードのノードを自分で試してみてください。
[
{
"id": "463e8e92.d82a78",
"type": "tab",
"label": "Verify Demo",
"disabled": false,
"info": ""
},
{
"id": "fb7955ef.0e5fd8",
"type": "ui_form",
"z": "463e8e92.d82a78",
"name": "",
"label": "Verify your phone number:",
"group": "91563061.fc448",
"order": 1,
"width": 0,
"height": 0,
"options": [
{
"label": "eg. 447401234567",
"value": "number",
"type": "text",
"required": true
}
],
"formValue": {
"number": ""
},
"payload": "",
"submit": "Send me a code",
"cancel": "delete",
"topic": "",
"x": 430,
"y": 140,
"wires": [
[]
]
},
{
"id": "b60bf0b2.9a839",
"type": "ui_button",
"z": "463e8e92.d82a78",
"name": "",
"group": "91563061.fc448",
"order": 2,
"width": "0",
"height": "0",
"passthru": false,
"label": "Call me",
"tooltip": "",
"color": "",
"bgcolor": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "",
"x": 520,
"y": 580,
"wires": [
[]
]
},
{
"id": "b182a10d.c8f08",
"type": "ui_button",
"z": "463e8e92.d82a78",
"name": "",
"group": "91563061.fc448",
"order": 3,
"width": 0,
"height": 0,
"passthru": false,
"label": "Cancel Verification",
"tooltip": "",
"color": "",
"bgcolor": "red",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "",
"x": 550,
"y": 760,
"wires": [
[]
]
},
{
"id": "a2251664.3ba2f",
"type": "comment",
"z": "463e8e92.d82a78",
"name": "Start Verification - Collect phone number to be verified",
"info": "",
"x": 520,
"y": 80,
"wires": []
},
{
"id": "7185f18d.87142",
"type": "comment",
"z": "463e8e92.d82a78",
"name": "Check if received code matches the generated one",
"info": "",
"x": 510,
"y": 280,
"wires": []
},
{
"id": "7f30e.60359cf28",
"type": "comment",
"z": "463e8e92.d82a78",
"name": "Next Verification - Escalate to TTS Call",
"info": "",
"x": 610,
"y": 520,
"wires": []
},
{
"id": "c46fa301.4eb0d8",
"type": "comment",
"z": "463e8e92.d82a78",
"name": "Cancel Verification",
"info": "",
"x": 550,
"y": 700,
"wires": []
},
{
"id": "ab7fb094.d7d1f8",
"type": "ui_form",
"z": "463e8e92.d82a78",
"name": "",
"label": "Check code:",
"group": "91563061.fc448",
"order": 4,
"width": 0,
"height": 0,
"options": [
{
"label": "Enter the PIN code you received",
"value": "code",
"type": "text",
"required": true
}
],
"formValue": {
"code": ""
},
"payload": "",
"submit": "submit",
"cancel": "delete",
"topic": "",
"x": 390,
"y": 340,
"wires": [
[]
]
},
{
"id": "91563061.fc448",
"type": "ui_group",
"z": "",
"name": "Verify Demo Input Fields",
"tab": "fdce8e2a.f4364",
"disp": false,
"width": "8",
"collapse": false
},
{
"id": "fdce8e2a.f4364",
"type": "ui_tab",
"z": "",
"name": "Verify Demo",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]準備ができたら、エディターはこのようになるはずだ：
verify UI template
あなたのUIを見るには http://127.0.0.1:1880/ui.
verify UI
ユーザーの電話番号を収集したら、Verify APIに検証リクエストを送信して、検証プロセスを開始することができる。
検証を開始するには、ユーザーの電話番号を取得するフォームに接続された sendverifyノードが必要です。デフォルトでは、短いカスタムテキストと PIN コードを SMS メッセージでユーザーの電話番号に送信し、受信したコードを送信できなかった場合に備えて 2 回の音声合成電話をかけます。
をダブルクリックして sendverifyノードのプロパティをダブルクリックして開きます。そこに、入力が必要な3つの必須フィールドがあります： Nexmo Credentials, To {}と Brand {}.
ラベルの横にある {}これはこれらのフィールドが Mustache Templatingをサポートし、動的に値を渡すことができることを意味します。
ドロップダウンから Nexmo Credentialsドロップダウンから 新しいnexmobasicを追加を選択し、編集ボタンをクリックします。すると API Keyと API Secretを入力してVerify APIで認証するよう求められます。 Nexmoダッシュボード.
完了したら 追加.ラベルの横に Nexmo Credentialsラベルの横に コンフィグノードが表示され、これが今後の認証情報を保存することになる。
次に、ユーザーの電話番号を To {}フィールドに渡す必要があります。上記のUIスニペットをインポートした場合、これは {{msg.payload.number}}となります。 formノードで入力値を numberのキーに収集されることを最初のノードで指定したので、これは msg.payload.これを変更するには formノードのプロパティを開き Name.
最後に、認証リクエストのSMS本文を以下のようにパーソナライズすることができます。 Brand {}をパーソナライズすることができます。これは、Verify APIによって生成されるPIN番号の前に付加される18文字の英数字文字列を取ります。
例えば、"Your Acme Inc PIN is ..." のように。
send verify configuration
この sendverifyノードはNexmoから受け取ったAPIレスポンスを出力する。 request_idと statusパラメータを含む。ステータスコードの詳細については Verify APIリファレンス を参照してください。.
この request_idは以降のすべてのステップで使用されるため、現在のフローの他のすべてのノードからアクセスできるようにする必要がある。そのためには changeノードを sendverifyに接続し、そのノードのプロパティを開いて flow.request_idを msg.payload.request_id.
verify set request ID
何が起きているかをもう少し詳しく知るには、ノードを debugノードを sendverify.こうすれば、デバッグ・サイドバーでAPIのレスポンスを追うことができる。
リクエストはNexmoによって正常に受理され、ユーザーは認証コードを受け取り、対応するフォームから送信済みです。成功ですか？もう少しです。
さて、送信されたコードが本当にVerify APIによって生成され、送信されたものであるかどうかを調べなければならない。
このステップでは checkverifyノードが必要である。 リクエストIDと コードを入力として受け取り、その2つを比較し、APIレスポンスを msg.payload.
ワークスペースにドラッグした後、ユーザーによって送信されたPINコードをキャプチャするフォームに配線します。 debugノードを接続して、デバッグ・サイドバーにレスポンス・オブジェクトを表示します。
ノードの checkverifyノードのプロパティを開く。ドロップダウンから Nexmo Credentialsドロップダウンから sendverifyを選択し Request ID {}フィールドに {{flow.request_id}}フィールドに入力し、ユーザーによって送信されたコードを Code {}フィールドに渡します。
上記のUIスニペットをインポートした場合、これは次のようになります。 {{msg.payload.code}}となります。 formノードで入力値が codeのキーに収集されます。 msg.payload.これを変更するには formノードのプロパティを開き Name.
check verify
おめでとうございます！🎉 あなたのVerifyフローは稼働しています。 http://localhost:1880/uiにアクセスして試してみてください！
受信したPINコードを送信した後、Node-REDエディターに戻り、デバッグサイドバーをよく見てください。
レスポンスオブジェクトには、リクエストの詳細が含まれます。 statusを含む、リクエストに関する詳細が含まれる。ユーザが提出したPINがVerify APIによって生成されたものと一致する場合、そのPINの値を返します、 statusの値が返されます。 "0".
ユーザーの電話番号は正常に検証されましたが、現時点ではデバッグサイドバー以外にこのイベントの兆候はありません。
検証プロセス終了後の処理を定義するには statusの msg.payloadのプロパティを使用して、異なるシナリオを分離します。
このユーザーに対して、特定のウェブページやアプリケーションへのアクセスを許可したり、検証に成功したユーザーの詳細をデータベースに保存したり、あるいは検証結果がどうであったかを知らせたり、検証に失敗した場合に再試行を促したりすることができます。すべてはあなたのユースケースと、そもそもなぜユーザーを検証しようとしているかによります。
を評価し、その値に基づいて検証に成功したかどうかをユーザーに知らせます。 statusプロパティを評価し、その値に基づいて検証に成功したかどうかをユーザーに知らせます。エラーメッセージをより正確にしたい場合は、他の ステータスコードを追加してください。
そのために必要なのは
a
switchノードの値をチェックする。msg.payload.statusa
notificationダッシュボードノード2つの
changeノードが表示するメッセージを準備する。notification1つは成功した場合、もう1つは失敗した場合である。
これらのノードをワークスペースに追加し、下の図のように接続する。
check verify switch
では、それぞれのノードを詳しく見てみよう：
switch
ノードは switchノードは、プロパティ値またはシーケンス位置に基づいてメッセージをルーティングします。この場合、以下の値に基づいて2つのルートを作成します。 msg.payload.status.
メッセージが到着すると、ノードはそのノード・プロパティで定義された各ルールを評価し、一致するルールの対応する出力にメッセージを転送する。
まず switchノードをダブルクリックしてプロパティにアクセスする。プロパティの Propertyフィールドの "payload "を "status "に置き換える。 msg.payload.statusが評価されるようにする。
次に、その値に基づいてルールを定義しなければならない。ルールの 追加ボタンをクリックして2つ目のルールを追加する：
成功：最初のルールで、最初のドロップダウンから"=="を選択し、その隣のテキストフィールドに "0 "を書く；
失敗：2つ目のルールで、最初のドロップダウンから「！＝」を選択し、その隣のテキストフィールドに「0」を記入する。これで、検証が成功しなかったすべてのケースをカバーできる。
ルールに -> 1と -> 2記号がついていることに注意。これは、最初のステートメントが真であれば、最初の出力に接続されたノードがトリガーされることを示している。それ以外の場合は、2番目の出力に接続されたノードがオフになる。
notification
ノードは notificationノードは msg.payloadをポップアップ通知または OK/キャンセルダイアログメッセージとして表示されます。ノードのプロパティの Layoutポップアップの場合、その位置も設定できます。
で期間を設定します。 Timeout (S)フィールドに、UIに表示し続けたい秒数を入力して設定します。
タイトルを設定したい場合は Topicフィールドで設定できます。 msg.topicが利用可能な場合は、それがタイトルとして使用されます。
ボーダーカラーを定義することで、エクスペリエンスをさらにカスタマイズすることができる。 Borderフィールドで定義するか msg.highlight.
change
ノードでは changeノードでは Setの値を指定するために msg.payloadそして msg.highlight.
のノード・プロパティを開いてみよう。 changeノードの最初の出力に配線されていることを確認してください。 switchノードの最初の出力に配線されていることを確認してください。）を設定します。 msg.payloadを "Successful verification!"のような成功メッセージに設定します。 追加ボタンをクリックして2つ目のルールを定義し msg.highlightを "green "に設定する。
同じ手順を2番目の changeノードに同じ手順を繰り返します。 msg.payload"検証に失敗しました。 msg.highlightを "red "に設定する。また、ノードの2番目の出力に接続されていることを確認してください。 switchノードの2番目の出力に接続されていることを確認してください。
ヒット デプロイをクリックし、もう一度試してみてください！検証プロセスが完了すると、結果がポップアップで表示されます！
認証プロセスが開始されると、Nexmoは送信された電話番号にSMSメッセージと2回の音声合成(TTS)電話によるPINコードの送信を3回試みます。
アクセシビリティ上の理由であれ、純粋な個人的嗜好であれ、電話の方が良い場合もあります。そのため、検証プロセスを即座にTTSコールにエスカレートさせるボタンの実装を見てみましょう。
提供されたフローテンプレートで コール・ミーボタンを見つけ nextverifyノードを接続します。ノードのプロパティを開き nextverifyノードのプロパティを開き、ドロップダウンメニューから Nexmo Credentialsを選択し Request ID {}フィールドに {{flow.request_id}}.また debugノードを追加することも検討するとよいでしょう。 changeノードの後に notificationノードを追加して、ユーザーに何が起こっているのかを知らせるとよいでしょう。
理想的な世界であれば、ここで終わりにしたいところだが、いつも何かが起こるものだ。フォームに記入するときに間違えて送信を押してしまった。 削除今なら、検証はすでに始まっている。
一度失敗したら、それを待って再挑戦すればいいと思うかもしれない。確かにそれも有効だが、理想的な方法ではない。ユーザーにフラストレーションを与えるだけでなく、最初の確認メッセージに加えて午前2時に2回も電話を受けることになる、疑うことを知らないかわいそうな人のことを考えてみてください。おっと。
幸いなことに、次のような簡単な方法がある。 検証のキャンセルボタンを実装する簡単な方法がある。
提供されたUIスニペットをインポートした場合、必要なのは cancelverifyノードを 検証のキャンセルボタンの出力にノードを接続し cancelverifyノードのプロパティを開き、ドロップダウンメニューから Nexmo Credentialsをドロップダウンメニューから選択し Request ID {}フィールドに {{flow.request_id}}.
また debugノードを追加することもできます。 changeノードの後に notificationノードを追加することもできます。
今すぐ デプロイボタンを押してテストしてください！キャンセルリクエストが有効であるためには、電話番号が送信されてから少なくとも30秒後に開始されなければならないことを覚えておいてください。TTSコールが開始されるのを避けるには、まだ十分な時間があります！
さあ、出来上がり！これで、あなたは安心して夜眠ることができる。よくやった！
Nexmo APIから受け取ったすべてのリターン・オブジェクトはデバッグ・ノードによってログに記録され、何が起こっているのかについての貴重な洞察を提供してくれます。
デバッグ・エリアが少し混雑して、探している情報をピンポイントで見つけるのが難しくなることもある。それ以外にも、イベントの合間に検証を確認したい場合もあるでしょう。別のリターンオブジェクトがプップアップするために、次のイベントが発生するのを待つ必要はありません。すでに完了したかもしれないが、失敗したのか成功したのかはっきりしない。
朗報は searchverifyNexmoノードがある。例えば injectノードによってトリガーされると、過去または現在の検証リクエストに関する利用可能なすべての情報を出力します。 request_id.
ワークスペースに searchverifyワークスペースにノードを追加し、それを injectと debugノードの間に配線する。ノードのプロパティで searchverifyノードのプロパティで Nexmo Credentialsをドロップダウンメニューから選択し Request ID {}フィールドに {{flow.request_id}}を入力すると、現在の検証に関する詳細が表示されます。このフィールドに特定の request_idをこのフィールドに貼り付けることもできます。
アプリを試した後にデバッグサイドバーを見ると、エディタで injectノードのボタンをクリックするたびに、問題のリクエストに関するすべての利用可能な詳細を含むオブジェクトが返されることに気づくでしょう。レスポンスフィールドを詳しく見て、Nexmo APIリファレンスの Nexmo APIリファレンスを参照してください。
Nexmoベリファイ APIリファレンス
Verify ドキュメンテーション
別のチュートリアルを試してみてください：