Skip to content

Commit

Permalink
Merge pull request #16 from jigintern/fix/did-login-save-pem
Browse files Browse the repository at this point in the history 
DID ログインの足りない機能を追加
  • Loading branch information
@takerucam
takerucam authored Aug 10, 2023
2 parents 41476cf + 00cb873 commit 355cfd5
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 56 deletions.
100 changes: 62 additions & 38 deletions did-login/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,10 +92,16 @@ document.getElementById("submit").onclick = async () => {

// `DIDAuth` モジュールの `createNewUser` を使って DID、パスワード、メッセージ、電子署名を取得
const [did, password, message, sign] = DIDAuth.createNewUser(name);

// Formに反映
document.getElementById("did").value = did;
document.getElementById("password").value = password;
document.getElementById("sign").value = sign;
document.getElementById("message").value = message;
};
```

ここまでできたら実際にサーバー側に `/users/register` をエンドポイントとした API を追加して POST リクエストを送ってみましょう。
ここまでできたら実際にサーバー側に `/users/register` をエンドポイントとした API を追加して POST リクエストを送ってみましょう。また、`did`と`password`をローカルに保存させる機能も追加しましょう。

```js
// index.html
Expand All @@ -117,6 +123,13 @@ document.getElementById("submit").onclick = async () => {
document.getElementById("error").innerText = err.message;
}
};

// DIDとパスワードの保存処理
document.getElementById("saveBtn").onclick = async () => {
const did = document.getElementById("did").value;
const password = document.getElementById("password").value;
DIDAuth.savePem(did, password);
};
```

```js
Expand Down Expand Up @@ -283,53 +296,64 @@ try {
```js
// login.html
// pemファイルを受け取って、DIDとパスワードを取得
const pemFile = document.getElementById("pemFile").files[0];
if (!pemFile) {
document.getElementById("error").innerText = "ファイルを選択してください。";
}
import { DIDAuth } from "https://jigintern.github.io/did-login/auth/DIDAuth.js";

const [did, password] = await DIDAuth.getDIDAndPasswordFromPem(pemFile);

// サーバーにユーザー情報を問い合わせる
const path = "/users/login";
const method = "POST";
// 電子署名とメッセージの作成
const [message, sign] = DIDAuth.genMsgAndSign(did, password, path, method);
document
.getElementById("loginForm")
.addEventListener("submit", async (event) => {
event.preventDefault();
const pemFile = document.getElementById("pemFile").files[0];
if (!pemFile) {
document.getElementById("error").innerText =
"ファイルを選択してください。";
}

// 公開鍵・電子署名をサーバーに渡す
try {
const resp = await fetch(path, {
method,
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ did, sign, message }),
const [did, password] = await DIDAuth.getDIDAndPasswordFromPem(pemFile);

// サーバーにユーザー情報を問い合わせる
const path = "/users/login";
const method = "POST";
// 電子署名とメッセージの作成
const [message, sign] = DIDAuth.genMsgAndSign(did, password, path, method);

// 公開鍵・電子署名をサーバーに渡す
try {
const resp = await fetch(path, {
method,
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ did, sign, message }),
});

// サーバーから成功ステータスが返ってこないときの処理
if (!resp.ok) {
const errMsg = await resp.text();
document.getElementById("error").innerText = "エラー：" + errMsg;
return;
}

// レスポンスが正常ならローカルストレージに保存
const json = await resp.json();
localStorage.setItem("did", did);
localStorage.setItem("password", password);
localStorage.setItem("name", json.user.name);

document.getElementById("status").innerText = "ログイン成功";
document.getElementById("name").innerText = json.user.name;
document.getElementById("did").innerText = did;
document.getElementById("password").innerText = password;
} catch (err) {
document.getElementById("error").innerText = err.message;
}
});

// サーバーから成功ステータスが返ってこないときの処理
if (!resp.ok) {
const errMsg = await resp.text();
document.getElementById("error").innerText = "エラー：" + errMsg;
}

// レスポンスが正常ならローカルストレージに保存
const json = await resp.json();
localStorage.setItem("did", did);
localStorage.setItem("password", password);
localStorage.setItem("name", json.user.name);

document.getElementById("status").innerText = "ログイン成功";
document.getElementById("name").innerText = json.user.name;
document.getElementById("did").innerText = did;
document.getElementById("password").innerText = password;
} catch (err) {
document.getElementById("error").innerText = err.message;
}
```

続いてサーバー側を実装します。電子署名のチェックと DB に DID が保存されているかのチェックは新規登録と同じ処理になっています。

```js
// serve.js
// ユーザーログインAPI
import { addDID, checkDIDExists, getUser } from "./db-controller.js";

if (req.method === "POST" && pathname === "/users/login") {
const json = await req.json();
const sign = json.sign;
Expand Down
13 changes: 4 additions & 9 deletions did-login/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,10 @@
</head>

<body>
<nav class="navbar is-link" role="navigation" aria-label="main navigation">
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="/"> 新規登録 </a>

<a class="navbar-item" href="/login.html"> ログイン </a>
</div>
</div>
</nav>
<div style="background-color: skyblue; display: flex; padding: 16px">
<a style="color: white; margin-right: 16px" href="/"> 新規登録 </a>
<a style="color: white" href="/login.html"> ログイン </a>
</div>
<section class="section">
<div class="container">
<h1 class="title has-text-centered">DID Login Sample</h1>
Expand Down
13 changes: 4 additions & 9 deletions did-login/public/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,10 @@
</head>

<body>
<nav class="navbar is-link" role="navigation" aria-label="main navigation">
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="/"> 新規登録 </a>

<a class="navbar-item" href="/login.html"> ログイン </a>
</div>
</div>
</nav>
<div style="background-color: skyblue; display: flex; padding: 16px">
<a style="color: white; margin-right: 16px" href="/"> 新規登録 </a>
<a style="color: white" href="/login.html"> ログイン </a>
</div>
<section class="section">
<div class="container">
<h1 class="title has-text-centered">DID Login Sample</h1>
Expand Down

0 comments on commit 355cfd5

Please sign in to comment.