Logto は、モダンなアプリや SaaS 製品向けに設計された Auth0 の代替です。 Cloud と オープンソース の両方のサービスを提供し、アイデンティティと管理 (IAM) システムを迅速に立ち上げるのをサポートします。 認証 (Authentication)、認可 (Authorization)、マルチテナント管理を すべて一つに まとめて楽しめます。
Logto Cloud で無料の開発テナントから始めることをお勧めします。これにより、すべての機能を簡単に探索できます。
この記事では、Go と Logto を使用して、Facebook サインイン体験(ユーザー認証 (Authentication))を迅速に構築する手順を説明します。
前提条件
Logto でアプリケーションを作成する
Logto は OpenID Connect (OIDC) 認証 (Authentication) と OAuth 2.0 認可 (Authorization) に基づいています。複数のアプリケーション間でのフェデレーテッドアイデンティティ管理をサポートしており、一般的にシングルサインオン (SSO) と呼ばれます。
あなたの Traditional web アプリケーションを作成するには、次の手順に従ってください:
- Logto コンソール を開きます。「Get started」セクションで「View all」リンクをクリックしてアプリケーションフレームワークのリストを開きます。あるいは、Logto Console > Applications に移動し、「Create application」ボタンをクリックします。
- 開いたモーダルで、左側のクイックフィルターチェックボックスを使用して、すべての利用可能な "Traditional web" フレームワークをフィルタリングするか、"Traditional web" セクションをクリックします。"Go" フレームワークカードをクリックして、アプリケーションの作成を開始します。
- アプリケーション名を入力します。例:「Bookstore」と入力し、「Create application」をクリックします。
🎉 タダーン!Logto で最初のアプリケーションを作成しました。詳細な統合ガイドを含むお祝いページが表示されます。ガイドに従って、アプリケーションでの体験がどのようになるかを確認してください。
Go SDK を統合する
- 以下のデモンストレーションは Gin Web Framework に基づいて構築されています。同じ手順を踏むことで、他のフレームワークにも Logto を統合できます。
- Go のサンプルプロジェクトは、私たちの Go SDK リポジトリ で利用可能です。
インストール
プロジェクトのルートディレクトリで実行します:
go get github.com/logto-io/go
アプリケーションコードに github.com/logto-io/go/client
パッケージを追加します:
// main.go
package main
import (
"github.com/gin-gonic/gin"
// 依存関係を追加
"github.com/logto-io/go/client"
)
func main() {
router := gin.Default()
router.GET("/", func(c *gin.Context) {
c.String(200, "Hello Logto!")
})
router.Run(":3000")
}
セッションストレージを作成する
従来の Web アプリケーションでは、ユーザーの認証 (Authentication) 情報はユーザーセッションに保存されます。
Logto SDK は Storage
インターフェースを提供しており、Web フレームワークに基づいて Storage
アダプターを実装することで、Logto SDK がユーザーの認証 (Authentication) 情報をセッションに保存できるようにします。
Logto によって保存されるユーザーの認証 (Authentication) 情報がクッキーのサイズ制限を超える可能性があるため、クッキーに基づくセッションの使用は推奨しません。この例では、メモリベースのセッションを使用しています。必要に応じて、Redis や MongoDB などの技術を使用して本番環境でセッションを保存できます。
Logto SDK の Storage
タイプは次のとおりです:
package client
type Storage interface {
GetItem(key string) string
SetItem(key, value string)
}
このプロセスを示すために、github.com/gin-contrib/sessions ミドルウェアを例として使用します。
ミドルウェアをアプリケーションに適用し、ルートハンドラーでユーザーリクエストコンテキストからユーザーセッションを取得できるようにします:
package main
import (
"github.com/gin-contrib/sessions"
"github.com/gin-contrib/sessions/memstore"
"github.com/gin-gonic/gin"
"github.com/logto-io/go/client"
)
func main() {
router := gin.Default()
// この例ではメモリベースのセッションを使用しています
store := memstore.NewStore([]byte("your session secret"))
router.Use(sessions.Sessions("logto-session", store))
router.GET("/", func(ctx *gin.Context) {
// ユーザーセッションを取得
session := sessions.Default(ctx)
// ...
ctx.String(200, "Hello Logto!")
})
router.Run(":3000")
}
session_storage.go
ファイルを作成し、SessionStorage
を定義し、Logto SDK の Storage
インターフェースを実装します:
package main
import (
"github.com/gin-contrib/sessions"
)
type SessionStorage struct {
session sessions.Session
}
func (storage *SessionStorage) GetItem(key string) string {
value := storage.session.Get(key)
if value == nil {
return ""
}
return value.(string)
}
func (storage *SessionStorage) SetItem(key, value string) {
storage.session.Set(key, value)
storage.session.Save()
}
これで、ルートハンドラー内で Logto 用のセッションストレージを作成できます:
session := sessions.Default(ctx)
sessionStorage := &SessionStorage{session: session}
LogtoClient を初期化する
まず、Logto の設定を作成します:
func main() {
// ...
logtoConfig := &client.LogtoConfig{
Endpoint: "<your-logto-endpoint>", // 例: http://localhost:3001
AppId: "<your-application-id>",
AppSecret: "<your-application-secret>",
}
// ...
}
「App Secret」は管理コンソールのアプリケーション詳細ページから見つけてコピーできます:
次に、上記の Logto 設定を使用して、各ユーザーリクエストに対して LogtoClient
を作成できます:
func main() {
// ...
router.GET("/", func(ctx *gin.Context) {
// LogtoClient を作成
session := sessions.Default(ctx)
logtoClient := client.NewLogtoClient(
logtoConfig,
&SessionStorage{session: session},
)
// Logto を使用してホームページのコンテンツを制御
authState := "このウェブサイトにログインしていません。 :("
if logtoClient.IsAuthenticated() {
authState = "このウェブサイトにログインしています! :)"
}
homePage := `<h1>Hello Logto</h1>` +
"<div>" + authState + "</div>"
ctx.Data(http.StatusOK, "text/html; charset=utf-8", []byte(homePage))
})
// ...
}
サインインルートを実装する
リダイレクト URI が設定された後、サインインリクエストを処理するために sign-in
ルートを追加し、ホームページにサインインリンクも追加します:
func main() {
// ...
// ホームページにサインインリクエストを実行するリンクを追加
router.GET("/", func(ctx *gin.Context) {
// ...
homePage := `<h1>Hello Logto</h1>` +
"<div>" + authState + "</div>" +
// リンクを追加
`<div><a href="/sign-in">Sign In</a></div>`
ctx.Data(http.StatusOK, "text/html; charset=utf-8", []byte(homePage))
})
// サインインリクエストを処理するためのルートを追加
router.GET("/sign-in", func(ctx *gin.Context) {
session := sessions.Default(ctx)
logtoClient := client.NewLogtoClient(
logtoConfig,
&SessionStorage{session: session},
)
// サインインリクエストは Logto によって処理されます。
// ユーザーはサインイン後にリダイレクト URI にリダイレクトされます。
signInUri, err := logtoClient.SignIn("http://localhost:3000/callback")
if err != nil {
ctx.String(http.StatusInternalServerError, err.Error())
return
}
// ユーザーを Logto サインインページにリダイレクトします。
ctx.Redirect(http.StatusTemporaryRedirect, signInUri)
})
// ...
}
これで、ユーザーが http://localhost:3000/sign-in
にアクセスすると、Logto サインインページにリダイレクトされます。
コールバックルートを実装する
ユーザーが Logto のサインインページで正常にサインインすると、Logto はユーザーをリダイレクト URI にリダイレクトします。
リダイレクト URI が http://localhost:3000/callback
であるため、サインイン後のコールバックを処理するために /callback
ルートを追加します。
func main() {
// ...
// サインインコールバックリクエストを処理するためのルートを追加
router.GET("/callback", func(ctx *gin.Context) {
session := sessions.Default(ctx)
logtoClient := client.NewLogtoClient(
logtoConfig,
&SessionStorage{session: session},
)
// サインインコールバックリクエストは Logto によって処理されます
err := logtoClient.HandleSignInCallback(ctx.Request)
if err != nil {
ctx.String(http.StatusInternalServerError, err.Error())
return
}
// 開発者が指定したページにジャンプします。
// この例では、ユーザーをホームページに戻します。
ctx.Redirect(http.StatusTemporaryRedirect, "/")
})
// ...
}
サインアウトルートを実装する
ユーザーがサインアウトすると、Logto はユーザーをポストサインアウトリダイレクト URI にリダイレクトします。
次に、sign-out
ルートを追加してサインアウトリクエストを処理し、ホームページにサインアウトリンクを追加しましょう:
func main() {
// ...
// ホームページにサインアウトリクエストを実行するリンクを追加
router.GET("/", func(ctx *gin.Context) {
// ...
homePage := `<h1>Hello Logto</h1>` +
"<div>" + authState + "</div>" +
`<div><a href="/sign-in">Sign In</a></div>` +
// リンクを追加
`<div><a href="/sign-out">Sign Out</a></div>`
ctx.Data(http.StatusOK, "text/html; charset=utf-8", []byte(homePage))
})
// サインアウトリクエストを処理するルートを追加
router.GET("/sign-out", func(ctx *gin.Context) {
session := sessions.Default(ctx)
logtoClient := client.NewLogtoClient(
logtoConfig,
&SessionStorage{session: session},
)
// サインアウトリクエストは Logto によって処理されます。
// サインアウト後、ユーザーはポストサインアウトリダイレクト URI にリダイレクトされます。
signOutUri, signOutErr := logtoClient.SignOut("http://localhost:3000")
if signOutErr != nil {
ctx.String(http.StatusOK, signOutErr.Error())
return
}
ctx.Redirect(http.StatusTemporaryRedirect, signOutUri)
})
// ...
}
ユーザーがサインアウトリクエストを行った後、Logto はセッション内のすべてのユーザー認証情報をクリアします。
チェックポイント: アプリケーションをテストする
これで、アプリケーションをテストできます:
- アプリケーションを実行すると、サインインボタンが表示されます。
- サインインボタンをクリックすると、SDK がサインインプロセスを初期化し、Logto のサインインページにリダイレクトされます。
- サインインすると、アプリケーションに戻り、サインアウトボタンが表示されます。
- サインアウトボタンをクリックして、トークンストレージをクリアし、サインアウトします。
Facebook コネクターを追加する
迅速なサインインを可能にし、ユーザーのコンバージョンを向上させるために、アイデンティティプロバイダー (IdP) として Go を接続します。Logto ソーシャルコネクターは、いくつかのパラメーター入力を許可することで、この接続を数分で確立するのに役立ちます。
ソーシャルコネクターを追加するには、次の手順に従ってください:
- Console > Connectors > Social Connectors に移動します。
- 「ソーシャルコネクターを追加」をクリックし、「Facebook」を選択します。
- README ガイドに従い、必要なフィールドを完了し、設定をカスタマイズします。
インプレースコネクターガイドに従っている場合は、次のセクションをスキップできます。
Facebook login を設定する
Facebook デベロッパーアカウントを登録する
まだアカウントを持っていない場合は、Facebook デベロッパーとして登録 してください。
Facebook アプリを設定する
- Apps ページにアクセスします。
- 既存のアプリをクリックするか、必要に応じて新しいアプリを作成 します。
- 選択する アプリタイプ は任意ですが、Facebook Login プロダクトを含んでいる必要があります。
- アプリダッシュボードページで、「Add a product」セクションまでスクロールし、「Facebook Login」カードの「Set up」ボタンをクリックします。
- Facebook Login クイックスタートページをスキップし、サイドバー -> 「Products」 -> 「Facebook Login」 -> 「Settings」をクリックします。
- Facebook Login 設定ページで、「Valid OAuth Redirect URIs」フィールドに
${your_logto_origin}/callback/${connector_id}
を入力します。connector_id
は Logto 管理コンソールのコネクター詳細ページの上部バーにあります。例:- 本番環境の場合:
https://logto.dev/callback/${connector_id}
- ローカル環境でのテストの場合:
https://localhost:3001/callback/${connector_id}
- 本番環境の場合:
- 右下隅の「Save changes」ボタンをクリックします。
コネクター JSON を作成する
- Facebook アプリダッシュボードページで、サイドバー -> 「Settings」 -> 「Basic」をクリックします。
- パネルに「App ID」と「App secret」が表示されます。
- App secret 入力ボックスの「Show」ボタンをクリックして、その内容をコピーします。
- Logto コネクター設定を入力します:
clientId
フィールドに App ID の文字列を入力します。clientSecret
フィールドに App secret の文字列を入力します。scope
フィールドに、カンマまたはスペースで区切られた 権限 のリストを文字列で入力します。スコープを指定しない場合、デフォルトのスコープはemail,public_profile
です。
Facebook のテストユーザーでサインインをテストする
開発およびライブの アプリモード の両方で、関連するアプリでのサインインをテストするために、テスト、開発者、および管理者ユーザーのアカウントを使用できます。
また、アプリを直接 ライブにする ことで、任意の Facebook ユーザーがアプリでサインインできるようにすることもできます。
- アプリダッシュボードページで、サイドバー -> 「Roles」 -> 「Test Users」をクリックします。
- 「Create test users」ボタンをクリックしてテストユーザーを作成します。
- 既存のテストユーザーの「Options」ボタンをクリックすると、「名前とパスワードの変更」などの操作が表示されます。
Facebook サインイン設定を公開する
通常、開発モード では、テスト、管理者、および開発者ユーザーのみが関連するアプリでサインインできます。
本番環境で通常の Facebook ユーザーがアプリでサインインできるようにするには、アプリタイプに応じて、Facebook アプリを ライブモード に切り替える必要があるかもしれません。例えば、純粋な ビジネスタイプ のアプリには「ライブ」スイッチボタンがありませんが、使用を妨げることはありません。
- Facebook アプリダッシュボードページで、サイドバー -> 「Settings」 -> 「Basic」をクリックします。
- 必要に応じて、パネルの「Privacy Policy URL」と「User data deletion」フィールドを入力します。
- 右下隅の「Save changes」ボタンをクリックします。
- アプリのトップバーで「Live」スイッチボタンをクリックします。
設定タイプ
名前 | タイプ |
---|---|
clientId | string |
clientSecret | string |
scope | string |
設定を保存する
Logto コネクター設定エリアで必要な値をすべて記入したことを確認してください。「保存して完了」または「変更を保存」をクリックすると、Facebook コネクターが利用可能になります。
サインイン体験で Facebook コネクターを有効にする
ソーシャルコネクターを正常に作成すると、サインイン体験で「Facebook で続行」ボタンとして有効にすることができます。
- コンソール > サインイン体験 > サインアップとサインイン に移動します。
- (オプション)ソーシャルログインのみが必要な場合は、サインアップ識別子に「該当なし」を選択します。
- 設定済みの Facebook コネクターを「ソーシャルサインイン」セクションに追加します。
テストと検証
Go アプリに戻ります。これで Facebook を使用してサインインできるはずです。お楽しみください!
さらなる読み物
エンドユーザーフロー:Logto は、MFA やエンタープライズシングルサインオン (SSO) を含む即時使用可能な認証 (Authentication) フローを提供し、アカウント設定、セキュリティ検証、マルチテナント体験の柔軟な実装のための強力な API を備えています。
認可 (Authorization):認可 (Authorization) は、ユーザーが認証 (Authentication) された後に行えるアクションやアクセスできるリソースを定義します。ネイティブおよびシングルページアプリケーションの API を保護し、ロールベースのアクセス制御 (RBAC) を実装する方法を探ります。
組織 (Organizations):特にマルチテナント SaaS や B2B アプリで効果的な組織機能は、テナントの作成、メンバー管理、組織レベルの RBAC、およびジャストインタイムプロビジョニングを可能にします。
顧客 IAM シリーズ:顧客(または消費者)アイデンティティとアクセス管理に関する連続ブログ投稿で、101 から高度なトピックまでを網羅しています。