0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Hanko】認証機能を2行で実装!Auth0代替のオープンソース認証基盤を徹底解説

Posted at

この記事は ゆっくりテックウォッチ Advent Calendar 2025 の 12 日目の記事です。

個人開発の「ゆっくり動画スタジオ」でGitHub人気リポジトリの解説動画を自動生成しており、その分析データをもとに本記事も生成しています。

TL;DR

  • Passkeys対応でパスワードレス認証を簡単実装 - 指紋認証や顔認証をWebアプリで使える
  • Web Componentsで2行のコードで認証UI統合 - React/Vue/Angularなど主要フレームワーク対応
  • OAuth/SAML/MFAなど企業向け機能も完備 - スタートアップから大企業まで対応可能

このリポジトリについて

リポジトリカード

パスワードレス認証を数行で実装できるオープンソース認証基盤

HankoはPasskeys・パスワード・OAuthなど現代的な認証方式をすべてサポートするオープンソース認証ソリューションです。Web ComponentsでUIを簡単に統合でき、セルフホストとクラウドサービスの両方で利用可能です。

項目 内容
リポジトリ teamhanko/hanko
スター数 ⭐ 8,665
言語 Go
ライセンス AGPL-3.0 (backend), MIT (frontend)
作成日 2022-03-14

なぜ今注目されているのか

OAuth対応、パスワードレス、MFA...認証機能の実装は複雑で時間がかかります。自前で実装しようとすると、セキュリティ対策やユーザー管理など考慮すべき点が多く、本来作りたい機能に集中できなくなってしまいます。

Hankoなら2行のコードでモダンな認証UIを統合できます。 Passkeys(指紋認証・顔認証)を中心とした次世代認証をすぐに導入でき、従来のパスワード認証やOAuth連携もサポートしています。

スター推移

スター推移グラフ

2022年3月の公開以来、着実に成長を続けています。特に2023年10月頃に急成長し、1週間で約1,500スターを獲得しました。これはPasskeysへの関心の高まりと、Auth0などの有料サービスの代替を探す開発者の増加が背景にあります。2024年10月にも再度急成長し、現在も安定した成長を続けています。

主な機能・特徴

リポジトリフィーチャーカード

1. Passkeys対応でパスワードレス認証を簡単実装

Passkeys(WebAuthn)は、スマホの指紋認証や顔認証をWebサイトでも使えるようにする技術です。パスワードを覚える必要がなく、フィッシング攻撃にも強い次世代の認証方式として注目されています。

HankoはこのPasskeysをネイティブサポートしており、設定を有効にするだけで指紋認証・顔認証によるログインを実現できます。「パスワードを忘れた」という問い合わせを大幅に削減できます。

2. Web Componentsで2行のコードで認証UI統合

Hankoの最大の特徴はHanko ElementsというWeb Componentsライブラリです。React、Vue、Angular、Svelte、Next.jsなど、どのフレームワークでも同じコードで動作します。

<!-- たったこれだけで認証UIが完成 -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@teamhanko/hanko-elements/dist/elements.js"></script>
<hanko-auth api="https://your-hanko-api.com"></hanko-auth>

CSSでデザインをカスタマイズすることも可能で、自社のブランドに合わせた認証画面を簡単に作成できます。

3. OAuth/SAML/MFAなど企業向け機能も完備

Hankoは個人開発だけでなく、エンタープライズでの利用も想定した機能を備えています:

  • OAuth SSO: Google、Apple、GitHubなどのソーシャルログイン対応
  • SAML Enterprise SSO: 企業のActive DirectoryやOktaとの連携
  • MFA(多要素認証): TOTPやセキュリティキーによる追加認証
  • Webhooks: 認証イベントを外部システムに通知
  • サーバーサイドセッション: リモートからのセッション無効化

4. セルフホストとクラウドサービス両対応

Hankoは2つの利用方法を提供しています:

  • セルフホスト: Docker Composeで自社サーバーにデプロイ(無料)
  • Hanko Cloud: マネージドサービスとして即座に利用開始

コストを抑えたい場合はセルフホスト、運用の手間を省きたい場合はクラウドと、ニーズに応じて選択できます。

技術スタック

Go製バックエンド + Web Components UI + WebAuthn認証

分類 技術
主要技術 Go, TypeScript, WebAuthn
フレームワーク/ライブラリ Echo (Go), Web Components, JWT, OAuth/OIDC
インフラ PostgreSQL, MySQL, Docker, Kubernetes, Redis
連携サービス Apple Sign In, Google Sign In, GitHub OAuth, SAML SSO, Webhooks

バックエンドはGoで書かれており、軽量で高速な処理を実現しています。フロントエンドのWeb Componentsは標準技術に準拠しているため、特定のフレームワークに依存しません。

ユースケース

ユースケース1: スタートアップのフルスタックエンジニア

背景: 3人チームでSaaS製品を開発中。MVPを1ヶ月で作る必要があるが、認証機能に時間を取られたくない。

課題: OAuth対応やパスワードリセット機能を一から実装すると2週間かかる。

解決策: Hanko ElementsをReactアプリに統合し、Hanko Cloudを利用。

結果: npm install + 2行のコード追加で認証機能を1日で実装完了。本来の機能開発に集中できた。

ユースケース2: 中規模企業のバックエンドエンジニア

背景: 従業員100人のB2B SaaS企業で働いている。Auth0を使っているが月額コストが上がり続けている。

課題: ユーザー数増加でAuth0のコストが月10万円を超えた。

解決策: Hankoをセルフホストに移行し、認証コストをゼロに。

結果: Docker ComposeでHankoをデプロイし、月額10万円以上のコスト削減を実現。データも自社管理に。

ユースケース3: セキュリティ意識の高いプロダクトマネージャー

背景: 金融系スタートアップのPM。パスワード漏洩事件のニュースを見て、自社サービスのセキュリティを見直したい。

課題: パスワード認証はフィッシングに弱く、ユーザーも覚えるのが大変。

解決策: HankoでPasskeys認証を導入し、パスワードレスを実現。

結果: パスワード忘れサポートが80%減少、ユーザー満足度も向上。

競合との比較

Auth0との違い

観点 Hanko Auth0
価格 セルフホスト無料、クラウドも手頃 ユーザー数に応じて高額になりがち
Passkeys対応 ネイティブ対応、中心機能 対応はあるが後発
ソースコード オープンソース プロプライエタリ
エンタープライズ機能 SAML SSO対応、成長中 豊富なエンタープライズ機能

Hankoを選ぶべきケース: コストを抑えたい、Passkeysを中心に使いたい、オープンソースを重視する場合

Firebase Authenticationとの違い

観点 Hanko Firebase Authentication
ベンダー依存 独立、どこでもデプロイ可能 Googleエコシステムに依存
Passkeys対応 フル対応 限定的
導入の簡単さ Web Componentsで簡単 Firebase SDKで簡単

Hankoを選ぶべきケース: Googleに依存したくない、Passkeysを本格活用したい場合

始め方

Docker Composeでローカル環境構築

# リポジトリをクローン
git clone https://github.com/teamhanko/hanko.git
cd hanko

# Docker Composeで起動
docker compose -f deploy/docker-compose/quickstart.yaml up -d

フロントエンドへの統合

npm install @teamhanko/hanko-elements
// Reactの例
import { register } from "@teamhanko/hanko-elements";

register("https://your-hanko-api.com").catch(console.error);

function Login() {
  return <hanko-auth />;
}

詳細は公式ドキュメントを参照してください。

まとめ

  • Passkeys(WebAuthn)による次世代パスワードレス認証を簡単に導入できる
  • Web Componentsで2行のコードで認証UI統合が可能で、どのフレームワークでも使える
  • セルフホスト無料でAuth0やFirebaseの代替として使える

認証機能の実装に悩んでいるなら、ぜひHankoを試してみてください。概要欄のリンクからGitHubリポジトリとデモサイトをチェックできます!


動画で解説を見る

YouTubeチャンネル「ゆっくりテックウォッチ」では、GitHub の注目リポジトリをゆっくり解説しています。

この記事で紹介した Hanko の解説動画も公開していますので、ぜひご覧ください!

チャンネル登録よろしくお願いします!


関連リンク


この記事は AI によって自動生成されました。内容に誤りがある可能性があります。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?