More than 3 years have passed since last update.

Vue.jsでSPA - [8] バックエンドとうまくやっていこうとして試したこと

Last updated at 2020-04-05Posted at 2018-09-30

今回は、作り始めたSPAをバックエンドとつなげていく回。実際にバックエンドとつなげる前に考えないといけないことはざっとこんな感じ

認証とセッション管理（cookieなど - 特に3rd party cookie）
サーバ証明書
CORS - Cross Origin Resource Sharing

これらは全部セキュリティがらみなので、プロダクションでは避けては通れないが、開発当初から真面目にやってるとそれなりに時間かかるし、サーバ側がさわれないと前に進めない部分もあるので、フロント側の開発に集中したい場合は「うまく回避しながらやっていく」ことになるが、ブラウザごとに回避方法違うのでちょっとめんどくさい

認証とセッション管理

バックエンドはどんな認証方法でどんな値が返ってくるか？を知る．まずは curl をつかって確認するのがお手軽。のちのちJSが動かなくなって、切り分けする時にも基本は curl 様のお世話になるだろう

世の中まだ、セッション管理にはcookieもらうのが一般的だと思う。例えば、最初のアクセスは以下のように認証情報を-dで渡す。（認証情報は application/x-www-form-urlencodedでURLエンコードされて送信される）返信として、サーバからクッキーをもらう。（ここではcookie.txtへ保存）

curl -k -L -v -c cookie.txt \
https://your/api/end/point \
-d "username=your-name" \
-d "password=your-pass" \
-d "destination="

以降は毎回のリクエストに cookie.txt を渡すことでサーバがセッションを認識してくれる

curl -k -b cookie.txt https://your/api/end/point

サーバ証明書のチェックを回避する

開発サーバの証明書は往々にしてオレオレ証明書だろう。その場合、以下のように怒られるはず。-k つけておけば証明書のチェックを回避して、前に進むことができる

curl: (60) SSL certificate problem: self signed certificate
More details here: https://curl.haxx.se/docs/sslcerts.html

curl performs SSL certificate verification by default, using a "bundle"
 of Certificate Authority (CA) public keys (CA certs). If the default
 bundle file isn't adequate, you can specify an alternate file
 using the --cacert option.
If this HTTPS server uses a certificate signed by a CA represented in
 the bundle, the certificate verification probably failed due to a
 problem with the certificate (it might be expired, or the name might
 not match the domain name in the URL).
If you'd like to turn off curl's verification of the certificate, use
 the -k (or --insecure) option.
HTTPS-proxy has similar options --proxy-cacert and --proxy-insecure.

ちなみに -L はURLリダイレクト 302 を追いかけてくれる
今後必ずデバッグなどでHTTPヘッダをみたくなるので -I -v などのオプションを必要に応じてつけておく．
ちなみにクッキーの中身を見たい場合は Set-Cookie というヘッダに入っている

いや、俺は JS でやりたい

というような人は node 使うかブラウザのデベロッパーコンソールを使えばいいかも。デベロッパーコンソールは確かにオブジェクトやHTTPヘッダへのアクセスが容易で、デバッグしやすそうだ。また、あれこれ確認後にJSコードをそのままつかえるというのもいいかもしれない

###node と axios でやってみた

試しに node と axios で同じことをやってみた。もらったクッキーの中身を表示する例

const axios = require('axios');  

process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'; 

let login_url = "https://your/api/end/point"
let data = "username=your-name&password=your-pass&destination="

axios.post(login_url, data)
  .then(function (response) {
    console.log(response.headers["set-cookie"]);　// show the cookie header
  })
  .catch(function (error) {
    console.log(error);
  });

ここでも証明書のチェックがあると以下のエラーになるので、これを回避するためにprocess.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'; を指定している

{ Error: self signed certificate
    at TLSSocket.onConnectSecure (_tls_wrap.js:1041:34)
    at TLSSocket.emit (events.js:160:13)
    at TLSSocket._finishInit (_tls_wrap.js:638:8)
  code: 'DEPTH_ZERO_SELF_SIGNED_CERT',
  config:

###ブラウザのデベロッパーコンソールに JS を貼り付けてみた

デベロッパコンソールをJSを貼り付けて、インタプリタとして使う方法もやってみた。curl や node でやるよりよりこの方がなんとなく本番の環境に近い。デベロッパコンソールはインタプリタとしてはまあ使いやすいが、以下の点に気をつける必要があった

axiosなど外部のJSライブラリを読み込む方法
サーバ証明書のチェックを回避する方法
CORSのチェックを回避する方法

1 の外部ライブラリ axios の読み込みはデベロッパーコンソールに以下のように打ち込めばできた。Stack Overflowさまさまである

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://unpkg.com/axios/dist/axios.min.js';
document.head.appendChild(script);

これ、やってることは以下と同義

<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>

あとは node とおなじでうごいた...

let login_url = "https://your/api/end/point"
let data = "username=your-name&password=your-pass&destination="

axios.post(login_url, data)
  .then(function (response) {
    console.log(response.headers["set-cookie"]);
  })
  .catch(function (error) {
    console.log(error);
  });

と言いたいところだが、ブラウザでやっているので、そうはいかない。2 と 3 の対処をしないと怒られる。

次回

2 と 3 は当然ブラウザごとに方法が違う。Chromeはチェックが（最近さらに）厳しく、さくっと進めるならSafariの方が良いと知った。今回はちょっと長くなってきたので、次回その辺りを書くことにする

シリーズ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up