Skip to Content
このプロジェクトは現在「開発段階」です。仕様や挙動が予告なく変更される可能性があります。
ドキュメントクイックスタート

作成ガイド

Hono, TypeScript アプリに SAuthBase を実装するガイド

この作成ガイドでは、Hono , TypeScript  を使用して、簡易的な認証機能を作成します。

Hono のセットアップ

新しい Hono アプリを作成する最も簡単な方法は create-hono、 を使うことです。これにより、すべてが自動的に設定されます。プロジェクトを作成するには、以下を実行します。

作成ガイドでは、ファイル名を my-app として進めます。必要に応じて変更してください。

terminal
npm create hono@latest

インストール時に、次のプロンプトが表示されます。

terminal
1. Target directory (my-app)
2. Which template do you want to use? nodejs
3. Do you want to install project dependencies? Yes / No
  1. ディレクトリの指定

作成ディレクトリのパスを指定します。何も入力しなかった場合 my-app になります。

  1. テンプレートの選択

矢印キーで上下に移動、または、文字を入力することでテンプレートを検索することができます。 この作成ガイドに沿って作成をする場合は nodejs を選択してください。

  1. 依存関係のインストール

結局インストールする必要があるので、どちらでもいいです。（Yes 推奨）

作業ディレクトリの移動

先ほど作成された Hono アプリに移動します。

my-app の部分は作成された Hono アプリのファイルパスを入れて実行してください。

terminal
cd my-app

現在のファイル構成は以下のようになっていることを確認してください。

      • index.ts
    • .gitignore
    • package.json
    • README.md
    • tsconfig.json

SAuthBase のインストール

terminal
npm i sauthbase

作業ファイル

このファイルに実装をしていきます。

TypeScript
import {  } from "hono";
import {  } from "@hono/node-server";
 
const  = new ();
 
.("/", () => {
  return .("Hello Hono!");
});
 
(
  {
    : .,
    : 3000,
  },
  () => {
    .(`Server is running on http://localhost:${.}`);
  }
);

SAuthBase の初期化

sauthbase はプロジェクトで使用する前に一度だけ初期設定を行う必要があります。ルートファイル src/index.ts などで、初期化をしておくことをお勧めします。

TypeScript
const  = .({
  : "************************************",
  : "http://localhost:3000/auth",
});

ログインエンドポイントの作成

/login にアクセスをすると、Scratch Auth の認証ページにリダイレクトがされます。

src/index.ts
.("/login", () => {
  const  = .();
  if (.) {
    return .(.);
  } else {
    return .();
  }
});

ユーザーセッションの検証エンドポイント

/auth では、ユーザーセッションを検証します。

Scratch Auth サービスの認証機能は、リダイレクト先の URL に privateCode というクリエを追加してリダイレクトを行います。そのクリエを取得し、値を verifySession に渡して実行することで、セッションを検証することが出来ます。セッションの検証に成功すると、暗号化されたトークンを生成します。

src/index.ts
.("/auth", async () => {
  const  = ..("privateCode");
  const  = await .();
  if (.) {
    return .();
  } else {
    return .();
  }
});

トークンの検証エンドポイント

/verify では、暗号化されたトークンを検証します。

暗号化されたトークンを検証して、ユーザー名を取得します。

src/index.ts
.("/verify", async () => {
  const  = ..("token");
  const  = await .();
  if (.) {
    return .();
  } else {
    return .();
  }
});

完成したコードの確認

src/index.ts
import { Hono } from "hono";
import { serve } from "@hono/node-server";
import { sauthbase } from "sauthbase";
 
const app = new Hono();
const sab = sauthbase.init({
  secretKey: "**************************************************",
  redirect_url: "http://localhost:3000/auth",
});
 
app.get("/", (c) => {
  return c.text("Hello Hono!");
});
 
app.get("/login", (c) => {
  const response = sab.generationAuthPageUrl();
  if (response.success) {
    return c.redirect(response.data);
  } else {
    return c.json(response);
  }
});
 
app.get("/auth", async (c) => {
  const session = c.req.query("privateCode");
  const response = await sab.verifySession(session);
  if (response.success) {
    return c.json(response);
  } else {
    return c.json(response);
  }
});
 
app.get("/verify", async (c) => {
  const token = c.req.query("token");
  const response = await sab.extractUserWithVerify(token);
  if (response.success) {
    return c.json(response);
  } else {
    return c.json(response);
  }
});
 
serve(
  {
    fetch: app.fetch,
    port: 3000,
  },
  (info) => {
    console.log(`Server is running on http://localhost:${info.port}`);
  }
);

実際にテストする

お疲れ様です。これで、簡易的な認証機能が完成しました。さっそく実際に動作確認をしてみましょう。

terminal
npm run dev

サーバーの起動に成功すると以下のようなログが表示されます。リンクにアクセスしてみましょう。

terminal
Server is running on http://localhost:3000

/login ログインをする

/login にアクセスしてみましょう！

以下のような URL にリダイレクトされたら成功です。サインインできるアカウントがない場合は、Scratch Auth と Scratch アカウントを連携させてから再度お試しください。

サインインの準備ができたら、サインインするアカウントを選択してサインインしてください。

https://auth.itinerary.eu.org/auth?redirect=*****&name=*****

/auth の確認

以下のような URL にリダイレクトされたら成功です。

http://localhost:3000/auth?privateCode=*********

レスポンス JSON の success が true なら認証成功です。data.token には、生成されたトークンがあります。

Response
{
  "success": true,
  "data": {
    "token": "********************************************************,
    "payload": {
      "valid": true,
      "username": "*************",
      "type": "instant",
      "redirect": "http://localhost:3000/auth"
    }
  }
}

/verify 暗号化されたトークンの検証

クリエ token に先ほど生成された、トークンを設定してアクセスしてください。

レスポンス JSON の success が true なら認証成功です。data には、ユーザー名があります。

Response
{
  "success": true,
  "data": "*********"
}

最後に

以上で、「SAuthBase, Hono, TypeScript 作成ガイド」の終了です。お疲れ様でした。

最終更新日
インストール使い方