2019/10/31(木) に開催した CData API Server 無償版 セミナー～どこまでできる？CData API Server 無償版～ https://eventregist.com/e/mQfdPTR2ZIFq でお話しした資料です

1. CData API Server に Kong を
挟んで JWT でアクセスする
エクセルソフト株式会社
ソフトウェア事業部 新規事業開発室室⻑
⽥淵 義⼈
ytabuchi@xlsoft.com
Twitter: @ytabuchi
facebook: fb.com/ytabuchi.xlsoft

2. ⽥淵義⼈＠エクセルソフト
• 営業(セールスエンジニア) 兼 新規事業開発室室⻑
• Xamarin コミュニティエバンジェリスト
• Microsoft MVP (Developer Technologies)
• コミュニティ
• Japan Xamarin User Group 主宰
• Twitter: @ytabuchi
• facebook: ytabuchi.xlsoft
• Blog: Xamarin ⽇本語情報
• GitHub: ytabuchi
2

3. CData API Server
• ポイント&クリックだけでデータベースからREST API を⽣成
• 無償版（4 コア以下、MySQL サポート、商⽤利⽤可）
3

4. 作ってみた
• MySQL に郵便局からダウンロードした 12万件の住所データ。
• CData API Server で API 作成。
• Vue.js の Web フロントエンドから住所データを検索する。
• CData API Server が MySQL のクエリを作ってくれるので、API を叩
くだけで良い。
4
SQL Query
データ
API GET
JSON データ

5. API アクセス
async invokeSearch(query: string): Promise<Address[]> {
const instance = axios.create({
baseURL: "http://localhost:8080/apiserver/api.rsc",
headers: {
"x-cdata-authtoken": process.env.VUE_APP_CDATATOKEN
}
});
const res: AxiosResponse = await instance.get("city");
return res.data.value;
}
5

6. API アクセス（パラメーター付き）
async invokeSearch(cityText: string, addressText: string): Promise<Address[]> {
const instance = axios.create({
baseURL: "http://localhost:8080/apiserver/api.rsc",
headers: {
"x-cdata-authtoken": process.env.VUE_APP_CDATATOKEN
}
});
const params = "city?" +
"$filter=" + "contains(JP_City,'" + cityText + "')" +
" AND " + "contains(JP_Address,'" + addressText + "')";
const res: AxiosResponse = await instance.get(params);
return res.data.value;
}
6

7. Table
<el-table :data="target.searchResult">
<el-table-column prop="Zip" label="郵便番号" />
<el-table-column prop="JP_Prefecture" label="都道府県" />
<el-table-column prop="JP_City" label="市区町村" />
<el-table-column prop="JP_Address" label="それ以下" />
<el-table-column prop="Prefecture" label="Prefecture" />
<el-table-column prop="City" label="City" />
<el-table-column prop="Address" label="Address" />
</el-table>
7

8. Kong
• OSS ベースの API ゲートウェイ
• https://github.com/Kong/kong
• 軽量、⾼速、⾼機能
• nginx ベース
• https://docs.konghq.com/hub/
8

9. 9
https://github.com/Kong/kong#why-kong

10. 10
https://docs.konghq.com/hub/

11. • Auth0 で JWT Token 作成
• Kong にアクセスする際に JWT Token を付与
• Kong が JWT を Auth0 に確認し、CData API Server に投げる
作ってみた
11
3) 認証2) JWT Token
1) API GET
8) JSON データ
4) API GET 5) SQL
7) JSON データ 6) データ

12. 12
❤

13. 解説記事
• サンプルデータがあらかじめ⼊った MySQL を Docker で作成する |
エクセルソフト ブログ
• vue.js と axios を使って Web API にアクセスする | エクセルソフト
ブログ
13

14. ありがとうございました
Kong も触ってみてください❤
14