ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

react-chartjs-2の線の太さを変更する

なんかドキュメントとして載っている箇所を見つけられなかった*1

github.com

これをダウンロードしてnpm run examplesを実行した結果で動作を確認する

変更方法

examples/src/components/line.jsの中の、datasetsプロパティの中にborderWidthを設定して値を変更すると線の太さを変更できる

borderWidth: 1

f:id:yuzu441:20180711110413p:plain

borderWidth: 30

f:id:yuzu441:20180711110730p:plain

これで変更できることは確認できたんだけど

表の上の項目名?の所まで線が太くなってしまった…
ただここまで太くすることも無いだろうし、基本は困らないかなと考えてる

*1:wrapperなのでchartjsの方見てって事なのか?

CognitoをNode.jsから使ってTokenを手に入れる

AWS勉強しといて(自腹)という死ぬほど雑な指示を会社から受けて、数日が経ちました
どうも、6月の請求額が0円で安心したゆずです

cognitoとは

Amazon Web Serviceが提供する認証サービス

モバイルだったりWebサービスだったり色々なもので使えるもので ユーザー名/メールアドレス&パスワードの認証のみならず、Google, Facebookなどのログインもやってくれるすごいやつ*1

MAUが50,000までは無料なので、気軽に試せますね

実は認証以外にもユーザーデータの端末間同期取ってくれる機能とかあるっぽいですがそこらへんは別の機会に*2

今回のゴール

ユーザー名・パスワードで認証してJsonWebTokenを取得する

conitoの設定をする

ユーザープール作成

cognitoの設定画面に行って、「ユーザープール管理」から「ユーザープール作成」でユーザープールを作成。今回はデフォルト設定を基本そのまま使う。
パスワードの制約が面倒だったので、テスト用だしとポリシーページで自分は緩めました(画像はデフォで作った所の写真なので緩くなってません)

f:id:yuzu441:20180702144040p:plain

作成したら「プールID」というのを後で必要になるのでメモ帳か何かにメモっておいてください

ユーザー作成

「ユーザーとグループ」をクリックして、APIからもユーザーは作れるのですが面倒なので手動でユーザー作ります

f:id:yuzu441:20180702144626p:plain

f:id:yuzu441:20180705125344p:plain

アプリクライアントの発行

ユーザーの作成が完了したらアプリクライアントIDを発行します 左のメニューから「アプリクライアント」を選択して、「アプリクライアントを追加」するとアプリクライアントIDが発行されます

f:id:yuzu441:20180705132845p:plain

このアプリクライアントIDも後で使用するためメモ

フェデレーティッドアイデンティティの設定

フェデレーティッドアイデンティティの設定画面に移動し、IDプールを作成します

ここで認証プロパイダのCognitoタブに、メモしたプールIDとアプリクライアントIDを設定し「プール作成」を選択します

ロールの設定は今回は特に変更せず次へ

IDプールが作成されたら作成したIDプールを開き、右上の「IDプールの編集」をクリックし「IDプールのID」をメモします

認証が通ることを確認する

認証が通ることを確認するコードを書きます

aws-cognito-identity-js前はあったっぽいですが、今はAWS-Amplifyを使うべきみたいです

www.npmjs.com

コードを書く前に

書き始める前に以下の項目が必要です*3

  • identityPoolId
    • 作成したフェデレーティッドアイデンティティを開いて、右上の「IDのプールの編集」をクリックしたら出てくるページに書いてる
  • region
    • cognitoを作成したリージョン
  • userPoolId
    • 作成したユーザープールの全般設定の1番上に「プールID」として定義されている
  • userPoolWebClientId
    • 作成したユーザープールのアプリクライアントページに「アプリクライアントID」として定義されている

書いていく

AWS Amplifyに書いてるコードを使ってログインできることを確認する*4

yarn add aws-amplify isomorphic-fetch

isomorphioc-fetchはNodeで試したいため導入しています

以下はtokenが取れることを確認するためのサンプルコード (実際に使うときはusernameとか入力値使えばいい)

require("isomorphic-fetch")
const Amplify = require("aws-amplify")
Amplify.default.configure({
  Auth: { // 以下の項目にメモったものを書く
    identityPoolId: "",
    region: "",
    userPoolId: "",
    userPoolWebClientId: ""
  }
})

// 作成したユーザーのユーザーネーム
const userName = "nogi"
// パスワード
const pw = "hogehoge"

Amplify.Auth.signIn(userName, pw)
  .then(user => {
    // 初期ログインのユーザーはパスワードの変更を求められる
    if (user.challengeName === "NEW_PASSWORD_REQUIRED") {
      // パスワードの変更(今回は同じものを設定している)
      return Amplify.Auth.completeNewPassword(user, pw, {})
    }
    return user
  })
  .then(user => console.log(user.signInUserSession.idToken.jwtToken)) //tokenを表示
  .catch(e => console.error(e))

これでトークンが取得できて表示されるはず

まとめ

challengeNameNEW_PASSWORD_REQUIREDと書かれていたので パスワードを変更しないと行けないのはわかったけど、completeNewPassword使うってのが気づけなくて大変だった

自分の探し方が下手なのかcognitoの使い方よくわからん問題 とりあえずログインできたので、次api gatewayあたりと連携して認証してるユーザーがapi叩けるみたいなのやる

AWSを触り始めた

世間はAWS Summit Tokyoで盛り上がってますが、大阪の真ん中らへんで日報と戦っていますゆずです。

会社から「AWSとAzure両方できるやつがほしい」と言われ AzureかAWSならAWSかなーコミュニティ楽しそうだしって感覚でGCP派ですがAWS始めました。 (GCPっていうかFirebaseなんですけど、クレカとか登録せず無料枠で遊べるのめっちゃ良い)

アカウント作ってEC2のインスタンス立てる前までに何をしたかをメモ的に書く
その設定やべぇよってのがあったらtwitterとかで教えていただけると助かります

tl;dr

特に中身ない、アカウント作ってちょっと設定したよってだけの記事です

想定読者は自分と同じ今更AWS登録してるような人です
あと初心者はこんな気持ちでやってんのかみたいな気持ちで読める広い心を持つ人

アカウント作った

なにはともあれアカウント作りました。
これでクラウド破産に怯える生活のスタートです。

必要だったもの

  • クレカ
  • 携帯電話(電話認証があった)

特に手順とか無く項目入れて次へをやっていくだけ

唯一ハマったというかハメられたのは「住所」とか日本語で書いてんのに「Osaka」とか英語で書かないと行けなかった所

2FA設定した

アカウント作れたので、ガンガンGPUぶん回してIoTでAIが世界をブロックチェーンする予定もなかったんですが
AWSの資料*1にルートアカウント使うなとか書いてあったので2段階認証設定して糞長いパスワード設定して封印しました

2段階認証の設定についてはIAMのページに行って 「ルートアカウントのMFAを有効日」→「MFA管理」で設定できたはず

設定金額超えそうになると通知来るように

$30超えそうになったらメールで教えてくれるように、CloudWatchに設定した

papix.hatenablog.com

支払い通過を日本円に

適当にいじって眺めてたら円請求にできるっぽかったので円請求にした

dev.classmethod.jp

IAMユーザー発行した

ルートアカウント封印したのでadminアカウント作りました

IAMのページで「ユーザーを追加」して適当に入力していきます。
アクセスの種類は両方チェック、パスワードはどうせ変えるから自動生成にしました。

アクセス権

アクセス権はグループを作ってそれに付与するらしい(Linuxのgroupsみたいなもんかな?)
グループの作成して、適当に名前つけて「AdministratorAccess」を作ったグループに付与しました

地味にハマった点

アカウント作れたのにIAMユーザーのログイン方法がわからんくて唸ってた

IAMのユーザーページから作ったユーザークリックして認証情報開くと書いてた

  • コンソールのログインリン
    • https://xxxxxxx.signin.aws.amazon.com/consoleこんな感じのやつ

あとは上のアドレスにアクセスして
ユーザー名とアカウント作った時に出てたパスワードを入力するとログインできる

まとめ

AWSは人口が多いので、大概ググると出てくるし、最悪twitterで聞けば誰かしら教えてくれるのでよかった

ただ貧乏人かつ小心者としてはクラウド破産が怖いので、設定した値段超えたら全サービス落としてくれる悪魔的機能が欲しい。。自分でAPI叩くようにすればいいらしいけどまだそこまで手が。。。