devise token auth を使って簡単に早くAPIを作る 1

      2017/08/25

※ちょくちょくGithubで公開してもらえませんか?的なことを聞かれるので、Bitbuckeのアカウントでコードを公開いたしました。ミスなどがあったらすみません。時間があるときに直します。
devise-token-auth 完成物のリンク

関連記事
全て連続しているので上から順に進めていっていただけるとわかりやすいと思います!
devise token auth を使って簡単に早くAPIを作る1( api作成 ) 今回はここ!
devise token auth を使って簡単に早くAPIを作る2 ( jsonの出力 )
devise token auth api をAngular4 でUIを実装する1 ( angularのセットアップ )
devise token auth api をAngular4 でUIを実装する2 ( ログインを繋げる )
devise token auth api をAngular4 でUIを実装する3 ( 新規登録 )
devise token auth api をAngular4 でUIを実装する4 ( ログインしやすくする)

通常はdeviseでログイン機能を構築することが多いと思いますが、
devise token auth を使用すると、トークンベースで認証が可能となるので、
iOSやアンドロイドアプリを作りたいといった場合に結構重宝しています

複数回に分けて簡単にトークン認証を構築してから、
最後はアクセス制限を使用してみたいと思います!

ベースを作る

まずはrails new します

次にGemfileをいじります

次はbundle installします
ついでにデータベースも作っておきます

devise token auth

devise token auth をインストールします

コマンドを走らせるとマイグレーションファイルが生成されるので、それを編集します
今回は、ユーザーが新規に登録する際に、

  • 企業名
  • メールアドレス
  • 名前

を入力してもらえるようにカラムを追加しておきます

twitterやfacebookでログインする機能は今回は触れないのでコメントします
メールを送信して登録する、といった機能もつけることはしないので、
モデルは以下のように編集してください

次にカラムを追加するために、devise token authのマイグレーションファイルを修正します

さて次はマイグレーションを走らせます
ルートも確認しておきます

このままだとデフォルトのコントローラーが使用されてしまうので、オーバーライドして、

  • :company(企業名)

を登録できるように修正します

controllersディレクトリに api ディレクトリを作成して、さらにauthディレクトリの中にregistrations_controllerを作成します

内容は以下のようにします

ルートを修正して、デフォルトのコントローラーではなく、継承したコントローラーを使えるようにします

rake routesして、 api/auth/registrations# **** が使われていたらOKです!

これで、一応は完成です!

initializeの設定

デフォルトだと、毎回トークンを変更しないと認証しないように設定されていますので、lifespanを1ヶ月有効にします

postmanを使って、試してみる

postmanはjsonベースでルートやコントローラーのレスポンスを確認できる便利なツールです

Postman

登録できるか確認する

localhost:3000/api/auth に以下の内容でPOSTします

content-typeでapplication/jsonを指定しないとエラーが出てしまうので、指定します

エラーなどが起きなければこんな感じで返ってきます

ログイン

ログインは
localhost:3000/api/auth/sign_inにPOSTします
ログインもcontent-typeを指定してやります

ちなみに、ログインして返ってくる情報がとても重要なのでそれは後述します

responseのheaderの確認( ログインして返って来る情報 )
deviseなどの認証をするとなると、ほとんどの場合がログイン制限をかけたい、コンテンツを制限したいといった理由で使用する事が多いと思います

ログインして返ってきた

この3つをheaderに追加してリクエストする事でdeviseと同じように制限をかけたりパスワードの変更等に使用できます

headersの部分を見ると詳しい内容を確認できます↓

パスワードの変更

パスワードの変更方法は、ログインして返ってきたこの3つをheaderに付与することで可能になります
※それぞれの値が異なりますが、ログインするたびに変わるものなので気にしないでください

localhost:3000/api/auth/password に PUTします
送信する値は新しいパスワードと確認用の新しいパスワードです

問題なく変更されれば、以下の様なレスポンスが返ってきます

ユーザー情報の変更

ユーザー情報もパスワードの変更と同じで、headerにログインした際に発行された情報を付与します

名前や企業名などを
localhost:3000/api/auth に PUTして変更します

うまくいってればこんな感じになってると思います!

パスワードを忘れた際の変更処理

Webサービスを利用していると、パスワードを忘れてしまったりすることがありますがdevise token authはとても簡単に実装することができます

変更するための処理は localhost:3000/api/auth/password に postします
※メール送信の設定をしていないとこの機能は使えないので、まずはメールを送信することができる様にしてから進んでください

上記をPOSTすると登録してあるアドレスにメールが送信されるので、受信したメールの中に記載されているリンクをクリックします

すると、 redirect_url のパラメーターで指定したリンクに飛ばされ、リンクにパスワード変更に必要である

  • access-token
  • client
  • uid

が付与されています

※ここから先はパスワード変更と全く同じです!。パスワードをリセットするためにはaccess-token、client、uidの3つが必要ですが、パスワードを忘れてしまってはどうしようもありません。なので、ユーザーが登録した情報(email)と同じデータがあればそのemailにredirect_urlを付与して送信することでユーザーは情報を変更するために必要な3つのデータが生成され再び修正できるようになる、というロジックです。ただ、セキュリティなどを考えると、emailだけではちょっと甘い感じがするので「秘密の質問」や「親の旧姓」といった項目をパスしたらemailを飛ばすといったクッションを入れてやるとなおいいですね

 

リンクから得られる情報を使ってパスワードを変更してみます

これで無事に変更できます!

発展編

以下の記事が発展編です
今回devise token authで作ったAPIをAngular4で繋げる準備をします!
devise token auth を使って簡単に早くAPIを作る 2

 - Rails , , , ,