Hexabase（ヘキサベース）は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、TypeScript SDKの開発が進められています。
元々TypeScriptで作られていることもあって、Next.jsやVue.jsなどでimportして利用することができます。しかし、もっと普通のWebアプリケーションなどで使う際には、CDN経由で利用したいと考える方もいるでしょう。そこで、UMD版Hexabase JavaScript SDKを作成しました。
今回は、そのUMD版Hexabase JavaScript SDKを使って認証を行うデモを紹介します。
デモ
デモは以下で体験できます。
SDKの読み込み
SDKは下記のように読み込めます。
<script src="https://cdn.jsdelivr.net/npm/@hexabase/hexabase-js@latest/dist/umd/hexabase.min.js"></script>
バージョン指定する場合は、以下のようになります。メジャーバージョンが上がらない限りはlatest指定をお勧めします。
<script src="https://cdn.jsdelivr.net/npm/@hexabase/hexabase-js@2.0.6/dist/umd/hexabase.min.js"></script>
モジュールとして使う場合には、以下のようになります。
<script type="module">
import hexabase from 'https://cdn.jsdelivr.net/npm/@hexabase/hexabase-js@latest/+esm'
</script>
SDKの初期化
SDKは以下のようコードで初期化します。これさえ終われば、後はTypeScriptと同じように使えます。
const { HexabaseClient } = hexabase;
const client = new HexabaseClient();
認証のデモ
認証のデモです。まずHTMLはBootstrapを使って、以下のように作成しています。
<div class="container">
<div class="row justify-content-md-center">
<div class="col-10">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" name="email" aria-describedby="emailHelp" value="demo5@moongift.jp">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" name="password" value="K4c%j%vzR7sQKS$u&Uo%">
</div>
<button type="submit" class="btn btn-primary">ログイン</button>
</form>
<div id="result"></div>
<br />
<button type="submit" id="logout" class="btn btn-warning" disabled>ログアウト</button>
</div>
</div>
</div>
ログイン
まずログインのコードです。これは client.login を呼び出すだけです。ログインに成功すると、 client.currentUser にログインしたユーザーの情報が入ります。
const logoutButton = document.querySelector('#logout');
document.querySelector('form').onsubmit = async (e) => {
e.preventDefault();
const result = document.querySelector('#result');
result.innerHTML = '';
const { email, password } = e.target;
// 認証
const res = await client.login({
email: email.value,
password: password.value
});
logoutButton.disabled = !res;
// 認証成功していれば true
if (res) {
result.innerHTML = `ログインしました。ユーザー名は ${client.currentUser.userName}です`;
} else {
result.innerHTML = `ログイン失敗しました。`
}
};
ログアウト
ログアウト処理も、ログイン処理と同様に簡単です。 client.logout を呼び出すだけです。
logoutButton.onclick = async (e) => {
e.preventDefault();
const result = document.querySelector('#result');
try {
// ログアウト。成功すれば true
const res = await client.logout();
result.innerHTML = res ? '' : 'ログアウト失敗しました';
logoutButton.disabled = res;
} catch (e) {
result.innerHTML = 'ログアウト失敗しました';
logoutButton.disabled = false;
}
}
まとめ
UMD版Hexabase JavaScript SDKを使って認証を行うデモを紹介しました。UMD版Hexabase JavaScript SDKは、CDN経由で利用できるため、jQueryなど普通のWebアプリケーションでも利用できます。また、TypeScript SDKと同じように使えるため、TypeScript SDKを使っている方でも移行が容易です。
ぜひHexabaseを使ってWebアプリケーション開発を行ってください。