TWSNMP FC:ログイン画面の開発開始

今朝は猫に２時半に起こされました。さすがに眠いのでお願いして４時まで待ってもらいました。昨日、高校女子サッカーの決勝を観ながら裏方の処理の移植をほぼ完了したので今日から画面表示する部分を作るのを猫は察知したのかもしれない。彼は画面で何か動くのを見るのが好きなので！

最初に作るのはログイン画面にしました。復刻版はデスクトップアプリケーションなのでログインは必要ありませんがTWSNNP　FCはNuxt.jsとGO言語のEchoを使ったシングルページWebアプリケーションとして開発しているのでちゃんと許可された人だけが使えるようにする必要があるためです。

JWTを使ってログイン

ログイン時の認証はJWTを使うことにしました。

JSON Web Token - Wikipedia

GoogleにGO言語のEchoとNuxt.jsの組み合わせた環境でのJWTの使い方を聞いてみましたが、ドンピシャの説明は見つかりませんでした。そう都合のよいことはないので分けて調べました。

GO言語とEchoでJWTを使った例は、公式サイトにありました。

JWT Recipe | Echo - High performance, minimalist Go web framework

Echoはドキュメントの説明が分かりやすいので好んで使っています。

Nuxt.jsとJWTは、いろいろ調べましたが公式よりも

NuxtでJWT認証を導入する

が参考になりました。テスト用にこのサイトのプログラムがそのまま使うことを考えました。できるだけて手抜きしたいので！

GO言語側は、Echoの初期化で

	e.POST("/login", login)
    // JWT保護されたRoute
	r := e.Group("/api")
	r.Use(middleware.JWT([]byte(p.Password)))
	r.GET("/test", apiTest)

にして、ログイン処理は、

type loginEnt struct {
	Name     string `json:"name" form:"name" query:"name"`
	Password string `json:"password" form:"password" query:"password"`
}

func login(c echo.Context) error {
	le := new(loginEnt)
	if err := c.Bind(le); err != nil {
		return echo.ErrUnauthorized
	}
	api := c.Get("api").(*WebAPI)
	// とりあえずのパスワード認証
	if le.Name != "test" || le.Password != "test" {
		return echo.ErrUnauthorized
	}

	// トークン作成
	token := jwt.New(jwt.SigningMethodHS256)

	claims := token.Claims.(jwt.MapClaims)
	claims["name"] = le.Name
	claims["admin"] = true
	claims["exp"] = time.Now().Add(time.Hour * 24).Unix()

	t, err := token.SignedString([]byte(api.Password))
	if err != nil {
		return err
	}
	return c.JSON(http.StatusOK, map[string]string{
		"token": t,
	})
}

ログイン後の処理を

type testResEnt struct {
	ID       int    `json:"id"`
	Name     string `json:"name"`
	NickName string `json:"nickname"`
}

func apiTest(c echo.Context) error {
	r := new(testResEnt)
	r.ID = 1
	user := c.Get("user").(*jwt.Token)
	claims := user.Claims.(jwt.MapClaims)
	r.Name = claims["name"].(string)
	r.NickName = "Test User"
	return c.JSON(http.StatusOK, r)
}

のようにします。

Nuxt.jsのサンプルのnuxy.config.jsを

  axios: {
   baseURL: 'http://localhost:8080/' //ここ
 },

 auth: {
   strategies: {
     local: {
       endpoints: {
         login: { url: 'login', method: 'post', propertyName: 'token' },　// ここ
         user: { url: 'api/test', method: 'get',propertyName: ''}, // ここ
         logout: false
       }
     }
   }    
 }
}

のように書き換えれば、TWSNMP FCのGO言語側をサーバーにしてテストできました。結果は、

のような感じでうまくいきまいした。

AIRでホットリロード

Nuxt.jsを使った開発では、

$npm run dev

でサーバー起動しておくとソースコードを変更すると自動で変更を反映した状態でサーバーを再起動してくれます。いちいちサーバー止めてビルドしてサーバーを起動するということをやらなくてすみます。開発中は、これを何百回とやることになるので嫌になってしまいます。自動で出来れば楽になります。GO言語側のサーバーも同じことがしたいので、この前読んだ本にRealizeというのがあることを知りました。でもRealizeは古ぽいので、

【Golang/Go言語】Airでホットリロードをする方法

をみて

GitHub - cosmtrek/air: ☁️ Live reload for Go apps

を試してみました。

いい感じなので使うことにしました。
nuxt.jsで作成したspaのフォルダを除外しないと

failed to watching /Users/ymimacmini/prj/twsnmp/twsnmpfc/spa/node_modules, error: bad file descriptor

のエラーで起動できませんでした。

今日の作業内容

今日の作業は、

裏方のパッケージを初期化してWEBサーバーを起動可能にした。JWTのログインにも対応 · twsnmp/twsnmpfc@285dbd0

でした。Web画面の開発環境も整ったので明日からは画面表示の移植になると思います。