Blazor+Identity

MYSELF •松井 敏 A.K.A 森理 麟 BELONG CODEER •MY COMMUNITY : C#読書会 2

マンガ読んだ!!の紹介 •「マンガ読んだ!!」はクリックするだけで簡単に読ん だマンガを記録できるサービス 作者やシリーズ全部でまとめて1回で登録も簡単！ マンガは集英社、講談社、小学館などから 9万冊 以上！毎日自動更新で、日々増加中！！ • • 3

• https://manga-yonda.com/

「マンガ読んだ!! 」の紹介 •クイズ番組見てたら、マンガ1万冊読んだという人が出てきた。 え？僕、それ以上余裕で読んでいると思った。普通ならその 証明は出来ないけれど、このサイトなら証明できる！ •あと単純に他の人が読んだ1万冊の内容とか知ってみたい なーと。最終的には僕がそのクイズに出れば良いのか 4

• https://manga-yonda.com/

アジェンダ •BLAZOR •IDENTITY •BLAZOR × IDENTITY 5

アジェンダ •BLAZOR •IDENTITY •BLAZOR × IDENTITY 6

BLAZORの特徴 •BLAZORはC#のSPAフレームワーク •WEB ASSEMBLYによりC#でクライアントが書ける •現世代ブラウザなら動く。つまりスマホでも動く •ASSEMBLYだが、速度面のアドバンテージはない 7

BLAZOR •知っている人が少なかったら簡易DEMOる 8

BLAZORの結論 •C#で作れる！ 9

BLAZOR •クライアントでJSを書かなくて良い、つまりクライア ントでもVS+.NET+C#環境で書ける •使い慣れた言語だけでなくライブラリ、開発環境の パフォーマンスがそのまま引き出せる！ 既存のコードもアルゴリズムはそのまま使える • 10

BLAZOR •JSをVSで書くことも可能だが、VSのポテンシャ ルが半分もだせない感じ •依存関係などJSならでは問題も多い。もちろん 使わなければ避けられる。 11

BLAZOR •ま、実際、BLAZORでもバージョンとか困ることも ある。これは実験的プロジェクトなのでしょうが ない。それでもクライアントでJSを使うよりもマシ な印象。 12

BLAZOR(SPA)の利点 •SPAフレームワークなので、COMPONETが使える •オブジェクト指向的にパーツを組み合わせてク ライアントが作れるので、使いまわしがきく 13

BLAZOR •アルゴリズムはSHAREDで共有化できる。 •つまりクライアントからサーバまで全て同じ言語で 開発出来る サーバーで書いたC#と同じ定義をクライアントJSで 再度書くスイッチングコストがZERO • 14

BLAZORの弱点 •CSHTMLはCSで書くことに比べるとパフォーマンスが落ちる （ASP.NET CORE 3 PREVIEW 5からCSHTML→RAZORに変更。使い やすくは…なってない） •クライアントサイドでバリバリ書けないので、なるべく定義は 共有側に流れていく。これは正しい実装に近づいているよう に感じる 15

まとめ •BLAZORはC#のSPAフレームワーク •サーバーからクライアントまで全て使い慣れた VS+.NET+C#で作れてスイッチングコストがない！ •作ったものが現世代ブラウザでちゃんと動く！ 16

アジェンダ •BLAZOR •IDENTITY •BLAZOR × IDENTITY 17

認証 •認証って大事です。よね？ 18

認証 •サイトを作って、その中でユーザーの情報を表 示したい場合、認証は必須 •作ったサイトを育てていく場合、ユーザー情報 の表示は、かなり重要。例えば履歴とか。 19

認証 •認証で扱う情報は個人情報。つまりセキュリティも 重要。もし漏洩したらそれこそ金銭問題にまでつな がる •例えばパスワード一つとっても、そのまま持つべき ではない。漏洩対策としてハッシュに変換してもつ 20

認証 •大事だけどぶっちゃけ、エンジニアとしては手 間はかけたくない •最低限、登録とログイン画面だけあれば、よく ね？と思わないでもない気がする今日この頃 21

認証の結論 •認証を自分で作るならフレームワークを使う！ 22

ASP.NET IDENTITY •マンガ読んだ!!は最初、ASP.NET MVCで作成 •ASP.NET MVCはASP.NET IDENTITYがある！ 23

• https://manga-yonda.com/

ASP.NET IDENTITY •DEMO 24

ASP.NET IDENTITY •さて、登録とログインだけあれば良いと言った けれど、VIEWを見てみるとパッとみ結構ファイ ルが一杯ある 25

ASP.NET IDENTITY •でも、実際使ってみると、これでもわりとミニマム。 •パスワード忘れ、パスワード忘れの確認、パスワー ドリセット、パスワードリセット確認、Eメール確認、 外部認証、2段階認証など使用していくなら必須の ものばかり 26

ASP.NET IDENTITY • わりと重要なのがメール。メール機能は認証ではパスワード忘れにも使える。 • 登録時に、メルアドにURLを送って、そのURLをクリックして認証完了させるし くみもASP.NET IDENTITYにある。 • この仕組みは、ユーザーには一手間だが、生きているメールだけに限定出 来るし、いたずらに沢山作られる対策にもなる • 1個だけ残念だったのが、「メールを投げました。確認ください」という画面が ない。 ASP.NET IDENTITYで唯一自分で追加で作った 27

ASP.NET IDENTITY •あと認証に関して言えばやっぱりSNS認証には 対応したい。パスワード打たなくて良いのは魅 力。 •これもASP.NET IDENTITYがやってくれる 28

ASP.NET IDENTITYの弱点 •僕が以前作った時はVS2017だったが、機械翻 訳であってもちゃんと日本語リソースがあった。 •VS2019で作った場合は日本語リソースがない。 これはキツイ。。 29

まとめ •認証は大事 •認証はフレームワークを使う！ •ASP.NET MVCはわりと手軽 •VS2019からは日本語リソースがなくなった。。 30

アジェンダ •BLAZOR •IDENTITY •BLAZOR × IDENTITY 31

BLAZORの認証の作り方 •BLAZORのサーバーサイドはASP.NET CORE MVCの WEB API ASP.NET CORE MVCにもASP.NET CORE IDENTITY がある IDENTITYの結果をWEB APIに渡してBLAZORで書いて やればよい • • 32

MERIT 33

ASP.NET CORE IDENTITY •ASP.NET IDENTITY → ASP.NET CORE IDENTITY •MSDNに細かく書いてある。最近のMSDNは何と か読めるレベルの変な日本語の記事が増えた •まあ、読めなくはない 34

ASP.NET CORE IDENTITY •基本的にはCOREで作って、以前の設定に合わせる部分を合 わせるだけ。実際STARTUP.CSをいじるぐらいしかしてない？例 えばデフォルトだとパスワードに記号が入るので、それをや めるとか •あとDBのカラムの増減があるのでそれを対応すれば動く 35

ASP.NET CORE IDENTITY •COREはバージョンがポイント。ASP.NET CORE 2.0 の場合、 ASP.NET IDENTITYとASP.NET CORE IDENTITYに大差ない •2.1以降は大差ある 36

ASP.NET CORE IDENTITY •2.1でプロジェクト作ると面食らう •IEDNTITYのソースが全部なくなっている •でも動いている。 37

ASP.NET CORE IDENTITY 38

ASP.NET CORE IDENTITY •ただ、デフォルトでやっていくのは、特に日本で はほぼ無理 •だって画面全部英語だし。リソース分かれてな いので、作るしか選択肢ない気が 39

BLAZOR ASP.NET CORE •ローカライズ対応。ASP.NET COREは一応ヘル パー的な仕組みがある •あるが、やっぱり面倒。結局リソース用意しな いと駄目。まあ頑張ってやった 40

ASP.NET CORE IDENTITY •CONTROLLERとVIEWも大幅に変わった。 •全てCSHTMLの中でCSのロジックが書けるように なった 新規に作るなら2.1以降の方が良いが、移植となる と2.0で作った方が良いかも • 41

BLAZOR認証 •BLAZORはVS2017ではASP.NET CORE2.1、VS2019では ASP.NET CORE 3.0でしか作れなかった。 2.2は少なくとも非対応。で、 ASP.NET CORE 2.1 BLAZORに認証画面を乗せようとす るとタグヘルパーがうまく動いてくれなかった • • 42

BLAZOR ASP.NET CORE •BLAZORのASP.NET CORE 3.0で作ったBLAZORのプロジェクト とASP.NET CORE 2.0 MVCで作った認証ありのプロジェクト を切り貼りして構築した感じ。 •因みにちゃんと追ってないけど、ASP.NET CORE 2.1の認証 を持ってくるのは何度かやったがうまくいかなかった 43

BLAZOR ASP.NET CORE Blazor/Identity 2.0 2.1 2.2 3.0 2.0 × × × × ←Blazorが非対応 2.1 × × × × ←Blazorタグヘルパーが動かない 2.2 × × × × ←Blazorが非対応 3.0 ○ × × × →AddIdentity指定しているとBlazorの画面に行かない 44

BLAZOR認証 •結果、自分はASP.NET CORE 3.0で作ったBLAZORのプロ ジェクトとASP.NET CORE 2.0 MVCで作った認証ありのプロ ジェクトを切り貼りして構築した感じ。 •因みにちゃんと追ってないけど、ASP.NET CORE 2.1の認証 を持ってくるのは何度かやったがうまくいかなかった 45

ASP.NET CORE 3.0 •.NET CORE 3.0は今日現在まだPREVIEWがついている •今回動かすのにこのバージョンしかないという必然性があっ たので使った •PREVIEWを使うのは何かと面倒。おすすめはしない。正式版 まで待てるなら待った方が良いと思う •例えばエラー自体も洗練されてなく時間がかかることもある 46

ASP.NET CORE 3.0 •でも進化はとても感じる。実際2.1から使っている身としては安 定してきているのは凄く感じる •でもPREVIEW4で拡張子まで変わるとか、結構ドラスティックに 変わる •PREVIEW6入れたらコンパイル通らず、色々見れなかったので アンインストールしたら、それ以降結構おかしい。。。。 47

BLAZOR認証 •BLAZOR側にも対応が必要 •ASP.NET WEBAPIでログイン情報を取得できるように •複数画面で共有して値を使いたい場合は CASCADINGVALUEを使う 48

BLAZOR認証 •BLAZORの画面遷移で普通に作るとサーバー側 のURLパラメータを打っても画面遷移してくれな い 49

BLAZOR認証 THANKS TO JSAKAMOTO •AタグのTARGETに_TOPと打てば画面遷移してくれる。 • <A CLASS="NAV-LINK" HREF="ACCOUNT/LOGIN" TARGET="_TOP">ログイン</A> 50

まとめ •BLAZORで認証を乗せたかったらASP.NET CORE IDENTITYを使う ASP.NET CORE 2.0 IDENTITY + ASP.NET CORE 3.O BLAZOR の組み合わせだけ動作実績あり BLAZOR側でも幾つか対応が必要 • • 51

最後に •WEB開発にはBLAZORを使ってC#で書こう! •認証にはフレームワークを使おう! •マンガの記録にはマンガ読んだ!!を使おう!! •マンガの記録にはマンガ読んだ!!を使おう!! 52

• https://manga-yonda.com/