taisablog

taisa's engineer blog

「 月別アーカイブ:2019年08月 」 一覧

Golangを使ってJWTを15分で理解する

2019/08/28   -Go

JWTとは JWT(ジョットと言うらしい)はJSON Web Tokenの略で、JSONをベースとしたアクセストークンのためのオープン標準 (RFC 7519) です。色々記事を見ましたが、最終的にWikipediaが分かりやすく一番参考にしました。https://ja.wikipedia.org/wiki/JSON_Web_Token JWTの構造 JWTは以下の3つの要素をピリオドで区切った文字列で構成されます。 ヘッダー 署名生成に使用するアルゴリズムを格納します。下記のHS256は、このトークンがHMAC-SHA256で署名されていることを示しています。署名アルゴリズムとしては、SHA-256を使用したHMAC (HS256) や、SHA-256を使用したRSA署名 (RS256) がよく用いられます。 { “alg” : “HS256”, “typ” : “JWT” } ペイロード 認証情報などのクレームを格納します。クレームとはペイロードに含める以下のような標準フィールド(クレーム)を指します。JWTの仕様では、トークンに一般的に含まれる7つの標準フィールドが定義されています。また用途に応じた独自のカスタムフィールドを含むこともできます。下記の例では、トークン発行日時を示す標準のクレーム (iat) と、カスタムクレーム (loggedInAs) を格納しています。 { “loggedInAs” : “admin”, “iat” : 1422779638 } 7つのペイロードの標準クレーム 署名 トークン検証用の署名です。署名はヘッダーとペイロードをBase64urlエンコーディングしてピリオドで結合したものから生成します。署名はヘッダーで指定された暗号化アルゴリズムにより生成されます。下記はHMAC-SHA256形式でのコード例です。 HMAC-SHA256(base64urlEncoding(header) + ‘.’ + base64urlEncoding(payload), ‘secret key’) JWTを使用するにあたって JWTはトークンが返され、それをローカルに保存して利用します(主にlocal storageやsession storageが用いられますが、セッションIDのようにCookieを用いる場合もあります。) 認証時にはAuthorizationヘッダーでBearerスキーマを利用します。またサーバー上に認証状態を保持しないステートレスな認証方式です。その為JWT単体ではトークンを無効にすることが出来ません。サーバーに状態を保持すれば可能ですが、その場合ステートレスの利点は失われることになります。さて、ここまではほぼ Wikipedia に書いてある内容そのままです。ここから実際にGo/GinのJWT Middlewareを使って実際の動作を確認してみます。 Go/GinのJWT Middlewareを使った動作確認 利用するJWT Middlewareについて ここでは、「https://github.com/gin-gonic/gin」 を使う前提で、次のMiddlewareを利用します。「https://github.com/appleboy/gin-jwt」。このMiddlewareは、auth_jwt.goの1ファイルでで構成されていて、「https://github.com/dgrijalva/jwt-go」 をGin用に薄くラップしたものです。jwt-goはトークンを作成したりパースしたり様々な機能が用意されています。 サンプルソース サンプルソースは、https://github.com/appleboy/gin-jwt/blob/master/README.md に載っているのでこれを元に確認します。処理は大きく「ログイン時にToken発行する」と「トークン認証&処理実行する」の2種類あります。 ログイン時にToken発行する ログイン時にTokenを発行する処理は、LoginHandlerです。Routerでは次のように定義しています。LoginHandlerではAuthenticatorとPayloadFuncが呼ばれる為、Middlewareにてこれらを実装する必要があります。 r.POST(“/login”, authMiddleware.LoginHandler) Authenticatorはログイン認証の為の関数です。例では固定値が設定されていますが、実際は主にDBから値を取得することになると思います。PayloadFuncはペイロードに含めるクレームを設定します。ペイロードには任意のクレームを追加可能なので、ログインIDとなるuserIDをセットしています。 // ログインに基づいたユーザの認証振る舞いをするコールバック Authenticator: func(c *gin.Context) (interface{}, error) { var loginVals login if err := c.ShouldBind(&loginVals); err != nil { return “”, jwt.ErrMissingLoginValues } userID := loginVals.Username password := loginVals.Password // …

コーチング入門 オススメコーチング書籍3冊!!

2019/08/21   -チーム

これまで特別意識してこなかったコーチングについて意識する機会があったのでオススメしてもらった3冊を読みました。学びがあったこととその感覚の定着の為にメモしておきます。 コーチング・マネジメント―人と組織のハイパフォーマンスをつくる この1冊ですべてわかる 新版 コーチングの基本 0秒リーダーシップ:「これからの世界」で圧倒的な成果を上げる仕事術 背景 大学を卒業してソフトウェアエンジニアになり、いちエンジニアからチームリーダー、テックリード、マネージャー、スタートアップのCTOを経験してきました。その中でチームマネージメントや1on1などもやってきました。ただこれまでやってきたことは自分の経験であったり周囲との関わりで得たものをベースに自分なりに考えてやっていました。 そして今、新しい環境(スタートアップ)にジョインしたところ、今の環境には1on1(コーチング)を積極的に進めているエンジニアがいました。そしてそれはこれまで半ばやらされている感じでやっていた1on1とは印象が違いました。そこでもれなく自分もコーチングをしてもらうようになったわけですが、そのコミュニケーションの中でこれまでの自分の活動を振り返ってみると自分が今「コーチング」に興味があることが分かりました(年齢的なこともあると思います)。「マネージメント」と聞くとちょっと抵抗感があるけど「コーチング」と聞くと抵抗感がないという不思議さもあります。そんなこんなでオススメしてもらった書籍を読み、体系的に学びを得た上で、今後の活動に活かそうと思います。 1冊目 コーチング・マネジメント―人と組織のハイパフォーマンスをつくる コーチング・マネジメント―人と組織のハイパフォーマンスをつくる 書評 2002年に出版された本なので今から約20年程前の本ですが、読んでいても時間の経過による内容のずれなどは全く気になりません。前半から後半にかけては、コーチングの基本・詳細と進んでいき最後の方にはコーチングを導入するにあたってのチェックリストがあるといった構成になっています。中でも一番の要点は、「コーチング・フロー」と「いかに聞くのか?」ということだと思います。「コーチング・フロー」は次のとおりです。 現状の明確化 望ましい状態の明確化 ギャップを引き起こしている理由と背景の発見 行動計画を立てる フォロー これだけ見ると当たり前のようですが、これを実際に実践する・させる為に「いかに聞くのか?」というスキルが求められます。本の中ではそのコミュニケーションへのアプローチの方法やコミュニケーションが如何に大事かが書かれています。やり方や捉え方によっては詰めているようにも感じられそうな程の質問攻めですがそこのバランスが重要なポイントになるかと思います。 2冊目 この1冊ですべてわかる 新版 コーチングの基本 この1冊ですべてわかる 新版 コーチングの基本 書評 2009年に出版された書籍の新版(2019年)です。この本は「コーチング・マネジメント」より詳細に具体的にコーチングについて書かれています。後半では実例による説明もあります。目次がパッと見分かりやすかったので記載しておきます。 1章 コーチングとは何か 2章 コーチのもつべき視点 3章 コーチングの3原則 4章 コーチング・プロセス 5章 コーチングのスキルと実践例 6章 組織へのコーチング 本書でも4章で「コーチング・プロセス」とし「コーチング・マネジメント」の「コーチング・フロー」が書かれています。本書で特筆すべきは「コーチが持つべき3つの視点」として以下の3つ(PBPの視点)について言及されていることです。これらは三角形となりそれぞれ相互に作用しているようです。 Possesion(身につけるもの) Behavior(行動) Presence(考え方、信念) 全体的に図が多く具体的に書かれているので「コーチング・マネジメント」と合わせて読むとより理解が深まると思います。 3冊目 0秒リーダーシップ:「これからの世界」で圧倒的な成果を上げる仕事術 0秒リーダーシップ:「これからの世界」で圧倒的な成果を上げる仕事術 書評 2016年に出版された本で、上記2冊と違い著者が外国人です。著者は日本に長年いながらも、グーグルやモルガン・スタンレーで人材開発を務めていたとあって外国から見た日本という視点がおもしろい点です。上記2冊と違いコーチングではなく、リーダーシップはこうあるべきということが書かれています。グーグルの話や、マインドフルネス、禅などの話も出てきます。コーチングという文脈ではないので上記2冊+αな気持ちで読むとよいかもしれません。 本書で気になったワード 僕はよく英語で、「Leadership is mobilzing people to tackle tough problems.(リーダーシップとは、難問に取り組むために人々を動かしていくこと)」という定義を用います。 Learn, Relearn, Unlearn 学ぶことは大事だが、ただ知識を増やす(Learn)だけではなく、学び直す(relearn)の必要があります。完全に時代遅れになった考え方、価値観や信念は手放す(unlearn)べきです。

no image

Vue.js+TypeScriptで外部APIを使ったTODOリストを作ってみた

2019/08/18   -JavaScript

Vue.jsで外部APIを使ったTODOリストを作ってみた に続き、それのTypeScript版を作ってみました。TODOリスト用のAPIは以前書いたこちらのAPI「Go言語 GORM+GinでTODOリストのAPIを作ってみた」を利用します。CORSを全て許可しているのでどこからでも叩けるようになっています。TypeScriptを書くのは今回が初めてなので、誤っている箇所やもっとよい書き方などがあれば指摘して頂ければと思います。 できたもの できたものはこちらです。http://vuejs-ts.taisablog.com/todo <div class=”graybox”> <div class=”clearfix”><figure><a href=”http://52.196.213.4/wp-content/uploads/2019/08/063dff08aea69d0ee7c6cea19de29030.png”><img class=”alignleft size-full wp-image-1684″ src=”http://52.196.213.4/wp-content/uploads/2019/08/063dff08aea69d0ee7c6cea19de29030.png” alt=”” width=”600″></a></figure></div> </div> APIのエンドポイント APIのエンドポイントは以下としました。 URL http://gin.taisablog.com/api/v1/ GET /todo // 一覧表示 POST /todo // 新規作成 GET /todo/:id // 編集画面表示 PUT /todo/:id // 編集(今回未使用) DELETE /todo/:id // 削除 プロジェクト作成 vue-cliを使ってプロジェクト作成をしました。プロジェクト作成のコマンドを打つと、色々と聞かれますが、TypeScriptを利用する為にManually select featuresを選択し、TypeScriptをONにします。ここではRouterもONにしました。 % npm install -g @vue/cli % vue create my-project default (babel, eslint) ❯ Manually select features vue-cliでできたプロジェクトのsrc配下の構成は以下となっています。今回はそこにTodo.vueとTodoList.vueを追加して実装しました。views配下で実装するだけでも大丈夫ですが、今回はあえてviews/Todo.vueからTodoList.vueコンポーネントを呼び出す形としました。 . ├── App.vue ├── assets │   └── logo.png ├── components │   ├── HelloWorld.vue │   └── TodoList.vue ← 新規追加 ├── main.ts ├── router.ts ├── shims-tsx.d.ts ├── shims-vue.d.ts └── views ├── About.vue ├── Home.vue └── Todo.vue ← 新規追加 views/Todo.vue TodoList.vueコンポーネントを呼び出します。 …

Vue.jsで外部APIを使ったTODOリストを作ってみた

2019/08/14   -JavaScript

APIを使ったTODOリストをVue.jsで作ってみました。TODOリスト用のAPIは以前書いたこちらのAPI「Go言語 GORM+GinでTODOリストのAPIを作ってみた」を利用します。CORSを全て許可しているのでどこからでも叩けるようになっています。 できたもの できたものはこちらです。http://vuejs.taisablog.com/todo APIのエンドポイント APIのエンドポイントは以下としました。 URL http://gin.taisablog.com/api/v1/ GET /todo // 一覧表示 POST /todo // 新規作成 GET /todo/:id // 編集画面表示 PUT /todo/:id // 編集(今回未使用) DELETE /todo/:id // 削除 TODOリストの処理 プロジェクトはvue-cliで作成し、APIはaxiosを利用しました。componentsにTodo.vueファイルを作成しそこにすべての処理を書いています。 インポート import axios from ‘axios’ const NOT_STARTED = 1 // 未対応 const STARTED = 2 // 対応中 const FINISHED = 3 // 完了 data function name: “Todo”, data() { return { todoList: [], inputField: ”, isActive: false, baseUrl: ‘http://gin.taisablog.com/api/v1/’ } }, created function created() { this.getTodo() }, methods : 一覧を取得する async getTodo() { try { let response = await axios.get(this.baseUrl + ‘todo’) this.todoList = response.data } catch (e) { console.log(e) …