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

      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 token authを使ってAPIを作る記事を書いたのですが、
結構反応がよかったのでついでにAngularを使ってUIも作ってみようかと思います!

Angularを使って見るためにも、まずは簡単なデータを返すことができる様に追加していきます

scaffolding

以下のコードを実行します

今回はjsonを出力するためにjbuilderを使用するのでhobbies_controller.rbは以下の様に修正します

次はrails c でデータを作ります

データを作成後下記リンクにアクセスすると

この様なjsonデータがレンダリングされています!

ここにdeviseと同じく制限をかけてみます

先ほどと同じ様にアクセスすると

ログインエラーが返ってきます

postmanを使って試して見る

ログインして返ってきた情報

  • access-token
  • client
  • uid

以下のリンクにGETリクエストをすることで

ログイン制限をかけることができます!

rack corsの問題を回避

最後にですが、Angularに進む方はこの対策をしておいてください
rack corsを回避しないとリクエストが弾かれるという状況に陥ってしまうので、
今のうちに対処しときます

詳しい情報はネットにたくさん転がっていると思うので、一度調べておくと今後のためにもなると思います

Angularではログイン機能全般を実装した上で、Hobbyを取得できるところまで進めていく予定です

次の記事
devise token auth api をAngular4 でUIを実装する1 ( angularのセットアップ )

 - Angular, node.js, Rails, typescript , , , , , , , ,