コンビニで買った育てるサラダをrasPiで撮ってKinesisに流してゴニョゴニョする  後の前編

サラダも順調に育ってきたこの頃です。

<img src="https://qiita-image-store.s3.amazonaws.com/0/308709/57ee7893-644c-5ee3-7765-e3c06606a9aa.jpeg" width=77%>

ごちゃごちゃしてきた。カメラはもうちょっと適したやつに変えたい。変える。

## 閲覧方法を考える

### 要件

+ スマホ(android)から手軽に見たい。ブラウザがいい。
+ 温度計と湿度計の数値はなんとなくでも見えてほしい
+ 認証は必要だけど、ほどほどのセキュリティレベルでいい
+ サーバーレス
+ このStreamをみるためだけのシステムでいい

### 部分的に考えてみる

![Untitled Diagram.jpg](https://qiita-image-store.s3.amazonaws.com/0/308709/60430ff2-d17b-d23d-8138-d27facadafd7.jpeg)

ちょーざっくり書くとこんなイメージ。
やってみてダメなら代替案考えつつやろう。

中心となるのはcogniteとLambdaかな。この二つがちゃんとできれば形はどうあれなんとかなる。
そんなわけでcognite<->api gateway<->lambdaのあたりから取り掛かってみます。

## cognite

![12.png](https://qiita-image-store.s3.amazonaws.com/0/308709/b1c22be9-be04-037b-a061-59b1947fdebd.png)

1. ユーザープールを作成します
  1. 名前：任意
  2. 属性：ユーザー名、標準属性：なし
  3. ポリシー：管理者のみ作成、有効期限:90
  4. MFA: ゆるゆる
  5. 以降デフォルト
  
![11.png](https://qiita-image-store.s3.amazonaws.com/0/308709/b62c3d2c-327e-58b7-58c8-c4e7e7c978eb.png)
とりあえずできた。

2. ユーザー作成
  2. ユーザーの作成を開いて名前をパスワードのみ入れて作成する

![13.png](https://qiita-image-store.s3.amazonaws.com/0/308709/46dc439d-ea12-ffb1-1e7b-271d0d97c30d.png)

とりあえずできた。

3. アプリクライアントの追加
  4. クライアントシークレット外して、トークン期限は上限にしてしまう。
  5. 作ると```アプリクライアントID```が表示されるのでメモります。

![14.png](https://qiita-image-store.s3.amazonaws.com/0/308709/bbda074b-3e1c-244b-d1b9-66280e2e6da2.png)

4. IDフェデレーション設定
  5. 一旦スルー

## さて認証

これ使いたい
https://aws-amplify.github.io/docs/js/authentication

### まずvue-cli

https://cli.vuejs.org/
https://cli.vuejs.org/guide/installation.html

```
$ npm install -g @vue/cli
```

こんだけ。


### amplify

https://aws-amplify.github.io/docs/js/vue
https://aws-amplify.github.io/docs/js/authentication

```
$ vue init webpack raspi-stream (なんか聞かれるけどだいたいdefaultで)
$ cd raspi-stream
$ npm install
$ npm i aws-amplify
$ npm i aws-amplify-vue
$ sudo npm install -g @aws-amplify/cli
$ amplify init
$ amplify add auth
$ amplify push
```

なんかここまでやったらcloudFormationのテンプレ作られて、cogniteのプールも作られた。ちょっと前にやったcogniteの設定いらんかったかな。あとで作ったやつの方が都合よさそうなので、そっちをカスタマイズしてみました。以前のは捨てる。

src/components/HelloWorld.vueを編集します。
[こちら](http://blog.asial.co.jp/2018/09/21/3%E9%80%A3%E4%BC%91%E3%81%ABCognito_vue/aws-amplify%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E6%89%8B%E8%BB%BD%E3%81%AB%E8%AA%8D%E8%A8%BC%E6%A9%9F%E8%83%BD%E3%82%92%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3)を~~パク~~..インスパイアしつつ書き換えます。


``` HelloWorld.vue
<template>
  <div class="page">
    <div class="login-form">
      <p>ログイン</p>
      <p>{{ status }}</p>
      <p>{{ message_text }} </p>
      <label>ユーザー名</label>
      <input type="text" v-model="userInfo.username"/>
      <label>パスワード</label>
      <input type="password" v-model="userInfo.password"/>
      <button class="btn btn-primary" @click="signIn()">ログイン</button>
      <img :src=url>
    </div>
  </div>
</template>
<script>
import Amplify, { Auth } from 'aws-amplify';
import aws_exports from './aws-exports'; 
Amplify.configure(aws_exports);
export default {
  data () {
    return {
      status: '',
      userInfo: {
        username: '',
        password: '',
      },
      message_text: '',
      url: '',
    };
  },
  created() {
    Auth.currentSession()
    .then((data) => {
      this.status = 'ログインしています'
    }).catch((err) => {
      this.status = 'ログインしていません'
    });
  },
  methods:{
    signIn: function () { 
      Auth.signIn(this.userInfo.username, this.userInfo.password)
      .then((data) => {
        this.message_text = 'ログインしました';
        this.status = 'こんにちは、'+data.username+'さん';
      }).catch((err) => {
        this.message_text = 'ログインできませんでした';
      });
    },
  }
}
</script>
<style scoped>
  .login-form {
    margin: 20;
  }
</style>
```

まるパクリですいません。
そして、

```
$ npm run build
```


さて、これをS3に置いてみます。distの中身をS3に置こう。

```
aws s3 sync ./dist s3://bucket-name
```

ここまでやったらS3の静的ホスティングを一時的に有効にしつつ、確認してみます。


が・・

![15.png](https://qiita-image-store.s3.amazonaws.com/0/308709/08357a2e-b783-94e2-796e-4ad69c15fd41.png)



なんだこれ。なんか古いライブラリでもあんのかな。
cognito-identity.ap-north-east-1.amazonaws.com なんてFQDN、名前解決できないのにここにアクセスしてる。

・・あ～、、そりゃ名前解決せんわ。ap-north-east-1になってる。aws-export.jsに書いたregionがtypoしてた。

でもやはり微妙にうまくいかなかったので方針変更。
これをやってみた

https://github.com/aws-samples/aws-amplify-vue

そしたらなんとかサインイン画面が出てきて認証もはしってそうになった。

![16.png](https://qiita-image-store.s3.amazonaws.com/0/308709/75a78cbf-bb03-bfd1-983c-412b56602fff.png)

ただ、この先でMFA認証っぽいの求められて、```Invalid attributes given, new password should be given with key NEW_PASSWORD```みたいに言われるし。強引にNEW_PASSWORD設定しちゃいたいな。と思ってたらCLIでできそう。

[AWS CLIを使ってCognitoユーザーステータスのFORCE_CHANGE_PASSWORDをCONFIRMEDにしてみる](https://dev.classmethod.jp/cloud/aws/change-cognito-user-force_change_passwore-to-confirmed/)

そんなわけでこれでいけた

```
$ aws cognito-idp admin-initiate-auth \
--user-pool-id ap-northeast-1_xxxxxxxxx \
--client-id xxxxxxxxxxxxxxxxxxxxx \
--auth-flow ADMIN_NO_SRP_AUTH \
--auth-parameters \
USERNAME=test,PASSWORD=Passw0rd!
```

プールIDはcognitoのやつでクライアントIDはアプリクライアントIDであとは変えたいユーザーの名前と今のパスワード。
で、これで返ってきたSessionで新しいのを設定する。

```
$ aws cognito-idp admin-respond-to-auth-challenge \
--user-pool-id ap-northeast-1_xxxxxxxxx \
--client-id xxxxxxxxxxxxxxxxxxxxx \
--challenge-name NEW_PASSWORD_REQUIRED \
--challenge-responses NEW_PASSWORD='Passw0rd!!',USERNAME=test \
--session "mVvjpL7DgH9EYlZ3AJVozh0b1O5av4-HFBwzIzb5oN7smiGwKxXrWdVJkrp_65cZ11ggQ4qt3lhhp9KiAiKFem61iJS4F_l64laOyHLF3VVzPaFg1UQaWIK1vR13gkxIkBGl4oE1abb5Jqi_kIzTnLahOPW59YRynnWr8WSV7k4IZ2yhMI7Hf8iDQZCPzQ4N5b13J5gPPJrk6wchGyypGJK5bSFppTV2ScOn4oNySQ0j-6OzN8vQF102YaEKemkz05-XU5vF8PdvuNjFYCwJL4Blkt2FjpfUpa6bKOBT0HcvE2dpVNeRnN6w3GnwNijdno1pfXjhBKltpn95RJE3eIMdOhUXqDDGsisN4Au66i7gDwPtZDMAWswGHnb-JTqQ32a9CKT5bvk16OS-3o3x_iuKe9t3tRNIrZ527k9KJQZujT-H7CByznXsfVVDVx5HawEtDgAD-O4OG4h5mmdAksaAypg9yDPf2FMa6STlnOdQkTufGpWuDLHsKvcpnK1w_VowhgNfkkMt1ch-toQ-iES11TGk-c1u1BKoKrBFLse9D2D9UIKHqsKP5F4YkB410u9Byj1XIZV3ENcNXms-foFDaoXIB5mSpVRo-oIc5qxgdnuuM38WpAWbvBm4ea730VMj9hA1Ifz4qKbcCcGzLHm-QuZv1LYuWFOcwZ1hy3MiwQQgWlYwcVZ78VYbc4uRbacmWMhJG8fR0tZQAuDBVLRVKFZViIUYlfZpe9iWf9Wr2q-2YMRCd2gLPCY8micRnGwoZy5LZbk3C4rB6LBKgWl2uMge5umQfhIgREQ_-QSrbDy0tgDwFGbL8avO5EfcjQwngg"
```

```CONFIRMED``` に変わったー。

![17.png](https://qiita-image-store.s3.amazonaws.com/0/308709/df0e5bb5-a5e3-e715-b0ab-080f07457c4d.png)

ので、認証後の画面いけたっす。

![18.png](https://qiita-image-store.s3.amazonaws.com/0/308709/b6db8e22-e4af-9ce5-6c10-d9aef1f93769.png)

次はこの認証を通してLambda叩いてHLSのエンドポイントをとってこないといけない。
思ったより大変だ。たぶん次は後の中編。もうサラダ大人になっちゃうな。。

ちなみにS3の前にCloudFrontも通してみてます。S3の静的ホスティングは閉じてOrigin Access Identityってやつを設定しないとな。