概要
プログラムの勉強を始めて5か月ほどの開業医です。
今回Auth0を使ったユーザー認証を勉強したので、花粉症の重症度が分かるWEBアプリに実装してみました。
花粉症（アレルギー性鼻炎）の重症度はくしゃみ・鼻水・鼻づまりの程度で判定できるので、その診断アルゴリズムをプログラミングしています。
実装
Googleアカウントを使ったユーザー認証機能。
ボタンを選択すると鼻アレルギーの重症度が分かるWEBアプリ。
完成動画
花粉症重症度判定アプリ https://t.co/AJVM0C0RxH@YouTubeより
— 病気のセルフチェック (@Selfcheckhealt1) December 7, 2019
完成画像
作成方法
※完成動画ではGoogleアカウントだけでなく、LINEアカウントでのユーザー認証機能も実装していますが、今回の記事ではLINEアカウント認証の実装法の説明は省いております。
1. Auth0のアカウント作成・サインイン
こちらから行ってください。
Auth0ホームページ
2. 基礎プロジェクトの作成
ログインしダッシューボードのCREATE APPLICATIONを押します。
今回は名前はMy Selfcheck AppでSingle Page Web Applicationsを選択してCREATEを押します。
今回はJavaScriptを選択します。
DOWNLOAD SAMPLEをクリックします。
1.2. 3. の設定を、Application Settingsを行います。
SAVE CHANGED で設定反映を忘れないようにします。
3.ダウンロードと解凍
ダウンロードを押します。
ZIPファイルがダウンロードされるので、自分のプロジェクトフォルダに保存します。
ZIPファイルを解凍します。
4. 移動
フォルダを移動します。
cd vanillajs-01-login/01-login
npm start
このコマンドを実行します
http://localhost:3000/が起動します。
5. プログラム作成
サンプルのHTMLを以下のように書き換えました。
<!DOCTYPE html><htmlclass="h-100"><head><metacharset="UTF-8"/><title>SPA SDK Sample</title><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/><linkrel="stylesheet"type="text/css"href="/css/auth0-theme.min.css"/><linkrel="stylesheet"type="text/css"href="/css/main.css"/><linkrel="stylesheet"href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/monokai-sublime.min.css"/><linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.7.2/css/solid.css"integrity="sha384-r/k8YTFqmlOaqRkZuSiE9trsrDXkh07mRaoGBMoDcmA58OHILZPsk29i2BsFng1B"crossorigin="anonymous"/><linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.7.2/css/fontawesome.css"integrity="sha384-4aon80D8rXCGx9ayDt85LbyUHeMWd3UiBaWliBlJ53yzm9hqN21A+o1pqoyK04h+"crossorigin="anonymous"/><linkrel="stylesheet"href="https://cdn.auth0.com/js/auth0-samples-theme/1.0/css/auth0-theme.min.css"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></head><bodyclass="h-100"><divid="app"class="h-100 d-flex flex-column"><divclass="nav-container"><navclass="navbar navbar-expand-md navbar-light bg-light"><divclass="container"><!-- <div class="navbar-brand logo"></div> --><!-- ブランドロゴはこちら --><imgclass="mb-3 app-logo"src="https://self-check.net/wp-content/uploads/2019/05/Logo-e1557133216298.png"alt="self-check logo"width="150"/><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarNav"aria-controls="navbarNav"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarNav"><ulclass="navbar-nav mr-auto"><liclass="nav-item"><ahref="/"class="nav-link route-link">Home</a></li></ul><ulclass="navbar-nav d-none d-md-block"><!-- Login button: show if NOT authenticated --><liclass="nav-item auth-invisible"><buttonid="qsLoginBtn"onclick="login()"class="btn btn-primary btn-margin auth-invisible hidden">
Log in
</button></li><!-- / Login button --><!-- Fullsize dropdown: show if authenticated --><liclass="nav-item dropdown auth-visible hidden"><aclass="nav-link dropdown-toggle"href="#"id="profileDropDown"data-toggle="dropdown"><!-- Profile image should be set to the profile picture from the id token --><imgalt="Profile picture"class="nav-user-profile profile-image rounded-circle"width="50"/></a><divclass="dropdown-menu"><!-- Show the user's full name from the id token here --><divclass="dropdown-header nav-user-name user-name"></div><ahref="/profile"class="dropdown-item dropdown-profile route-link"><iclass="fas fa-user mr-3"></i> Profile
</a><ahref="#"class="dropdown-item"id="qsLogoutBtn"onclick="logout()"><iclass="fas fa-power-off mr-3"></i> Log out
</a></div></li><!-- /Fullsize dropdown --></ul><!-- Responsive login button: show if NOT authenticated --><ulclass="navbar-nav d-md-none auth-invisible"><buttonclass="btn btn-primary btn-block auth-invisible hidden"id="qsLoginBtn"onclick="login()">
Log in
</button></ul><!-- /Responsive login button --><!-- Responsive profile dropdown: show if authenticated --><ulclass="navbar-nav d-md-none auth-visible hidden justify-content-between"style="min-height: 125px"><liclass="nav-item"><spanclass="user-info"><!-- Profile image should be set to the profile picture from the id token --><imgalt="Profile picture"class="nav-user-profile d-inline-block profile-image rounded-circle mr-3"width="50"/><!-- Show the user's full name from the id token here --><h6class="d-inline-block nav-user-name user-name"></h6></span></li><li><iclass="fas fa-user mr-3"></i><ahref="/profile"class="route-link">Profile</a></li><li><iclass="fas fa-power-off mr-3"></i><ahref="#"id="qsLogoutBtn"onclick="logout()">Log out</a></li></ul></div></div></nav></div><divid="main-content"class="container mt-5 flex-grow-1"><divid="content-home"class="page"><divclass="text-center hero"><!-- ブランドロゴはこちら --><imgclass="mb-3 app-logo"src="https://self-check.net/wp-content/uploads/2019/05/Logo-e1557133216298.png"alt="self-check logo"width="300"/><divclass="container"><!-- https://materializecss.com/buttons.html --><h5>くしゃみは1日平均何回ですか？</h5><formaction="#"><p><label><inputclass="with-gap"name="group1"type="radio"value="4"checked/><span>21回以上</span></label></p><p><label><inputclass="with-gap"name="group1"type="radio"value="3"/><span>20～11回</span></label></p><p><label><inputclass="with-gap"name="group1"type="radio"value="2"/><span>10～6回</span></label></p><p><label><inputclass="with-gap"name="group1"type="radio"value="1"/><span>5～1回</span></label></p><p><label><inputclass="with-gap"name="group1"type="radio"value="0"/><span>0回</span></label></p></form><h5>鼻をかむのは1日平均何回ですか？</h5><formaction="#"><p><label><inputclass="with-gap"name="group2"type="radio"value="4"checked/><span>22回以上</span></label></p><p><label><inputclass="with-gap"name="group2"type="radio"value="3"/><span>20～11回</span></label></p><p><label><inputclass="with-gap"name="group2"type="radio"value="2"/><span>10～6回</span></label></p><p><label><inputclass="with-gap"name="group2"type="radio"value="1"/><span>5～1回</span></label></p><p><label><inputclass="with-gap"name="group2"type="radio"value="0"/><span>0回</span></label></p></form><h5>鼻づまりはどの程度ですか？</h5><formaction="#"><p><label><inputclass="with-gap"name="group3"type="radio"value="4"checked/><span>1日中完全につまっている</span></label></p><p><label><inputclass="with-gap"name="group3"type="radio"value="3"/><span>鼻づまりが非常に強く、口呼吸が1日の内かなりの時間あり</span></label></p><p><label><inputclass="with-gap"name="group3"type="radio"value="2"/><span>鼻閉が強く、口呼吸が1日のうち、ときどきあり</span></label></p><p><label><inputclass="with-gap"name="group3"type="radio"value="1"/><span>口呼吸は全くないが鼻閉あり</span></label></p><p><label><inputclass="with-gap"name="group3"type="radio"value="0"/><span>鼻閉なし</span></label></p></form><divid="evaluation"></div><buttontype="button">鼻アレルギーの重症度を判定</button></div><divclass="next-steps"><h5class="my-5 text-center">自分に合ったアレルギー薬を選びましょう</h5><divclass="row"><divclass="col-md-5 mb-4"><h6class="mb-3"><ahref="https://auth0.com/docs/connections"><iclass="fas fa-link"></i>花粉飛散情報はこちら
</a></h6><!-- <p>
リンク先の説明文
</p> --></div><divclass="col-md"></div><divclass="col-md-5 mb-4"><h6class="mb-3"><ahref="https://auth0.com/docs/multifactor-authentication"><iclass="fas fa-link"></i>アレルギーのお役立ち情報はこちら
</a></h6><p><!-- <p>
リンク先の説明文
</p> --></p></div></div><divclass="row"><divclass="col-md-5 mb-4"><h6class="mb-3"><ahref="https://auth0.com/docs/anomaly-detection"><iclass="fas fa-link"></i>市販の医薬品はこちら
</a></h6><p><!-- <p>
リンク先の説明文
</p> --></p></div><divclass="col-md"></div><divclass="col-md-5 mb-4"><h6class="mb-3"><ahref="https://auth0.com/docs/rules"><iclass="fas fa-link"></i>花粉症カレンダーはこちら
</a></h6><p><!-- <p>
リンク先の説明文
</p> --></p></div></div></div></div><divclass="page"id="content-profile"><divclass="container"><divclass="row align-items-center profile-header"><divclass="col-md-2"><imgalt="User's profile picture"class="rounded-circle img-fluid profile-image mb-3 mb-md-0"/></div><divclass="col-md"><h2class="user-name"></h2><pclass="lead text-muted user-email"></p></div></div><divclass="row"><preclass="rounded"><codeid="profile-data"class="json"></code></pre></div></div></div></div><footerclass="bg-light text-center p-5"><!-- ブランドロゴはこちら --><!-- <div class="logo"></div> --><imgclass="mb-3 app-logo"src="https://self-check.net/wp-content/uploads/2019/07/9ad0bd5a51dadd4d06039943c511517d.jpg"alt="self-check logo"width="150"/><p>© katsuyukidoi 2019
</p><!-- <p>
//画像を入れるならこちら
<a href="">画像説明</a>
</p> --></footer></div><script>alert("鼻アレルギーの重症度を判定しましょう！");letseverity="";$("#judgment").click(function(){score1=$('input[name="group1"]:checked').val();score2=$('input[name="group2"]:checked').val();score3=$('input[name="group3"]:checked').val();if(score1=='4'||score2=='4'||score3=='4'){severity="最重症";}elseif(score1=='3'||score2=='3'||score3=='3'){severity="重症";}elseif(score1=='2'||score2=='2'||score3=='2'){severity="中等症";}elseif(score1=='1'||score2=='1'||score3=='1'){severity="軽症";}else{severity="無症状"}$("#evaluation").html(`<h5>あなたの鼻アレルギーの重症度：${severity}</h5>`);});</script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script><script src="js/auth0-theme.min.js"></script><script src="https://cdn.auth0.com/js/auth0-spa-js/1.2/auth0-spa-js.production.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script><script src="js/ui.js"></script><script src="js/app.js"></script></body></html>考察
Auth0はユーザー認証に必要な複雑な手順の多くを代わりにやってくれますので、今回数時間でユーザー認証機能が付いたWEBアプリを作成するとができました。
ユーザー認証があるだけでちゃんとしたアプリ感が出ると思います。
今後はユーザー情報を利用した機能を追加していきたいと思いました。