オンライン決済のWebサービスを組み込むには？


Silicon Valley Super Ware

2020年6月10日


オンライン決済のWebサービスを組み込むには？

前回までに「REST API」の実装の基本的な所は網羅してきました！ 後は、「DELETE」「PATCH」「UPDATE」などHTTPの違うメソッドが残っていますが、 実装のやり方自体はPOSTとほぼ同じです。
同じ要領で実際にやってみてください！ デモサイトの方は、ブログの投稿のお休みを頂いている週末に更新しようと思っています。
ブログの連載の方は次のステップに行こうかと思っています。

実際の外部サービスの「REST API」は少し実装方法が違います！

今日は、実装の話から少し離れて実際のサービスについて解説します。

JSON Placehoderは、セキュリティを考える必要がない！

一番大きな違いは、「JSON Placeholder」はREST APIのテストのためのサービスです。 デモサイトをご覧になった方はお分かりかとおもいますが、全ては「仮のデータ」です。 内容も余り意味があるものではなく、誰が見ても殆どの場合は全く問題はありません。
では、実際のサービスはどうでしょうか？
読者の皆様は、どんな外部のWebサービスをあなたのサービスに組み込んでみたいか考えた 事はありますか？

例えば「オンライン決済」のサービスはよい実用例です。

あなたの、Webサイトを通してオンラインで何かを販売したい場合、 あなたのサイトでオンライン決済ができて、プログラムや教材をダウンロードできたら 便利ですよね？
オンライン決済ができないと、フォームやメールで注文を受けて、 メールのやり取りで決済したり、銀行振込をしたりして決済をする必要が出てきます。 手間もかかって、あなただけでなく、お客様にも「面倒」な作業になります。
そうすると、折角のビジネスチャンスを潰してしまうことも十分に考えられます。
そこで、オンライン決済は外部のサービスを利用してサイトに組み込むというのが 主流になってきます。

オンライン決済のサービスは？

オンラインの決済は、代行してくれるサービスも沢山ありますし、いろいろです。 個人でビジネスをやられている方が多く利用しているのが、「PayPal」などのサービスがあります。 これらは、「REST API」も提供していて簡単にあなたのWebサービスに組み込む事ができます。
アメリカの場合、「PayPal」の利用も多いですが、「Strip」や「Squer」なども良く利用されています。 手数料も似たような感じです。（日本とアメリカでは若干異なります）

実は、これをWebサービスに組み込む場合一つ問題があります！

JavaScriptのコードは基本的にブラウザーから見る事ができるという問題です！
お金のかかわる問題なので、誰でも「REST API」を使えると問題です。 そこで、利用されるのが「API KEY」という方法です。殆どの外部のWebサービスは 利用者固有の情報を扱うことが多いので、アクセスを制限するために 「特定の利用者」のみに開放しています。
実際に「REST API」を利用するには、この「API KEY」の情報を使って 利用者の認証を行っています。逆に言えば、この「API KEY」を使えば 実際の外部サービスの利用者では無くても、データを取り出す事ができてしまいます。
JavaScriptのコードを見ると、このKEYを見る事も可能な場合が多いので セキュリティ上の問題がある事になります。

解決策はサーバー側でアクセスする！

そこで、多くの場合は、ブラウザーではなく、ホスティングしているサーバ側で REST APIのアクセスをするという方法をとっています。

大事な情報はサーバー側で処理する！

全てをサーバー側でやる必要はありませんが、重要な情報のやり取りは サーバー側で処理をするという方法をとります。 サーバー側のコードは通常はブラウザーからは簡単に見る事はできないので ブラウザーで処理をするより安全です。
あとは、ブラウザー側（クライアント側）に送る情報をサーバー側で 管理すれば、安全に外部のWebサービスの情報を扱うことができるという事です。

サーバー側の実装は？

サーバー側の実装で良く利用されるのが、WordPressが利用しているPHPや Node.jsなどで実装する場合が多いようです。
Firebaseを利用すれば、Node.jsでサーバー側のサービスを実装できます。
Firebaseを利用すれば、バックエンドは不要と書いていますが、 外部のWebサービスを組み込む場合、サーバー側に最低限のサービスを作る必要が ある場合が多くなります。 ただし、サーバー側のサービスは最低限で良いので、ある程度Webサービスを作れる 知識があれば、それほど大変な事ではありません。その辺もこの連載で取り上げて行く予定です。
シリコンバレースーパーウエアでは、シンプルなWebサービスの作り方だけではなく、 より複雑なWebサービスをテーマにした講座も同時に提供しています。 さらに、作ったWebサービスを利用したビジネスの展開まで考えたWebサービスの 作り方がわかるようになります。

興味のある方は今すぐお問合せください！



またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。



Copyright(c) 2020 by Silicon Valley Super Ware, all rights reserved.

コメント

コメントを投稿

このブログの人気の投稿

ユーザーインターフェースの設計

イメージ
ホーム ブログ Firebase情報 ユーザーインターフェースの設計 2022年10月12日 ユーザーインターフェースの設計 前回は、入力フォームを変更して四則演算をできるようにしました。利用しているフォームは数式の穴埋め形式になっています。計算をする場合、一般的な電卓のようなインターフェースの方が一般の方には使いやすい場合が多いと言えます。今回は、ユーザーインターフェースを変更して一般的な電卓のようにする方法について考えてみました。 HTML でデザイン これまでの、ユーザーインターフェースは、数式の穴埋め形式のフォームでした。 今回は、一般的な電卓のようなユーザーインターフェースを実現します。 この記事では、プログラムの部分は取り敢えず別にして、まずはユーザーインターフェースを作成することにします。 Web アプリの場合、ユーザーインターフェースは基本的に HTML で記述します。 今回の電卓形式のユーザーインターフェースは、電卓の数字を表示する部分（ディスプレイ部分）と数字や演算子を入力する部分（ボタン部分）に分けて考えることができます。 HTML では、「input」のタグでディスプレイ部分を、「button」のタグでボタン部分を記述できます。 <!DOCTYPE html> <html> <head> <title>Calculator</title> </head> <body> <div class="calc"> <div> <input class="display" type="text" /> </div> <div class="keypad"> <div> <button class="clea
続きを読む

足し算以外もできるようにする

イメージ
ホーム ブログ Firebase情報 足し算以外もできるようにする 2022年9月29日 足し算以外もできるようにする 穴埋め形式の数式のフォームを使って足し算をするプログラムを紹介しましたが、同じ要領で、引き算、掛け算、割り算もサポートできるとさらに便利です。この記事では、足し算のプログラムを拡張して、整数の子息演算をできるようにした例を紹介します。 演算子を選べるように変更する 足し算のアプリでは、計算できるのは足し算だけだったので、フォームには「＋」を固定で表示していました。 この部分に変更を加えて、必要な演算子を選択できるようにすれば、引き算、掛け算、割り算もサポートできるようにできます。 これには、HTML の記述を変更してフォームを変更する必要があります。 <label>+</label> を以下のように変更します。 <select onchange="operatorChanged(event)"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> HTML の「select」タグを使って、選択肢は、「option」タグで記述するだけです。 演算子の変更を反映する プログラム側でやることは三つです。 初期状態の演算子を設定する　（最初にフォーム上で表示されている演算子をセットする） 演算子の変更を検出して、現在選択されている選択肢を更新する 「Calcullate」ボタンがクリックされたら必要な処理を呼び出す 現在どの演算子が選択されているかを知る必要があります。実装方法は幾つかありますが、今回は選択が変更される度に現在選択されている演算子を更新する方法を採用した例を紹介します。 これには、現在選択されている演算子を保存する変数「operator」を用意して管理します。
続きを読む

改良版足し算プログラム

イメージ
ホーム ブログ Firebase情報 改良版足し算プログラム 2022年9月15日 改良版足し算プログラム 前回は、入力データのチェックを工夫することで、データを処理する前に想定外のデータの入力を制限するユーザーインターフェースの設計について紹介しました。この記事では、そのコンセプトを使って、実際に足し算をするプログラムにしてみました。今回のポイントは、ユーザーインターフェースとデータ処理を分けるという点に注目してみました。プログラムの設計の際には、この二つの境界をきちんと設定する事が大切です。 データの処理は？ このプログラムは、入力された二つの整数を足して結果を表示するというシンプルなプログラムです。 このプログラムのデータ処理部分は、実は二つの整数の足し算をするだけです。 つまり、プログラムのデータ処理部分は以下の関数「add(a, b)」だけです。 function add(a, b) { return a + b; } 処理自体は、二つの整数「a」と「b」を受け取って、この二つの整数を足し算した結果を返すというシンプルなものです。 残りのプログラムは？ このプログラムのデータ処理部分は、至ってシンプルです。 では、残りのプログラムは何かというと、これがユーザーインターフェースになります。 <!DOCTYPE html> <html> <head> <title>Add Program</title> </head> <body> <div> <input id="opeland0" type="text" placeholder="Please input integer" /> <label>+</label> <input id="opeland1" type="text&qu
続きを読む