【Go】Echo Controllerを別Packageに分割する

細かい話だけどecho的には特にルールは決まっていなそう。

main.go

package main

import (
  "github.com/labstack/echo"

  "app/controller"
)

func main() {

  e := echo.New()

  e.GET("/members", controller.GetMember())
  e.POST("/members", controller.PostMember())
}

controller/members.go

package controller

import(
  "net/http"                                                                                                                                                                                                       
  
  "github.com/labstack/echo"
)

func GetMember() echo.HandlerFunc {
  return func(c echo.Context) error {
    ・・・
  }
}

func PostMember() echo.HandlerFunc {
  return func(c echo.Context) error {
    ・・・
  }
}

こんな感じでよいのかな。。以上です。

【Go】Echo JSONを返す

echoでjsonを返すサンプル

package main

import(
  "net/http"                                                                                                                                                                                                       
  
  "github.com/labstack/echo"
)

// レスポンスを表す構造体を定義
type Member struct {
  Id int `json:"id"`
  Name string `json:"name"`
}

func main() {

  e := echo.New()
  e.GET("/members", func(c echo.Context) error {
    // Member型のリスト
    members := []Member{
      {Id: 1, Name: "test1"},
      {Id: 2, Name: "test2"}
    }
    return c.JSON(http.StatusOK, members)
  })
}

以上です

macにgoをインストールする手順メモ

1台のPCで複数バージョンのGoを使用したいのでgvm(Go Version Manger)を使用する。

https://github.com/moovweb/gvm
ドキュメントどおりにやったらすんなり入った。Mac使ってるので「Mac OS X Requirements」のコマンド実行

準備

$ brew update
$ brew install mercurial

gvmのインストール 「Installing」のコマンド実行

$ bash < <(curl -s -S -L https://raw.githubusercontent.com/moovweb/gvm/master/binscripts/gvm-installer)

gvmがインストールできたことを確認

$ gvm version
Go Version Manager v1.0.22 installed at /Users/xxxxx/.gvm

goをインストール

# インストール可能なバージョンを調べる
$ gvm listall

# 1.4と1.9のバイナリーをインストールする
$ gvm install go1.4 -B
$ gvm install go1.9 -B

# インストールできたことを確認
$ gvm list
gvm gos (installed)
   go1.4
   go1.9

# バージョンを指定して適用
$ gvm use go1.9

# 適用されたことを確認
$ go version
go1.9 darwin/amd64

とりあえずGoが使える状態になった。
インストールのところで「-B」をつけるとバイナリーをそのままインストールすることになるのだが、これつけないでインストールしようとしたらエラーが出たのでめんどくさくなってこの形としてしまった。。

以上です

labelクリックでinputにfocusする iOS対応

スマホで言えばこんなUIの入力フォーム。
この場合、画面の左半分がlabelで右半分がinput。

f:id:yoppy0066:20171020234919p:plain

で、気がきかないから気にしてなかったのだが、labelをタップしても入力できないということで親切でないということで修正しようとしたらちょっとはまったのでメモしておく。

Labelをクリックしたらinputにfocusさせる(失敗)

javascriptで無理やりやろうとした。PCやandroidで確認してたらうまくいったのだが、何故かiPhonesafariでうまくいかず断念。

Labelとinputを関連づける(成功)

labelとinputの関連づけってよくやってるけど何の意味があるのかと思っていたのだが。こういうことなんですね。。
ちなみにCSSの「cusor:pointer」はこれがないとiPhoneで動かないみたい。

HTML

<label for="nickname">ニックネーム</label>
<input type="text" id="nickname" />

CSS

label {
  cursor: pointer;
}

以上です

【ionic2】ログイン機能を実装する

はじめに

今回やりたかったのは、まぁ普通のログイン機能をもつアプリ。実装したい要件としては以下
・未ログインの場合は、ログイン画面を表示。
・ログイン済の場合は、他の画面が見れる。

実装方法としては以下のような形で行ってみた。
・ログイン済みかどうかはローカルストレージに保存して判定する。
・app.component.ts の platform.ready()でローカルストレージをチェック。
・ログイン済みの場合は他の画面を表示
・未ログインの場合はログイン画面を表示。ログインに成功したらローカルストレージに書き込んでindex.htmlをリロードする。リロードすることでplatform.ready()が再度呼ばれるので次はログインと判定されるはず。

実装

src/app/app.component.ts

・・・
import { Storage } from '@ionic/storage';
・・・
export class MyApp {

  rootPage:any;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, storage: Storage) {
    platform.ready().then(() => {

      statusBar.styleDefault();
      splashScreen.hide();

      storage.get('auth').then((val) => {
        if (val == null) {
          // 未ログインの場合はログイン画面を表示
          this.rootPage = 'signin';
        } else {
          // ログイン済みの場合はその他の画面を表示
          this.rootPage = 'home';
	}
      });
    });
  }
}

src/pages/signin/signin.ts

import { Storage } from '@ionic/storage';

・・・

export class SigninPage {

  ・・・

  // ログイン
  signin() {
    this.ApiService.get('/signin', {})
      .then(data => {
        // ログインに成功したらログイン情報をローカルストレージに保存して、リロード
        this.storage.set('auth', { token:data.token });                                                                                                                                                            
        location.reload();                                                                                                                                                                                         
      })
      .catch(messages => {
	alert(messages);
      });
  }

  /* ログアウトも手抜きここで書いちゃう */
  signout() {
    // ローカルストレージを削除してリロード
    this.storage.remove('auth');
    location.reload();
  }
}

なんか正当な方法じゃなさそうだけど、自分がやってるアプリだとこんなので十分事足りそう。以上です。

【ionic2】apiリクエストをproviderで共通処理化する

はじめに

今回やりたかったことは以下
APIのURLを開発と本番で切り替えられるようにしたい
・アプリ全体で認証トークンをhttpヘッダーに含めたい

これらを満たすAPIリクエストの共通処理実装したのでメモしておく。

APIのURLを開発と本番で切り替える

こちらのURLのとおりにやったらできた。
http://roblouie.com/article/296/ionic-2-environment-variables-the-best-way/

webpackの設定とかはURLのとおりにやればできる。あとは以下のように各々呼び出せるようになる。

import { Injectable, Inject } from '@angular/core';
import { EnvVariables } from '../app/environment-variables/environment-variables.token';

@Injectable()
export class ApiService {

  constructor(http: Http, @Inject(EnvVariables) public envVariables) {
  }

  test() {
    // this.envVariables.apiEndpoint
  }
}

今回は上の記事に書いてあるそのまんまつかわせてもらった。

src/app/environment-variables/development.ts

export const devVariables = {
  apiEndpoint: 'http://dev.example.com',
}

src/app/environment-variables/production.ts

export const prodVariables = {
  apiEndpoint: 'http://prod.example.com',
}
APIリクエストを共通化する

Angularではproviderとして作るのが一般的ぽいのでそのようにしてみる。

ひな形作成

$ ionic g provider api-service

実行すると src/providers/api-service.ts が生成されるのでここに実装する。
今回は認証用のトークンをローカルストレージに保存しておいて、リクエストのたびにhttpヘッダーにさしこむようにした。

src/providers/api-service.ts

import { Injectable, Inject } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

import { Storage } from '@ionic/storage';
import { EnvVariables } from '../app/environment-variables/environment-variables.token';

@Injectable()
export class ApiService {

  constructor(public http: Http, @Inject(EnvVariables) public envVariables,
              private storage: Storage) {
    /* コンストラクタ */
  }

  request(method, action, params) {
    return new Promise((resolve, reject) => {
      this.storage.get('auth.token')
        .then(token => {
          var url = this.envVariables.apiEndpoint + action;
          var http = null;
          var headers = { headers: new Headers({ 'Authorization': 'Token ' + token }) };
          if (method == 'get') {
            http = this.http.get(url, headers)
          } else if (method == 'post') {
            http = this.http.post(url, data, headers)
          }
          if (http !== null) {
            http.subscribe((response) => {
              if (response.status == 200) {
                var result = response.json();
                if (result.status == "success") {
                  resolve(result);
                } else {
                  reject(result.messages);
                }
              } else {
                reject('通信エラーが発生しました');
              }
            },err => {
              reject(err);
            });
          }
        });
    });
  }

  get(url, params) {
    return this.request('get', url, params);
  }

  post(url, data) {
    return this.request('post', url, params);
  }
}

これでコンポーネントから呼び出せる
src/pages/hello.js

import { ApiService } from '../../providers/api-service';

・・・

@Component({
  selector: 'page-hello',
  templateUrl: 'hello.html',
  providers: [ApiService]
})
export class SamplePage {
  constructor(public navCtrl: NavController, private ApiService: ApiService) {
  }

  test() {
    this.ApiService.get('/users/', {})
      .then(data => {
        // success
        console.log(data);
      })
      .catch(messages => {
        // error
        alert(messages);
      });
  }
}

以上です。

【rails】authenticate_with_http_token を使ってapiの認証機能を実装する

はじめに

今回やりたかったことはアプリからのリクエストを受け付けるapiの開発。やりたいことと流れは以下のようなイメージ

・Emailとパスワードでログインを行う
・ログインに成功したらトークンと有効期限を発行してクライアントに返す
・クライアントは毎リクエストークンをhttpヘッダーに入れてリクエストする

また、今回はrails5のapiモードを使用しました。

テーブル設計とか準備

・users

idユーザーid
emailメール
password_digestパスワード
tokenトーク
token_expireトークン有効期限

password_digestはrailsのhas_secure_passwordというのを使う場合にこのカラムが必要なようなので追加。has_secure_passwordはパスワード認証の仕組みを簡単に実装できる仕組みみたい。

とりあえずモデルとテーブルを作成する

$ ./bin/rails g model User

migrationファイルが生成されるのでカラムを追記する
db/migrate/20171009182615_create_users.rb

class CreateUsers < ActiveRecord::Migration[5.1]
  def change
    create_table :users do |t|

      t.string :email
      t.string :password_digest
      t.string :token
      t.datetime :token_expire

      t.timestamps
    end
  end
end

modelファイルも生成されるのでバリデーションを追加
app/models/user.rb

class User < ApplicationRecord

  VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i
  validates :email, presence: true, format: { with: VALID_EMAIL_REGEX }

  has_secure_password
  validates :password, presence: true, length: { minimum: 6 }

end

has_secure_passwordを使うためにbcryptというのが必要なのでGemfileに追記
Gemfile

gem 'bcrypt', '~> 3.1.7'

ここまでできたら以下を実行

$ ./bin/bundle install
$ ./bin/rails db:migrate

実装

あとはプログラムを実装していく。

config/routes.rb

Rails.application.routes.draw do
  post '/users/signup', to:'users#signup'
  post '/users/signin', to:'users#signin'
end

app/controller/users_controller.rb

# coding: utf-8                                                                                                                                                                                                    
class UsersController < ApplicationController

  ## authenticate_with_http_tokenを使うために
  include ActionController::HttpAuthentication::Token::ControllerMethods

  ## signinとsingup以外で認証処理を行う
  before_action :auth, except: [:signin, :signup]

  ## サインアップ
  def signup
    user = User.new(user_params)
    if user.save
      success
    else
      failed(user.errors.full_messages)
    end
  end

  ## サインイン
  def signin                                                                                                                                                                                                       
    ## 認証に成功したらランダム文字列でトークンを生成して有効期限1日をセット
    user = User.find_by(email: params[:email])
    if user && user.authenticate(params[:password])
      user.token = create_token
      user.token_expire = DateTime.now + 1
      if user.save!(:validate => false)
        success({ token: user.token })
      else
        error
      end
    else
      error('email または passwordが正しくありません')
    end
  end                                                                                                                                                                                                              

  ## レスポンス返却用の簡易メソッド                                                                                                                                                                                
  def success(data = nil)
    render json:{ status: 'success', result: data }
  end

  def error(messages = nil)
    render json:{ status: 'failed', messages: messages }
  end

  ## 以下 authenticate_with_http_token を使った処理 
  def auth                                                                                                                                                                                                         
    ## 認証に失敗したらエラーレスポンスを返す
    authenticate_token || render_unauthorized
  end

  ## httpヘッダーに入っているtokenでdbを検索して有効期限のチェック
  ## authenticate_with_http_tokenの書き方でこのように書くみたい
  def authenticate_token
    authenticate_with_http_token do |token, options|
      user = User.find_by(token: token)
      user && DateTime.now <= user.token_expire
    end
  end

  def render_unauthorized
    render json:{ result:'failed' }
  end

  ## ランダム文字列を作る
  def create_token
    return ((0..9).to_a + ("a".."z").to_a + ("A".."Z").to_a).sample(50).join
  end

  def user_params
    params.permit(:email, :password)
  end

end


確認はこんな感じで

$ curl -H 'Authorization: Token xxxxxxxxxxxxxxxxxxxxxxxxxx' http://localhost:3000/users


今回はトークンをDBに入れているけど、少し規模の大きいサービスだったらredisとかにもたせるのがよいのかな。
以上です。