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


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

1. 認証とセッション管理（cookieなど - 特に[3rd party cookie](https://qiita.com/narutaro/items/e53f653d73a6934046d0)）
2. サーバ証明書
3. CORS - Cross Origin Resource Sharing

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


## 認証とセッション管理

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

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

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

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

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

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

```shell
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` で同じことをやってみた。もらったクッキーの中身を表示する例

```javascript
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';` を指定している

```json
{ 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` でやるよりよりこの方がなんとなく本番の環境に近い。デベロッパコンソールはインタプリタとしてはまあ使いやすいが、以下の点に気をつける必要があった



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

1 の外部ライブラリ `axios` の読み込みはデベロッパーコンソールに以下のように打ち込めばできた。[Stack Overflow](https://stackoverflow.com/questions/5282228/include-javascript-file-in-chrome-console)さまさまである

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

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

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

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

```javascript
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の方が良いと知った。今回はちょっと長くなってきたので、次回その辺りを書くことにする

## シリーズ

- [Vue.jsでSPA - [1] Element UIでベースの画面をつくる](https://qiita.com/narutaro/items/50d0e4714f93279502c9)
- [Vue.jsでSPA - [2] Element UIで各ペインの画面をつくる](https://qiita.com/narutaro/items/9abbf7881f692c985484)
- [Vue.jsでSPA - [3] vue-routerでルーティング ](https://qiita.com/narutaro/items/74178f4ea031b0ccfa44)
- [Vue.jsでSPA - [4] コンポーネントにしてみる ](https://qiita.com/narutaro/items/df793bb34129d113d9f2)
- [Vue.jsでSPA - [5] リアクティブになってる？](https://qiita.com/narutaro/items/bed4eab6e53e3b46c0b2)
- [Vue.jsでSPA - [6] サーバからのデータ取得](https://qiita.com/narutaro/items/82f4d9635c398524431c)
- [Vue.jsでSPA - [7] Vueからサーバデータ取得](https://qiita.com/narutaro/items/91da194788318c226e0e)
- [Vue.jsでSPA - [8] バックエンドとうまくやっていこうとして試したこと](https://qiita.com/narutaro/items/3b7135eed8f6e930a0e6)
- [Vue.jsでSPA - [9] 今更ながらCORSとそのエラーの回避方法](https://qiita.com/narutaro/items/26e4cbec386bc054bbd7)
- [Vue.jsでSPA - [10] Safari..お前か...3rd party cookie](https://qiita.com/narutaro/items/e53f653d73a6934046d0)
- [Vue.jsでSPA - [11] Element UIでログイン画面](https://qiita.com/narutaro/items/010009c0198371fee658)
- [Vue.jsでSPA - [12] ログイン：シングルペインからツーペインへ画面遷移](https://qiita.com/narutaro/items/fca953b3b2ed5c63360c)
- [Vue.jsでSPA - [13] モバイル向けに OnsenUI に手をだす](https://qiita.com/narutaro/items/bdc0e25c22369466bed3)
- [Vue.jsでSPA - [14] Vue.jsとOnsenUIを使ったオレオレなショッピングカートチュートリアル](https://qiita.com/narutaro/items/9502b90b565366911c57)
- [Vue.jsでSPA - [15] 世界中の人とミーティング時間を決める時に便利なやつ](https://qiita.com/narutaro/items/d6431f54050504bf1551)
- [Vue.jsでSPA - [16] へー、FirebaseでWebアプリのログインってこうやるのか](https://qiita.com/narutaro/items/3c37fe6c3b19a6143a07)