Embedded Files
お試しください
登録ユーザーID：「user1」「user2」「user3」
パスワード：abc
作成方法 ①
パスワードを平文でコードに記述するためソースを見ればパスワードはわかります
下記コード①をGoogleサイトに埋め込むだけです
コード ①（パスワードのハッシュ化なし---平文パスワード）
<form name="myform" onsubmit="return Check(event)">
<input class="ipw" type="text" name="uid" placeholder="ユーザーID" required>
<input class="ipw" type="password" name="pwd" placeholder="パスワード" required>
<input class="btn" type="submit" value="Login">
<!-- メッセージ表示 -->
<div id="message"></div>
</form>
<style>
.ipw {
display: block;
margin: 0 auto;
width: 180px;
height: 30px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.btn {
display: block;
margin: 0 auto;
width: 180px;
height: 30px;
font-size: 14px;
}
/* メッセージ用 */
#message {
text-align: center;
font-size: 12px;
color: red;
margin-top: 5px;
min-height: 18px;
}
</style>
<script>
const validIDs = ["user1", "user2", "user3"]; // ユーザーID登録（数に制限はありません）
// 平文パスワード（厳重に隠す必要なし、という前提）
const PASSWORD_PLAIN = "abc"; // パスワードを入力
function Check(event) {
event.preventDefault();
const id = document.myform.uid.value.trim();
const pw = document.myform.pwd.value;
const msgBox = document.getElementById("message");
if (!validIDs.includes(id)) {
msgBox.textContent = "ユーザーIDが違います";
return false;
}
// ここで平文の比較をする
if (pw !== PASSWORD_PLAIN) {
msgBox.textContent = "パスワードが違います";
return false;
}
// 成功したらフォーム submit で遷移
msgBox.textContent = "";
document.myform.action = "https://sites.google.com/view/********/" + pw; // あなたのURL
document.myform.submit();
}
</script>
作成方法 ②
パスワードをSHA256でハッシュ化しているため、ソースからパスワードが知られることはありません
ただし、もともと遊び用途としてのパスワード認証ですので、ハッシュ化する意味がどれほどあるのかは疑問です
ハッシュ化のやり方
お使いのOSがLinuxまたはMacの場合
ターミナルで次を打つだけです：
echo -n "abc" | sha256sum（abcはハッシュ化したいパスワード）
赤枠内のハッシュ化したパスワードをコピー
それ以外のOSの場合
キーボードのF12キー ➡ Console
Console の下部にある入力欄（> が表示されている場所）に以下のコードを貼り ➡ Enterキー
async function sha256(message) {
const msgBuffer = new TextEncoder().encode(message);
const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
const hashArray = Array.from(new Uint8Array(hashBuffer));
const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
return hashHex;
}
続けて、入力欄（> が表示されている場所）に、以下のコードに希望のパスワード（例はabc） を入れて貼り ➡ Enterキー
sha256("abc").then(console.log);
赤枠内のハッシュ化したパスワードをコピー
下記コードのハッシュ化したパスワードに貼り付け（入力済みのパスワードと入れ替え）
コードをGoogleサイトに埋め込み
以上終了です
コード ②（パスワードをハッシュ化）
<form name="myform" onsubmit="return Check(event)">
<input class="ipw" type="text" name="uid" placeholder="ユーザーID" required>
<input class="ipw" type="password" name="pwd" placeholder="パスワード" required>
<input class="btn" type="submit" value="Login">
<!-- メッセージ表示 -->
<div id="message"></div>
</form>
<style>
.ipw {
display: block;
margin: 0 auto;
width: 180px;
height: 30px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.btn {
display: block;
margin: 0 auto;
width: 180px;
height: 30px;
font-size: 14px;
}
/* メッセージ用 */
#message {
text-align: center;
font-size: 12px;
color: red;
margin-top: 5px;
min-height: 18px;
}
</style>
<script>
const validIDs = ["user1", "user2", "user3"]; // ユーザーID登録（数に制限はありません）
const PASSWORD_HASH = "ba7816bf8f01cfea414140de5dae2223b00361a396177a9cb410ff61f20015ad"; // ハッシュ化したパスワード
async function sha256(str) {
const buf = new TextEncoder().encode(str);
const hashBuffer = await crypto.subtle.digest("SHA-256", buf);
return Array.from(new Uint8Array(hashBuffer))
.map(b => b.toString(16).padStart(2, "0"))
.join("");
}
async function Check(event) {
event.preventDefault();
const id = document.myform.uid.value.trim();
const pw = document.myform.pwd.value;
const msgBox = document.getElementById("message");
// IDチェック
if (!validIDs.includes(id)) {
msgBox.textContent = "ユーザーIDが違います";
return false;
}
// パスワードチェック
const pwHash = await sha256(pw);
if (pwHash !== PASSWORD_HASH) {
msgBox.textContent = "パスワードが違います";
return false;
}
// 成功したらフォーム submit でシークレットページに遷移
msgBox.textContent = ""; // メッセージクリア
document.myform.action = "https://sites.google.com/view/********/" + pw; // あなたのURL
document.myform.submit();
}
</script>
ログインフォームのデザインについて
ログインフォームは1種類ですが、Login Formの各フォームコードの<style>〜</style>を上記コードの<style>〜</style>と入れ替えれば概ねデザインは再現できます。（確実にではありません）
Loginなどのタイトルは、<form>〜</form>中に<p class="title">Login</p>（例）などとありますので再現する場合は、上記コードの<form>〜</form>の中に組み込んでください。
エラメッセージを表示する場合は、上記コードの青色部分を<form>〜</form>および<style>〜</style>の中に組み込んでください。
（Login Formのコードには青色部分はありません）
Google Sites
Report abuse