今日のつちや

田舎から元気に技術ネタと雑記を投稿します

「Auth0」で作る! 認証付きシングルページアプリケーション という本を書きました

タイトルの通り Auth0 と SPAの本を書きました。

https://amzn.to/2LN2Y6K

Auth0とは

Auth0 は 認証・ID管理を開発者に提供するクラウド認証プラットフォームです。 シンプルでアプリケーションに簡単に組み込めます。

WebTaskと呼ばれる、AWS Lambdaのようなサーバーレスなコード実行の仕組みを独自で持っていて、 JavaScriptなどでルールを記述することによって、名寄せなどの仕組みを簡単に実現できます。

Never Compromise on Identity. - Auth0

なぜこの本を書こうと思ったか

この本は、技術書典4で出版した同人誌の、商業版です。

blog.corocn.jp

プライベートでもアプリを書いたりするのですが、 認証の仕組みって意外と面倒だけど本来のビジネスロジックに関係ないんで、 ささっと実装して本当に実装したい部分に注力したいはず。でもセキュリティ怖いから適当できない。

例えばRailsにはDeviseやSorceryという認証系のライブラリがあるのですが、 もっとかっこよくスマートにログインさせたいという気持ちで、それを解決してくれる仕組みを探していました。

Firebase や AWS Cognito も試してみたのですが、一番シンプルで簡単でしっくりきたのがAuth0でした。 特に Cognito は難しい。Cognitoで何ヶ月も検討してダメだったけど、Auth0なら数日で実現できたという話も聞いてます。

認証関連の情報って少ない

認証の話ってセキュリティに直結するところなので、実装の話を企業はなかなか公開しません。 さらにSPAとなると、フロントエンドとバックエンドが明確に分離しているので、さっと試すのもなかなか大変です。

本書はAuth0 のタイトルが全面に出てしまっていますが、JWTを使った基本的な認証の仕組みを学ぶことが大きなテーマでもあります。 実際に手元で動かして、試してみてください。基本知識を身につけることで、 Auth0を使わない認証にも応用できるはずです。

むすび

そんなこんなで、勢いで同人誌を出したのですが、意外な反響があって、2018/08/31 に商業版として出版することができました。 この場を借りて皆様に感謝申し上げます。

大筋は一緒ですが、書き足りないなと思っているところを加筆していったら、ほぼ倍のページ数になりました。 ぜひお手にとっていただけると嬉しいです。

「Auth0」で作る!認証付きシングルページアプリケーション | 電子書籍とプリントオンデマンド(POD) | NextPublishing(ネクストパブリッシング)


以下、Twitterの声を引用させていただきました。

結婚した。そして30歳になる。

@corocn です。

結婚しました。

出会いは某大手マッチングアプリのOでした。 最近は割と一般的みたいです。周りにもたくさんいる。

相手はエンジニアでは無いけれど、自分の仕事観を良く理解してくれている人なので嬉しい限り。 ヒィヒィ言いながら技術書典4の執筆してた時期も、めっちゃ応援してくれました。

所属する会社の働きやすさがピカイチなので、一緒にいる時間が十分取れています。

f:id:corocn:20180813214408p:plain:w300

会社のesaのトップにはこう書いてあるんですよ。最高じゃないですか? 未来永劫今の会社で働いているか分からないけど、家族を大事にする働き方は変えないぞという固い決意をしています。

なお挙式はしませんでした。その分家具家電に全力投資して一緒にいる時間を増やしています。 食洗機、ドラム式洗濯機、ルンバあたり本当に便利。生活の質が爆上がりしてます。

そして、

明日には30歳になるんですよ。

グッバイ20代。まだ28歳ぐらいの感覚だったんですが、なんとまあはやいことで。

今まではフロントからインフラまで雑にやってたんですが、そろそろ技術的な強みがほしい。 院卒後キャリアチェンジしてるので、同世代に比べたらとてもとてもビハインドしている実感。

エンジニアリング的なところだと、ユーザーに価値を届け続けるために、 変化に強くて攻めの開発ができるインフラや開発基盤を構築していきたいんだ!という気持ちです。

組織づくり的なところだと、最近はエンジニア採用が楽しいので引き続きやっていきます。 自分の書くリクルーティングDMが各所で話題になっているようなので嬉しい限りです。

引き続きよろしくお願いいたします。

最後にいつものアレです→ http://amzn.asia/i5mOrlx

IntelliJ 組み込みterminalでfish-shellを使う

shellをfishに置き換えたのは良いが、IntelliJの組み込みTerminalで動かなかったので直した。

stackoverflow.com

IntelliJのapp内にもconfig.fishがあってそっちを読んでるのが問題っぽい。 stackoverflow見るとfunctionsの読み込み処理追加しろよ〜って記述があるんだけど、追記しても不安定なので

You could also just replace that whole fish directory in IntelliJ's plugins/terminal with a symlink to your normal fish config directory, usually .config/fish/.

これに沿ってsymlinkで置き換えたほうが良かった

osx + IntelliJ Ultimate の場合

cd /Applications/IntelliJ\ IDEA.app/Contents/plugins/terminal/
mv fish bak.fish
ln -s ~/.config/fish fish

以上

Amazon S3へのセキュアなファイルアップロード方法まとめ

連休はAWSでセキュアにサーバーレスする方法勉強するぞー!と思い、 手始めにセキュアにS3へファイルをアップロードする方法を整理したかったのでまとめた。 サーバーレスとそうでない場合の比較である。

次の3種類を紹介する。

  1. アプリケーションサーバー経由
  2. アプリケーションサーバー + 署名付きURL
  3. サーバーレス(API Gateway + カスタムオーソライザ)

1. アプリケーションサーバ経由

f:id:corocn:20180428215902p:plain

非常に一般的な方法。画像には分かりやすさのためにRailsを載せているが、 RailsでなくてLaravelでもDjangoでも同様だしそもそもフレームワークを使わなくても良い。

認証はセッション認証やトークン認証をアプリケーションサーバで解決し、 サーバーが保有するS3のアクセスキーを使ってアップロードを行う。 アクセスキーはユーザーには露出していない。シンプル。

2. アプリケーションサーバー + 署名付きURL

f:id:corocn:20180428220354p:plain

署名付きURLは、S3へ期限付きでアップロードやダウンロードを可能にする仕組み。 S3だけでなくてGoogle Cloud StorageやAzure Storageにも同様の機能は存在するようだ。

署名付き URL を使用したオブジェクトのアップロード - Amazon Simple Storage Service

1.同様に認証はアプリケーションサーバで解決した上で、アップロード要求に対して、署名付きURLを返す。 クライアントは署名付きURLに対してファイルをアップロードする。

この方法の利点は、ファイルが直接S3に投げ込まれるため、アプリケーションサーバー側での負荷が減る。 フロー見ると分かるけど、そこまで複雑な仕組みではないはず。

Rails 5.2で導入されたActiveStorageのDirect Uploadsがこの仕組みを採用している。 Active Storage Overview — Ruby on Rails Guides

3. サーバーレス(API Gateway + Custom Authorizer)

f:id:corocn:20180428221400p:plain

API Gatewayにはカスタムオーソライザーという機能が存在し、APIに認証機能を組み込むことができる。 カスタムオーソライザーの中で、CognitoやAuth0のような外部IdP(Identity Provider)から発行されたTokenの検証を行えば良い。 カスタムオーソライザーって言ってるけど実態はLambda Functionなので、サービスロジックの前段でLambdaでTokenの検証を行うような感じ。

API Gatewayの認証さえ潜り抜けてしまえば、後はLambdaを経由してS3に保存するなり、S3プロキシとして直接アップロードするなりなんでもできる。 また、これはファイルのアップロードに限定する話ではなく、API Gatewayを使う場合の一般的な認証の仕組み・・のはず。

その他

API Gateway + Lambdaで署名付きURLを発行する方法を思いついたが、 署名付きURLを発行するAPIに対する認証を考慮すると、回りくどいし先ほど紹介した3でいいのでは?という気持ちになった。 この方法をやろうとしている人を見かけるけど、何か利点があるんだろうか?良くわからない。

感想

図だけ見るとサーバーレスが過度に複雑のように見えるが、 認証の仕組みがAWSに寄ってるだけで、基本を理解すればそう難しくないと思った。 (モノリシックフレームワークの認証機能をそのまま使うのは、それはそれで楽なんだけど)

AWS強い人間違ってたら指摘下さい!

by @corocn

技術書典4へ応募して完売するまでの軌跡

技術書典4 お疲れ様でした! 初めてサークル出展して、ありがたいことに完売御礼することができたので、その軌跡を思い出しながら書こうと思います。

f:id:corocn:20180424002536j:plain

実は当日はアイコンと同じ服だったんですよ。

TL;DR

  • Auth0の本を書いたよ
  • アウトプットのために書いたよ
  • 出版に関する知識がなかったけどなんとかなったよ
  • Re:VIEWで書いたよ
  • 価格設定に一番悩んだよ
  • ちゃんと宣伝したら被チェック数が245まで到達したよ
  • 完売したよ
  • BOOTHで電子版を販売しているよ
  • 自分の今を書くのだ

どんな本を書いたか

IDaaS(Identity as a Service)の Auth0 (オースゼロ)で遊ぶ本を書きました。

techbookfest.org

Auth0はWebアプリケーションに認証機能を組み込みたいけど難しい・・・を解決してくれるサービスです。 もともとアプリケーションの認証・認可周りを素早く実装することに興味があって、 Firebase AuthenticationだとかAWS Cognito, AWS Amplifyあたりを試してウゴウゴしていたときに、このサービスに出会いました。 認証機能を組み込んだアプリをフロントからバックエンドまで一貫して作るような情報が少かったり、 そもそもAuth0自体の日本語の情報も少ない状態だったので、せっかくだし本にしようと思って書きました。

技術書典に出そうと思ったきっかけ

  • 同人活動に興味があった。
  • 会社の同僚が技術書典3に参加していて、とても楽しそうだった
  • 素振りを繰り返して、結果をまとめるのに良いタイミングだった。

あたりが大きな理由です。

Misocaという会社に勤めているのですが、 社内から技術書典3は2サークル、技術書典4では4サークルの出展がありました。 田舎.fmでもちょっと話題になってましたね。 みんなそれぞれのサークルで、好きな本を書いて出しています。

本として書く目的

とにかくアウトプットが目的で書きました。 実際、落ちたらどっかのサークルに拾ってもらおうと思って、当選発表前から執筆を初めています。

アウトプットが目的ならブログでもいいんじゃないの?って話は実際あるんですけど、 前述したきっかけに加えて「同人誌として出す」ドキドキ感を味わいたかったのです。

また、岐阜のド田舎に住んでいるので、 東京でアウトプットするという機会を捻出したかったというのもあります。 なぜ東京か?と問われるとリアルで話を聞いてツッコミを入れてくれるエンジニアの多さでしょうかね。 実際にイベントを終えてみて、物理本を手渡しできる人の多さというのは、大きなモチベーションアップに繋がりました。

東京では連日沢山の勉強会が開催されていますが、5分のLTをするのに新幹線を使って平日片道4時間は正直辛いので、 壮大(?)なアウトプットの方法としての同人誌は良い手段でした。

このあたりは地方で働くエンジニアの苦しいところでしょうか。 技術で解決していきたい問題でもあります。

出版に関する知識はなかった

今回サークル初参加でしたが、応募時点で出版、DTPの知識が皆無でした。 卒論と修論LaTeXで書いた程度です。

そこで助けになったのがいわゆるワンストップ本でした。 この本にはノウハウが詰まってます。次回技術書典に出展したいと思ってる人は、とりあえずこれを読みましょう。 「技術同人誌を書く本」であって「技術書典のための本」ではないのは注意です。同人イベントはコミケとかもありますんで。

感想は以前にもブログで書きました。この記事を書いたのは当選発表前ですね。 技術書典4で同人誌を出すために「ワンストップ!技術同人誌を作ろう」を読んだ(良かった) - 今日のつちや

スケジュール感

当初、印刷所の締め切りから逆算しようとしていたんですが、 締切がある程度近づかないと分からないので諦めました。 直接搬入で5日前ぐらいまでに入稿すればOKそうだという感覚は掴んでいます。

実は自宅が携帯が圏外のド田舎なので、出版所から電話連絡が来ても出れない恐怖を抱えていまして、 いろいろ調べたんですがそんな情報どこにも無いんですよ(ここで問い合わせないところにコミュ力の低さを感じる)。 印刷所からの連絡は電話です(実際そうでしたし、外出中で良かった)。 電話取れないと怖いので、出来る限り前倒しで進めて、不測の事態に備えました。実際不測でしかなかったし。

実際の執筆作業ですが、次のようなスケジュール感で行いました。 最終的にねこのしっぽさんで印刷しました。

  • 1月頭:応募開始。応募してワンストップ本読んで書き始める。
  • 2月頭:当選発表。当選確定したので、イラストの依頼をした。
  • 2月末:自分の中でのざっくり書き終わりの締め切りだったが終わってない。
  • 3月中旬:ざっくり書き終わった。終わりが見えて安堵。名刺作ったことないので先に名刺を作って不安要素を潰しておいた。
  • 3月末:推敲が終わってレビューをお願いするなど。サークルカット用の画像だけ先に貰って、サークル情報を埋める。
  • 4/1:サークル情報の公開が始まる。
  • 4/8:表紙が完成。
  • 4/11:早期入稿完了。ダウンロードカードの制作を始める。
  • 4/18:通常入稿締切だがとくに何もしていない。本当に印刷されるかソワソワした結果問い合わせを投げる。
  • 4/19:キンコーズでおしながきを作る
  • 4/22:技術書典4当日 🎉

60ページ程度の本でしたが、執筆に4ヶ月弱かかりました。 とにかく言えることは前倒しで執筆しろです。まあそれができたら苦労はしないんですが・・・。

どうやって書いたか

執筆環境としてはRe:VIEWを使いました。レイアウトにこだわってないので実際楽でした。(次回はこだわりたい。) レイアウトでTeXが必要そうな場合は、ワンストップ本のソースコードを参考に書いてました。

内容ですが、私の場合はアプリ作成のハンズオン的な要素が強い本だったので、 メモを残しつつ一通りコードを書いてから、ガッと本文を書きました。 コードを書いてる最中に(あとでここに図を入れる)的なメモを残して、画像は後から。

最初にまえがきを書いたのですが、書いてるうちに無限に書きたいことが増えて、 後で全て書き直すことになりますのでやめたほうが良いです。

価格設定

実際一番悩んだところです。 考慮すべきことが非常に多かった。

  • 当日のオペレーションを楽にするために500円か1000円で頒布したい。
  • 60ページ100部を500円で頒布すると印刷費用でトントン。
  • 刷れば刷るほど1冊あたりの費用は下がるが、爆死が怖いので100部程度の数にしたい。
  • そもそも500円で頒布すると新幹線代で赤字になってしまう。
  • もっと価格をあげるにしても、オペレーションを考えると1000円になる。気持ち高い。
  • 後に電子書籍版を500円で販売予定だったので、物理本を500円で頒布するのが微妙。

最終的に物理本にダウンロードカードを付けて1000円で頒布しました。商品はセットのみです。 自分の中では物理本800円、DL版500円として、両方セットで1000円ぐらいの感覚でした。

セットにして商品を1点にしたのは初参加で当日オペレーションをとにかく楽にしたかったからです。実際楽でした。

終わってからちゃんと計算したんですが、 イラスト費や売り子さんへの報酬、岐阜からの交通費・宿泊費、名刺等の雑費などなどを計算したらギリギリでした。 赤字覚悟で初めたんですが、黒字だと執筆自体続けやすいので、大変ありがたいです。

購入していただいた方には頭があがりません。本当にありがとうございます。

宣伝戦略と被チェック数

当日必要なものを作る度に、宣伝も兼ねてツイートしてました。 露骨に宣伝しまくるのも嫌だったので、だいたい1週間に1回程度で、次のタイミングで行いました。

  • サークル情報ページの公開後
  • ダウンロードカード作成時
  • おしながき作成時
  • 開催直前

被チェック数の推移はこんな感じでした。 早期入稿時に50だったのでx3で150部印刷しましたが、最終的な被チェック数は245でした

f:id:corocn:20180424024228p:plain

毎日データ取ってません。過去のツイッターの発言から分かる日だけ引っ張り出して、間は適当に補間した結果ですが、 前日にぐんぐん伸びて当日もぐんぐん伸びました。

全然数足りなくて、売り切れちゃってごめんなさいってずっと言ってました。

完売したよ

2時間で物理本150部、完売しました。 ありがとうございました。

つらかったこと

地方に住んでいるともくもく執筆会や宣伝LTイベントに参加できないのが歯がゆい感じでした。 その分Twitterでの拡散を頑張りましたが。 あとは新幹線往復交通費はやっぱり手痛いですね。

やっておくべきこと

名刺を作りましょう。 私は調子に乗ってシール名刺を作って遊んでましたが、そんなに凝らなくていいと思います。 アイコンとプロフィールだけでもシンプルで十分サマになります。

リハーサルしましょう。 リハーサルというのは、当日のブースを模して売り子の真似事を行うことです。 実際配置してみると分かるのですが、めっちゃ狭いのが分かります。

当日はポスターやら名刺やらそもそも頒布する本を机の上に置いたので、この限りではなかったのですが、 狭さを実感できたのは良かったです。

宣伝しよう。 本を執筆したり、名刺やおしながきを作るのも技術書典の活動の一部(後日譚書くまでが技術書典だよ!的な)ですし、 その活動をアウトプットするのは大きな宣伝になります。ちゃんと宣伝すればみんな見てくれます。宣伝をするのです。

良かったこと・嬉しかったこと

アンバサダーになった

私は Auth0 という日本であまり知られてないニッチなサービスに関する本を書いたのですが、 Auth0の中の人の目にとまり、本家公認のアンバサダーということで活動できることになりました。 あまりの変化で目が回っていますが、めっちゃうれしいですね。頑張ってやっていきます。

繋がりが増えた

技術書典の執筆活動中にお世話になった人がたくさんいて、 同じサークル出展者の人の間と繋がりが持てたので良かったです。 みんなで「書くぞ!」って言ってるのは励みになりました。 Twitterのフォロワーもめっちゃ増えたし。

経験値が増えた

自分の中の知識を体系立ててまとめて発信できる力が養われたと思います。 あと本を書いて売るということハードルが下がりました。 DTPの知識一切なかった半年前比べたら大きな進捗です。

今後

技術書典5に当選できるか分かりませんが、既にネタを数個考えています。

BOOTH

遠方の方で技術書典に行けないから是非電子書籍で売って欲しいとの声がありました。 さっそくBOOTHにて販売をしてますので、どうぞお買い求め下さい。

booth.pm

最後に言いたいこと

本当に自分の本出して大丈夫なんだろうか?という不安で書いていましたが、 結城氏のTwitterでの発言にだいぶ元気付けられました。

携帯の電波が来てなくたって技術書典で自分の本が出せる世の中です。みんなも怖がらずどしどし書くのだ。

技術書典4のフロントエンド関連の本

宣伝も兼ねてまとめてみました。

フロントエンド本は入り口右側の「お」「か」のエリアに集まっているようです。

f:id:corocn:20180407204022p:plain

私自身は、お-06 ころころぶっくす で「Auth0でつくる認証付きSPA」という本を頒布します。近隣の皆様よろしくお願いいたします。

f:id:corocn:20180407202910p:plain:w200

どんな本が頒布される予定なの?

頒布内容が不明なサークルは載せませんでした。 本のタイトルが不明なサークルは、カッコ付きにしています。 一番気になってるのはpotato4dさんのNUXT TECH BOOKです。

お02 IE11以上対応できもちよく書くCSS 吉川雅彦

お03 (hyperappとウェブフォントの本らしい) 犬テトラ+

お06 Auth0でつくる! 認証付SPA ころころぶっくす

か17 jQueryであと10年戦うための本 カウプラン機関極東支部

か18 形態素解析器kuromoji.jsで遊ぶ、他JS本が何点か るてんのお部屋

か19 テストで作ろう初めてのAzureアプリ(JSでTDDする本らしい) Fluorite

か20 (現代WEBフロントエンドデザインパターン愛宕文庫

か21 わかる仮想dom ukyoweb

か22 Libraries of React 底なし沼の魔女

か23 現場で使えるVue.js tips集 ねこの手@福岡

か24 (Nuxt.jsでWebアプリ) 楽描帳

か25 VuetifyでもっとわかるVue(仮) ぴよ10

か26 (フロントエンドの環境構築) Monochrome

か27 NUXT TECH BOOK 帝都研究所

か30 CSS Stylus あいさつチンパン!

抜けあったらすいません

技術書典4で「Auth0でつくる認証付きSPA」本を頒布します

こんにちは、@corocn です。

技術書典4の公式でもサークルチェックができるようになったので、改めて告知いたします。

弊サークル「ころころぶっくす」は "Auth0"でつくる認証付きSPA本を頒布します。 techbookfest.org

場所は お06です。入口入ってすぐ右側の壁。Wantedly執筆部さんの隣です。

f:id:corocn:20180401230910p:plain

これは何の本ですか?

  • Auth0っていう認証サービスを使って
  • SPAにログインフォームを組み込んで
  • Googleアカウントでログインして
  • 発行されたトークンでセキュアなAPIサーバーにアクセスする

までを実装してみる本です。 フロントからサーバーサイドまで触るのでちょっと大変かもしれませんが、 とても簡単に組み込めることを体験してください。

Auth0って?

クラウド認証プラットフォームです。

Single Sign On & Token Based Authentication - Auth0

面倒な認証やユーザーを管理してくれます。 OpenID Connectに対応し、JSON Web Token(JWT)を用いた認証の仕組みを提供してくれます。

フロントエンドは何で書くの?

SPA、フロントエンドのアーキテクチャの1つですね。 今回はSPAの作り方を解説する本ではないので、 そのへんをすっ飛ばすためにNuxt.jsを使います。

Nuxt.js - ユニバーサル Vue.js アプリケーション

めっちゃ便利なんでオススメ。 Auth0本だ!と言いながら、Nuxt.jsの良さも伝えたかったよくばりおじさんです。

他サークルでもNuxt本が出てるはずなので要チェック。私も買いに行く。

バックエンドは何で書くの?

サーバーレスが流行っている今日このごろですが、 本書ではRuby on RailsAPIモードを使います。 認証と聞くとDeviseやSorceryを思い浮かべる方も多いと思いますが、今回は使いません。 KnockってGem使います。DBがシンプルになります。最高。

nsarno/knock: Seamless JWT authentication for Rails API

まとめ

ぜひブースに立ち寄ってください! 初参加でどれだけ刷ればいいかも分かってないので、 購入予定の方はサークルチェックして頂けると助かります!