##JavaScriptでAuth0 を使った個人認証ログインサイトの作成
今週はauth0を使ってサイトを作ってみたいと思います。
##参考資料
[【資料１】超初心者がAuth０でログイン機能を実装した]
(https://qiita.com/marumaruchan/items/552cc7b679c06bc66d53)
[【資料2】Bootstrap 4 Buttons]
(https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp)
Bootstrapでのボタンの作り方を調べた
##環境
Node.js v10.16.3
Windows 10 pro
Visual Studio Code v1.39.1
##準備
Auth0のサイトにアクセス。
サインインからアカウントを作成します。
【資料１】を参考に初期設定を入力し、出来たフォルダをダウンロードし、解凍します。
解凍前のフォルダは一応置いておくと後から失敗してもやり直せるセーブデータのようですので
大事においておきましょう。
##VC起動
解凍したフォルダをVCで開き、その中にある vanillajs-01-login/01-login へ移動します。
①
cd vanillajs-01-login/01-login
動必要なライブラリは既にpackage-look.json内にデータがあるので、ターミナルに入力し、一気にインストール。
②
npm i
package.jsonの中にショートカットキーでstartが設定されているのでこちらを使用
③
npm start
良きです。
##index.html
<!DOCTYPE html>
<html class="h-100">
<head>
<meta charset="UTF-8" />
<title>SPA SDK Sample</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/css/auth0-theme.min.css" />
<link rel="stylesheet" type="text/css" href="/css/main.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/monokai-sublime.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/solid.css"
integrity="sha384-r/k8YTFqmlOaqRkZuSiE9trsrDXkh07mRaoGBMoDcmA58OHILZPsk29i2BsFng1B" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/fontawesome.css"
integrity="sha384-4aon80D8rXCGx9ayDt85LbyUHeMWd3UiBaWliBlJ53yzm9hqN21A+o1pqoyK04h+" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.auth0.com/js/auth0-samples-theme/1.0/css/auth0-theme.min.css" />
</head>
<body class="h-100">
<div id="app" class="h-100 d-flex flex-column">
<div class="nav-container">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container">
<div class="navbar-brand logo"></div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="/" class="nav-link route-link">Home</a>
</li>
</ul>
<ul class="navbar-nav d-none d-md-block">
<!-- Login button: show if NOT authenticated -->
<li class="nav-item auth-invisible">
<button id="qsLoginBtn" onclick="login()" class="btn btn-primary btn-margin auth-invisible hidden">
Log in
</button>
</li>
<!-- / Login button -->
<!-- Fullsize dropdown: show if authenticated -->
<li class="nav-item dropdown auth-visible hidden">
<a class="nav-link dropdown-toggle" href="#" id="profileDropDown" data-toggle="dropdown">
<!-- Profile image should be set to the profile picture from the id token -->
<img alt="Profile picture" class="nav-user-profile profile-image rounded-circle" width="50" />
</a>
<div class="dropdown-menu">
<!-- Show the user's full name from the id token here -->
<div class="dropdown-header nav-user-name user-name"></div>
<a href="/profile" class="dropdown-item dropdown-profile route-link">
<i class="fas fa-user mr-3"></i> Profile
</a>
<a href="#" class="dropdown-item" id="qsLogoutBtn" onclick="logout()">
<i class="fas fa-power-off mr-3"></i> Log out
</a>
</div>
</li>
<!-- /Fullsize dropdown -->
</ul>
<!-- Responsive login button: show if NOT authenticated -->
<ul class="navbar-nav d-md-none auth-invisible">
<button class="btn btn-primary btn-block auth-invisible hidden" id="qsLoginBtn" onclick="login()">
Log in
</button>
</ul>
<!-- /ログインボタンの応答有 -->
<!-- Responsive profile dropdown: show if authenticated -->
<ul class="navbar-nav d-md-none auth-visible hidden justify-content-between" style="min-height: 125px">
<li class="nav-item">
<span class="user-info">
<!-- Profile image should be set to the profile picture from the id token -->
<img alt="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 -->
<h6 class="d-inline-block nav-user-name user-name"></h6>
</span>
</li>
<li>
<i class="fas fa-user mr-3"></i>
<a href="/profile" class="route-link">Profile</a>
</li>
<li>
<i class="fas fa-power-off mr-3"></i>
<a href="#" id="qsLogoutBtn" onclick="logout()">Log out</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div id="main-content" class="container mt-5 flex-grow-1">
<div id="content-home" class="page">
<div class="text-center hero">
<img class="mb-3 app-logo"
src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
alt="JavaScript logo"/>
<h1 class="mb-4">furniture</h1>
<p class="lead">
</div>
<div class="next-steps auth-visible hidden"> <!-- div class= auth-visible hidden で非表示 -->
<h2 class="my-5 text-center">あなたの好きな家具は?</h2>
<div class="row">
<div class="col-md-5 mb-4">
<img src="http://.jpg"
width="200"
height="200"/>
<h6 class="mb-3">
<p>イームズ サイドシェルチェア
</p>
<button type="button" onclick="myFunction1()"class="btn btn-info">解説</button>
<p><div id="demo" onclick="myFunction1();"></div></h6></p>
</div>
<div class="col-md"></div>
<div class="col-md-5 mb-4 ">
<img src="http://.jpg"
width="200"
height="200"/>
<h6 class="mb-3">
<p>ハンス・J・ウェグナー ザ・チェアペーパーコード <br>
【PP-503PC】
</p>
<button type="button" onclick="myFunction2()"class="btn btn-info">解説</button>
<p><div id="demo2" onclick="myFunction2();"></div></h6></p>
</div>
</div>
</div>
</div>
<div class="page" id="content-profile">
<div class="container">
<div class="row align-items-center profile-header">
<div class="col-md-2">
<img alt="User's profile picture" class="rounded-circle img-fluid profile-image mb-3 mb-md-0" />
</div>
<div class="col-md">
<h2 class="user-name"></h2>
<p class="lead text-muted user-email"></p>
</div>
</div>
<div class="row">
<pre class="rounded">
<code id="profile-data" class="json"></code></pre>
</div>
</div>
</div>
</div>
<footer class="bg-light text-center p-5">
<div class="logo"></div>
<p>
project provided by
<a href="https://auth0.com">SAYUMI</a>
</p>
</footer>
</div>
<script>
function myFunction1() {
document.getElementById("demo").innerHTML = 'ミッドセンチュリーを代表する Charles&Ray Eames（チャールズ＆レイ・イームズ）の代表作DSRチェア。';
}
</script>
<script>
function myFunction2() {
document.getElementById("demo2").innerHTML = " デンマークの巨匠デザイナー、ハンス・J・ウェグナー。代表作とも言えるのが、この「ザ・チェア」です。";
}
</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>
##完成
【ログイン後】
コピペなので隠しちゃいましたが、解説ボタンを押すと解説が表示されるようになりました！！
今回は同じサイト内で、ログインの有無を条件に非表示と表示のコードを書き分けて作成しました。
ありがとうございました！！