2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

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を使って認証を行うデモを紹介します。

デモ

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

image.png

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

Hexabase | 新規事業向け開発・競争領域でのDX実現をサポート

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?