More than 5 years have passed since last update.

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

Last updated at 2018-11-16Posted at 2018-11-16

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

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

閲覧方法を考える

要件

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

部分的に考えてみる

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

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

cognite

ユーザープールを作成します
名前：任意
属性：ユーザー名、標準属性：なし
ポリシー：管理者のみ作成、有効期限:90
MFA: ゆるゆる
以降デフォルト

とりあえずできた。

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

とりあえずできた。

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

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

さて認証

これ使いたい
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を編集します。
こちらをパク..インスパイアしつつ書き換えます。

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の静的ホスティングを一時的に有効にしつつ、確認してみます。

が・・

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

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

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

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

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

AWS CLIを使ってCognitoユーザーステータスのFORCE_CHANGE_PASSWORDを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 に変わったー。