https://d226lax1qjow5r.cloudfront.net/blog/blogposts/getting-started-with-nexmos-number-insight-apis-on-koa-js-dr/Blog_Koa-js_NumberInsight_1200x600.png

Koa.jsでNexmoのNumber Insight APIを使い始める

最終更新日 May 21, 2021

所要時間:7 分

Nexmoの Number Insight APIは、電話番号の有効性、到達可能性、ローミング状況についてリアルタイムのインテリジェンスを提供し、アプリケーションで番号を正しくフォーマットする方法をお知らせします。

Number Insight APIには3つのレベルがあります: ベーシック, スタンダードおよび アドバンスドがあり、それぞれクエリーされた電話番号に関する情報の量が増えていく。アドバンスAPIは、同期だけでなく非同期でも利用できる。

このブログ記事では、APIを Koa.jsフレームワークでAPIを使用する方法を紹介します。

前提条件

  • Javascriptの基本的な理解

  • Node.jsマシンにインストールされている

Vonage API Account

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.

このチュートリアルでは、ゼロからのプロセスを説明します。完成したコードを見たい場合は git リポジトリをクローンするか Glitchでリミックスする.Glitchの実装では、プラットフォーム上でのプロジェクトのホスティング方法に対応するために、若干の違いがあることに注意してください。

Koa.jsプロジェクトをゼロから始める

ローカル・マシンにプロジェクト・フォルダーを作成し、以下のコマンドを実行して新しいNode.jsプロジェクトをセットアップする。

npm init

これで一連のプロンプトが表示され、あなたの package.jsonファイルを生成します。必要であれば、答えを空白にしてデフォルト値を使用することもできます。

Configuring package.jsonConfiguring package.json

次に Koa.js.Koaは、ES2015と非同期関数をサポートするために、node v7.6.0以上を必要とすることに注意してください。

npm install koa --save

プロジェクトフォルダーに server.jsファイルを作成する。

touch server.js

新しく作成したファイルに以下のコードを貼り付ける。

const Koa = require('koa')

const port = process.env.PORT || 3000
const app = new Koa()

app.use(async ctx => {
  ctx.body = 'Hello Dinosaur ?'
})

const listener = app.listen(port, function() {
  console.log('Your app is listening on port ' + listener.address().port)
})

ファイルを実行する。 server.jsファイルを実行する。

node server.js

ブラウザから http://localhost:3000というテキストが書かれた空のページが表示されるはずだ。

Check that server is runningCheck that server is running

をインストールする必要があります。 dotenvをインストールする必要があります。 .envファイルに格納されている環境変数を process.env.

npm install dotenv --save

これで .envファイルには少なくとも以下の変数が含まれていなければならない:

NEXMO_API_KEY=''
NEXMO_API_SECRET=''

環境変数にアクセスするには、requireする必要がある。 server.jsファイルの一番上にあるのが理想的だ。

require('dotenv').config()

まだ まだNexmoアカウントに登録していないなら今がそのチャンスです。ダッシュボードにログインすると、API認証情報が最初に表示されます。キーとシークレットは必ず引用符で囲んでください。

Number Insights APIを知る

まず最初に Node.js 用 Nexmo REST API クライアント:

npm install nexmo --save

次に、新しいNexmoインスタンスを初期化する。

const Nexmo = require('nexmo')

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

前述したように、Number Insight APIには3つのレベルがあり、必要な情報の種類に応じて選ぶことができる。APIの構成はこのようになっている。

nexmo.numberInsight.get({
  level: 'basic | standard | advancedSync', // set Number Insight level here
  number: INSIGHT_NUMBER // phone number to be queried
}, (error, result) => {
  if (error) {
    console.error(error)
  }
  else {
    console.log(result)
  }
})

を参照してください。 APIリファレンスを参照してください。

数字の洞察を得る

照会する電話番号を入力する何らかの方法が必要なので、そのための基本的なウェブページを作ってみよう。

プロジェクト内に publicプロジェクト内にフォルダを作成し index.html, styles.cssscripts.jsを加えます。これで、プロジェクトの構造は次のようになるはずです:

PROJECT_FOLDER/ |-- public/ | |-- index.html | |-- scripts.js | `-- styles.css |-- .env `-- server.js

あなたの index.htmlページに追加します:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Number Insight API</title>
    <meta name="description" content="Exploring Nexmo's Number Insight API">
    <link id="favicon" rel="icon" href="https://www.nexmo.com/favicon.ico" type="image/x-icon">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="styles.css">
    <script src="scripts.js" defer></script>
  </head>

  <body>
    <main>
      <h1>Retrieve Number Insights</h1>
      <form>
        <input type="tel" placeholder="Enter phone number">
        <button type="button">Submit</button>
      </form>
      <hr>
      <pre><code>Awaiting results…</code></pre>
    </main>
  </body>
</html>

ページに基本的なスタイルを追加することもできます。 styles.cssファイルに追加します:

@import url('https://fonts.googleapis.com/css?family=Gudea:400,700');

html {
  box-sizing: border-box;
  height: 100%;
  font-size: calc(1vmin + 1em);
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Gudea', sans-serif;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 15em;
  background-color: gainsboro;
}

main {
  flex: 1;
  margin: auto;
  padding: 1em;
}

h1 {
  margin-bottom: 0.5em;
}

form {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 10em;
}

input {
  font-size: inherit;
  padding: 0.5em;
  border: 0;
  flex: 1;
}

button {
  font-size: inherit;
  height: 100%;
  background-color: #2e689b;
  color: #fff;
  padding: 0.5em 0.75em;
  border: 0;
}

hr {
  margin: 1em 0;
}

pre {
  background-color: #333;
  padding: 0.5em;
  border-radius: 0.5em;
  color: lightblue;
  white-space: pre-wrap;
}

次のステップは、入力をサーバーに送信し、Number Insight APIに接続して確認できるようにすることだ。そのためには POSTリクエストをトリガーします。以下のサンプルコードでは Fetch APIを使用しています。

const phone = document.querySelector('input')
const submit = document.querySelector('button')
const insights = document.querySelector('code')

submit.addEventListener('click', send, false)

function send(event) {
  fetch('/submit', {
    method: 'post',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      phone: phone.value
    })
  })
  .then(function(res){ return res.json() })
  .then(function(insight){ parseInsight(insight) })
  .catch(function(error){ console.log(error) })
}

function parseInsight(data) {
  insights.innerHTML = JSON.stringify(data, null, 2)
}

この POSTリクエストを処理する必要があります。ExpressやHapi.jsのような他の一般的なNode.jsフレームワークとは異なり、Koa.jsはよりモジュール化されています。ルーティングや静的ファイルの提供のような機能はサポートされていますが、別モジュールとしてインストールする必要があります:

npm install koa-router koa-bodyparser koa-static --save

あなたの server.jsファイルを更新する。まず、"Hello Dinosaur!? "メッセージを出す代わりに server.jsファイルを修正して index.htmlの代わりに

app.use(async ctx => {
  ctx.body = 'Hello Dinosaur ?'
})

const serve = require('koa-static')
app.use(serve('./public'))

次に、以下のPOSTリクエストのルートを設定します。 /submit.

const bodyParser = require('koa-bodyparser')
const Router = require('koa-router')

const router = new Router()

app.use(bodyParser())

router.post('/submit', async (ctx, next) => {
  const payload = await ctx.request.body
  const number = await payload.phone
  const insight = await getInsight(number)
  ctx.status = 200
  ctx.body = insight
})

async function getInsight(number) {
  return new Promise(function(resolve, reject){
    nexmo.numberInsight.get({
      level: 'basic', 
      number: number
    }, (error, result) => {
      if (error) {
        console.error(error)
        reject(error)
      }  
      else {
        resolve(result)
      }
    })
  })
}

app.use(router.routes()).use(router.allowedMethods())

基本API

すべてが正しく設定されていれば、電話番号を入力し、その番号に関する結果情報をウェブページで取得できるはずです。Basic APIを使えば、以下のようなことができます:

  • 番号が登録されている国

  • この数字の国内外での表現

このような情報があれば、ある番号がどの国のものかを発見し、その情報を使って番号を正しくフォーマットすることができる。

Basic Number APIBasic Number API

標準API

Number Insight Standard APIは、Number Insight Basic APIのすべての情報に加え、以下の追加データを提供します:

  • 回線タイプ(携帯/固定/バーチャル番号/プレミアム/フリーダイヤル)

  • モバイル・カントリー・コード(MCC)とモバイル・ネットワーク・コード(MNC)

  • 発信者の名前(米国のみ)

一般的な使用例としては、番号に最適な通信タイプ(SMSまたは音声)を決定し、バーチャル番号をブロックすることが挙げられる。

Standard Number APIStandard Number API

高度なAPI

最後に、Number Insight Advanced APIは、Number Insight Standard APIのすべてのデータに加え、以下の追加情報を提供する:

  • 有効な番号である可能性が高い場合

  • ポート番号の場合

  • その番号に到達可能な場合

  • 番号がローミングかどうか、ローミングの場合はキャリアと国名

多くの場合、このような情報は数字に関連するリスクを判断するために使われる。

Advanced Number APIAdvanced Number API

アドバンスド・ナンバーAPIは を非同期的に使用することもできます。を使用することもできる。この機能はBasicおよびStandard APIでは利用できないことに注意してください。

次はどこだ?

これらのAPIをもっと使いたいとお考えなら、以下のリンクが参考になるでしょう:

シェア:

https://a.storyblok.com/f/270183/384x384/46621147f0/huijing.png
Hui Jing Chenヴォネージの卒業生

ホイ・ジンはNexmoのデベロッパー・アドボケイト。CSSとタイポグラフィをこよなく愛する。