UMD版Hexabase JavaScript SDKを使って認証を行う

[Hexabase（ヘキサベース）](https://www.hexabase.com/)は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、TypeScript SDKの開発が進められています。

元々TypeScriptで作られていることもあって、Next.jsやVue.jsなどでimportして利用することができます。しかし、もっと普通のWebアプリケーションなどで使う際には、CDN経由で利用したいと考える方もいるでしょう。そこで、UMD版Hexabase JavaScript SDKを作成しました。

今回は、そのUMD版Hexabase JavaScript SDKを使って認証を行うデモを紹介します。

## デモ

デモは以下で体験できます。

[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/d3bd7abb-f62a-132c-8cfa-a7147ccf9c63.png)](https://jsfiddle.net/moongift/4n8wbqh9/33/)


## SDKの読み込み

SDKは下記のように読み込めます。

```html
<script src="https://cdn.jsdelivr.net/npm/@hexabase/hexabase-js@latest/dist/umd/hexabase.min.js"></script>
```

バージョン指定する場合は、以下のようになります。メジャーバージョンが上がらない限りはlatest指定をお勧めします。

```html
<script src="https://cdn.jsdelivr.net/npm/@hexabase/hexabase-js@2.0.6/dist/umd/hexabase.min.js"></script>
```

モジュールとして使う場合には、以下のようになります。

```html
<script type="module">
import hexabase from 'https://cdn.jsdelivr.net/npm/@hexabase/hexabase-js@latest/+esm'
</script>
```

## SDKの初期化

SDKは以下のようコードで初期化します。これさえ終われば、後はTypeScriptと同じように使えます。

```javascript
const { HexabaseClient } = hexabase;
const client = new HexabaseClient();
```

## 認証のデモ

認証のデモです。まずHTMLはBootstrapを使って、以下のように作成しています。

```html
<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` にログインしたユーザーの情報が入ります。

```javascript
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` を呼び出すだけです。

```javascript
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アプリケーション開発を行ってください。

[Hexabase \| 新規事業向け開発・競争領域でのDX実現をサポート](https://www.hexabase.com/)