見てはいけない黒歴史 in -The Rong's Caravan-
日記ログ コメント
About
黒歴史をリアルタイムで見られる貴重なサイト。
人間観察の悦びをあなたに・・・・・・

というのは冗談で、ただの趣味のサイトです。


管理人:ろんぐ
Since:2005/2/14
update:2019/07/23 「API認証がわからないので、処理を追ってみる#1」
update:2019/07/23 「API認証がわからないので、処理を追ってみる#1」
§Infomation§


「やりたいことをやるための継続可能な副業」としての

宅飲みカクテルデータベース

開発中。

ただいまデータ入力中!

あ、語感良くなりそうなので正式名称に「宅飲み」とつけてみました。でも宅飲み要素はあんまない笑


<予定>
未定:しばらくはデータを揃えることを考えます。

§Comment§
名前の非掲載


§Diary§
2019.7.23
API認証がわからないので、処理を追ってみる#1

新しいシステムの開発に必要不可欠だと僕が思っているもののひとつにSPAというのがあります。シングルページアプリケーションです。
twitterの新しいGUIがわかりやすい例ですかね。画面のすべてをjavascriptで構成し、1つのページで完結させるっていうモダンなフロントエンド技術のことです。
もっと具体的にいうと、画面遷移してないけどURLはきちんと変わってるやつ、あれはSPAによるものです。

メリットとしては、ページ(全体)の読み込みなどが発生しないので画面遷移がスムーズであること、そしてスマホアプリ対応も非常にラク(らしい)というのが大きなメリットです。
もちろんデメリットとしては読み込むページのサイズが大きくなるので最初の表示が遅くなること、SEO的にはちょっと微妙なラインだったりするらしいこと、あと当たり前ですけど開発の工数が増えるということですね。

ただ、それを補ってあまりあるメリットのある技術ですので導入しない手はないわけです。
僕が開発する予定のORGSM(仮)でも、slackのようなチャットモジュールを導入する予定でして(使ったことないけど)、そのあたりでは大きな効力を発揮することが予想されます。
それに、javascriptベースにすることでPush.jsを用いてブラウザにプッシュ通知を搭載することも容易になるはず、という大きなメリットもあります。

必須かっていわれたら必須ではない技術ですが、先々のことも考えるとやっぱり導入したい技術だし、僕自身も技術的に一皮むけてさらに自由にアプリケーションを作れるようにならなくては、ということで久しぶりに新規技術のお勉強をしたいなと思ったわけです。





で、その具体的な実装がこの前ちょこちょこっと書いたVue.jsだったりReact.jsの話だったりするんですが・・・・・・
試しに動かしてみてすごい感動したんですけど、未だにクリアできていない課題があります。認証がわからない。



いろいろ調べてみてAPI認証っていうのが使えるらしく、LaravelにもPassportっていうライブラリがあるみたいで、それを使えばOAuth認証が実装できるらしい・・・・・・んですが、マニュアルを呼んでも正直あまりよく理解できませんでした・・・・・・。
で、その原因は僕がAPI認証に関して根本的な理解をしようとする気がなかったことに由来します。



さすがにゼロ知識ベースではムリだなと判断したので、API認証の仕組みについて調べて、この日記に書き残したいと思います。



もちろんAPI認証っていってもいろんな種類があるのですがこのページを読み解いてみるのが良さそうな気がします。





まず、必要な情報はこんな感じらしい。こいつをaxiosとかいうライブラリを使ってAjax通信させてやりとりするとトークンが手に入るらしい。
このシークレットキーっていうのが・・・・・・




たぶんこいつのことです。




実際に生み出されたものがこんなふうにDBに格納されているのを観測しました。
ユーザーごとにリダイレクト先を変えられるのがPassportの実装なんですかね、へえー。




で、ユーザーテーブルの名前とパスワードを送信すればいいのね。
このパスワードは平文じゃなく、userテーブルの、っていうことはこの暗号化したパスワードを送ればよさそうかなって思ったんですがそうでもないみたい(後述)。

これをpostするとアクセストークンが取得できるらしい。




で、これを読み解きましょう。


on:click=Loginとか書いてますので、これをクリックするとmethods内のLogin()メソッドが呼び出されるのが想像できますね。わかりやすい。
ここで変数としてパスワード方式であることを示すgrant_type、client_idは2を指定するらしい。ここがちょっと怪しいですね。パスワードモードであることを示すidではなさそう。




DBを見たところ、このpassword_clientがtrueになってるので、このユーザーを指定するための"2"なんだと予想します。
パーソナルアクセストークンってなんや???って思ったんですけど、ここを見る限りサポートを切って良さそうですね。つねに0を指定したいところ。




さっき貼ったリンク先ではこうなってます。こちらはハードコーディングで指定しているものですね。
ユーザーネームとパスワードは平文で良さそう。つまりここを盗聴されないようにってことですね。まぁ変なアドオンがなかったら盗聴はされないはずですけど・・・・・・。




再掲ですが、こちらの実装の場合はthis.usernameから直接プロパティの値を持ってこれるみたいですね。v-modelってのはなんか関係あるんですかね?まぁここはそんなハマらなさそうなにおいがするので後でnuxt勉強する時に考えれば良さそうです。

で、このpostDateオブジェクトをコンソールに吐き出してます。あれ、nuxtの記法ってセミコロン要らないんですか??へえ・・・・・・。

それで、axios.postを実行します。URLはoauth/token固定みたい。Passport::routes()で定義しているんだと思います。




このページにも載ってましたが、こんな感じのレスポンスが返ってくるそうです。参考するサイトがコロコロ変わりますね(笑)


このアクセストークンをheaderに入れることで、middleware('auth:api')のガードを通過できるようになるみたいです。




ここ、ぱっと見ちょっとよくわからないですね・・・・・・。ラムダ式ですねきっと。
responseを引数として、headersという変数に、返ってきたデータのアクセストークンにぶちこんでます。
で、axiosのheaders.commonのAuthorizationとかいうのにぶちこんでるんですが、たぶんここが常時参照されるグローバル変数っぽい気がします。
ところでheaders.Authorizationってなんでしょう??アクセストークンって実体はオブジェクトなのかな???Authorizationなんていうフィールドなんかあったか???


あ、よく見たらgetHeadersって関数を呼び出してたみたいですね。ここでthisとか言えてるってことは、どこでthisって言ってもこのビューファイルを指すことになりそうですね。
受け取ったトークンに"Bearer "っていう文字列を付与してAuthrizationという連想配列に入れてるみたいですね。拡張性のためでしょうな。とりあえずこれで動きが見えました。


このコードだけだとこの先どうしたらいいのか想像ができないので、参照するページを変えましょう。





ほーーーんなるほどなぁ~~。とりあえず認証の方法はわかったんですが、いまいち使い方がよくわかりませんね。





うーん。APIの使い方としては、とりあえずヘッダーにトークンをくっつけで送信すれば、認証情報が返ってくるので、それをもとに処理をする・・・・・・って流れになるんでしょうか。
認証情報がOKだったらコントローラーに行って、適切な処理を施して必要なデータだけ返す、っていう使い方はできないんですかね・・・・・・?
あーでもauth:apiミドルウェアを指定してるだけだし、コントローラーに処理がうつるのでこれは標準で搭載されているテスト用の関数、ってだけでもっと別の動作ができるのかな???
それができれば勝ったも同然っぽい感じがする。




調べてもよくわからなさそうなので、実装したほうが早そう。やるか。




APIの実装に関してまとめると、IDとパスワードをサーバーに送信し、合致していればシークレットトークンを返却、そのトークンをヘッダーに埋め込むことでログイン状態、ということにする感じかな?
認証情報を常に保持しているっていうのはセキュリティ的にもヘンですからね。
技術背景について調べてみるとこういうエントリを見つけたんですが、おおよそ僕の理解と合ってたっぽいですね。

ただ、この認証方式は自社のスマホアプリなど、APIを利用するクライアントの提供元が自社であることが確実に証明できる場合と書かれています。まぁログイン情報を入力させるわけですからね。




こういう問題が起きうるわけですね。つまり、僕がこういう認証方式を外部に公開した時点で、emailとpasswordの組み合わせを知られてしまうといとも簡単にこっちのサーバーの情報が抜き取られてしまう、そういう理解でオッケーですかね???




僕のプロダクトで触れることはあんまりなさそう、とは思うのですがAPIを外部に公開する際はこのような実装方式にしましょうね~~っていう。
仕組みは簡単ですね。トークンだけを渡して、それをもとにアクセスしてもらいましょ、と。
アクセストークン・リフレッシュトークンの使い方や動きなども以降の文章を読んで理解しました。とりあえずAPI認証のメカニズムはそんな感じらしいですね。はいはい。


ということで、勉強にかんしてはこれで区切りをつけ、いつになるかわかりませんが、次回実装編ということで成果発表会します(笑)

2019.7.22
コーヒー淹れるのにハマってしまった話



じゃーーーーーーーん。照明買いました(笑)


テーブルに香水と観葉植物(人工)を置くようになったんですが、そのときに思いついたアイデアです。
おしゃれでしょう!!!東京インテリアで買いました~笑


インテリアってちょっとこだわると楽しいですね。
べつにこれは誰かにぼくちんオシャレアピールしてるわけじゃなくて、単に視覚的に癒やされると作業能率が上がる(気がする)っていうだけです。


なんとなーーくですが、体調が悪くなければわざわざ喫茶店とか行かなくても家でプログラミングしてもいいかなと最近は思えるようになったのも、こういうインテリアのおかげだったりします。もちろん、コーヒーを常飲するようになったというのもあるんですけどね。


そう、コーヒー。写真にありますとおり最近こんなふうにコーヒーを淹れるのにハマっております笑
コーヒーメーカー自体はむかしに買ったんですが、完全に腐ってましてね(笑)
で、引っ越したこの機会に使ってみると、とてもよいもので。

使わなくなった理由の第一位が清掃がめんどくさいからなんですけど、コーヒーかすをゴミ箱に捨てるようにすると思ったよりゴミが出ないってことに気づきましてね。


すると、ものすごい速度でコーヒーを飲むようになりました(笑)
とはいえ、あまりにもハマりすぎてカフェイン中毒が心配になってきたので、明後日の記事でさらにオシャレなものを導入したいと思います。(笑)



うまくいったら動画にする予定ですが、動画投稿再開は少なくとも来月になる予定です・・・・・・。(笑)

2019.7.21
小型のジャンピングスターター!?

ぼく、以前にバッテリーが上がってJAFを呼ぶことになった話したじゃないですか。
もう二度と同じ過ちを繰り返せないため、リールキーホルダーを導入して対策はしたんですが、皆さんご存知の通りバッテリー上がりってのは唐突に訪れるものです。
ぼくもむかしバッテリー交換をしたことがありましてバッテリー交換をしたことがありまして、その時は経年劣化でしたね。


で、バッテリーが完全に死亡したらJAFを呼べばいい話なんですが、ご存知の通りJAFってたっかいんすわ笑
バイクの場合はキックで始動できたりするんですが、例えば車なんかだと不可能ですね。バッテリーの寿命っていつ来るかわかりませんしね。
特に僕はガソリンスタンドで勤務してるからわかるんですが、エンジンを切ったときにバッテリーが上がり(というか起電力が足らなくなり)始動できなくなって立ち往生する、ということがよくあります。営業終了してるのにゴネて来るので○んで欲しい客のひとつです
僕のアドレスがそうなんですけど、電圧降下が起こったら警告出してくるんじゃないんですかね・・・・・・?そろそろやばいな、、、って兆候は出ると思うんですけど(笑)


ただ、起電力が足りなくなるだけで、エンジンさえ始動させてしまえば車のほうで発電できるので、始動さえできればエンジンを切るまでは一応動かすことはできるんですよね。
そういう時に使うのがジャンプスターターっていいます。


とりあえずこいつがあればもし急にバッテリーが上がっても応急処置はできますね!ということで常備してても良いのかも知れません。
ふつうは12Vのものを選べば使えるみたいですね。うちのアドレスも12Vです。トラックとかだと24Vっていうパターンもあるらしい。


調べればいくらでもでてくるんですが、僕がわざわざ記事にしようと思ったのは小型のジャンプスターターがあるというのが調べててわかったので、この日記にメモ書きして残しておこうかなと思った次第です(笑)
バッテリーあがりなんて車とか持ってる以上はつねにつきまとう存在ですし、非常用に一個ぐらい持っておきたいところですね。僕が車を買うことがあれば常備はすると思います。
バイクの場合は完全放電さえしなければキックがありますし、入れるスペースも限られてるし別にいいかなとは正直思うんですけどね・・・・・・。



調べてみたら、バッテリーという特性上モバイルバッテリーとしての用途も兼ねられていることが多く、大概の製品にはUSBポートが付属しているみたいですね。
これで車自体にポートがなくても充電が可能っちゃ可能、って感じになりますね。そこまで必要かっていわれたら微妙なんですけど・・・・・・


で、僕が思うのはコンセント出力も兼ね揃えたモバイルバッテリーとしてのジャンプスターターというのがあれば使ってみたいなあと思うのであります。
AC出力に関してはそれがあるだけでだいぶ優位点なので。というか、モバイルバッテリーなんて誰だってすでにもってるしそんな複数要るものでもないのでジャンプスターターで代用するメリットは正直ないと思います。
ただ、コンセント出力があれば、ノーパソの非常用電源として役立ちそうではあります。


ということで探してみたんですけど、あんまりいいやつがない・・・・・・笑
僕が持ってるOmarsのポータブル電源が転用できればいいんですけどね・・・・・・(笑)
ってか、コンセントにぶっ刺してジャンプスターターにできるアダプタって売ってないんですかね???セットになってるのは見かけたんですけどアダプタ単体で売ってるのが見つからない・・・・・・。僕の探し方が悪いのか・・・・・・?



だったら、普通のスマホ充電用のモバイルバッテリーをこのジャンプスターターに持ち替えた方がよさそうだなぁ・・・・・・って調べながら思いました(笑)
この記事まじで意味ない記事になっちゃった笑 まぁ探してみたっていう事実が大事なので・・・・・・(笑)



>>もっと読みたい


Contents
日記
過去ログです。
旅行レポートなどもこちらに置いています。

音楽素材
RPGツクール向けの音楽素材です。
現在の素材数は187曲です。

Ptutor
プログラミング対面指導サービス

Fashion研究学Note
地雷を踏まないファッション研究学。低予算でディスられないファッションを目指します。

Instagram
カクテルの「ちょっとふざけたレビュー」。
写真素材
旅行中、無駄に撮った写真を素材として並べています。
現在2600枚ほど。
そのうち更新します。

Products
カクテルデータベース
古今東西のカクテルと、その評価をデータベースにしちゃいました(笑)
現在の登録数 ⇒

Commnication
旧BBS
一応残しておきます。

Other

Author
twitterも気軽にフォローミー!おすすめはしない!笑
↓創作用アカウント(笑)