GitLab サインインを Express で構築する方法

新しい友達のために:

Logto は、モダンなアプリや SaaS 製品向けに設計された Auth0 の代替です。 Cloud とオープンソースの両方のサービスを提供し、アイデンティティと管理 (IAM) システムを迅速に立ち上げるのに役立ちます。認証 (Authentication)、認可 (Authorization)、マルチテナント管理をすべて一つにまとめて楽しんでください。

Logto Cloud で無料の開発テナントから始めることをお勧めします。これにより、すべての機能を簡単に探索できます。

この記事では、Express と Logto を使用して、GitLab サインイン体験（ユーザー認証 (Authentication)）を迅速に構築する手順を説明します。

前提条件

稼働中の Logto インスタンス。紹介ページをチェックして始めてください。
Express の基本的な知識。
使用可能な GitLab アカウント。

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" セクションをクリックします。"Express" フレームワークカードをクリックして、アプリケーションの作成を開始します。
アプリケーション名を入力します。例：「Bookstore」と入力し、「Create application」をクリックします。

🎉 タダーン！Logto で最初のアプリケーションを作成しました。詳細な統合ガイドを含むお祝いページが表示されます。ガイドに従って、アプリケーションでの体験を確認してください。

Express SDK を統合する

ヒント:

サンプルプロジェクトは、私たちの SDK リポジトリで利用可能です。

インストール

お好みのパッケージマネージャーを使用して Logto SDK をインストールします：

npm
pnpm
yarn

npm i @logto/express cookie-parser express-session

pnpm add @logto/express cookie-parser express-session

yarn add @logto/express cookie-parser express-session

統合

設定と必要なミドルウェアの準備

Logto クライアントの設定を準備します：

app.ts
import { LogtoExpressConfig } from '@logto/express';

const config: LogtoExpressConfig = {
  appId: '<your-application-id>',
  appSecret: '<your-application-secret>',
  endpoint: '<your-logto-endpoint>', // 例: http://localhost:3001
  baseUrl: '<your-express-app-base-url>', // 例: http://localhost:3000
};

SDK は事前に express-session の設定が必要です。

app.ts
import cookieParser from 'cookie-parser';
import session from 'express-session';

app.use(cookieParser());
app.use(
  session({
    secret: 'random_session_key', // 独自のシークレットに置き換えてください
    cookie: { maxAge: 14 * 24 * 60 * 60 * 1000 }, // ミリ秒単位
  })
);

リダイレクト URI の設定

詳細に入る前に、エンドユーザーの体験について簡単に説明します。サインインプロセスは次のように簡略化できます：

あなたのアプリがサインインメソッドを呼び出します。
ユーザーは Logto のサインインページにリダイレクトされます。ネイティブアプリの場合、システムブラウザが開かれます。
ユーザーがサインインし、あなたのアプリにリダイレクトされます（リダイレクト URI として設定されています）。

この認証 (Authentication) プロセスは OpenID Connect (OIDC) プロトコルに従い、Logto はユーザーのサインインを保護するために厳格なセキュリティ対策を講じています。
複数のアプリがある場合、同じアイデンティティプロバイダー (Logto) を使用できます。ユーザーがあるアプリにサインインすると、Logto は別のアプリにアクセスした際に自動的にサインインプロセスを完了します。

リダイレクトベースのサインインの理論と利点について詳しく知るには、Logto サインイン体験の説明を参照してください。

注記:

以下のコードスニペットでは、あなたのアプリが http://localhost:3000/ で実行されていると仮定しています。

リダイレクト URI を設定する

Logto Console のアプリケーション詳細ページに移動します。リダイレクト URI http://localhost:3000/callback を追加します。

サインインと同様に、ユーザーは共有セッションからサインアウトするために Logto にリダイレクトされるべきです。完了したら、ユーザーをあなたのウェブサイトに戻すと良いでしょう。例えば、http://localhost:3000/ をサインアウト後のリダイレクト URI セクションとして追加します。

その後、「保存」をクリックして変更を保存します。

ルートの登録

SDK は 3 つのルートを登録するためのヘルパー関数 handleAuthRoutes を提供します：

/logto/sign-in: Logto でサインイン。
/logto/sign-in-callback: サインインコールバックを処理。
/logto/sign-out: Logto でサインアウト。

次のコードをアプリに追加します：

app.ts
import { handleAuthRoutes } from '@logto/express';

app.use(handleAuthRoutes(config));

ルートが登録されたので、ホームページにサインインとサインアウトのボタンを実装しましょう。必要に応じてユーザーをサインインまたはサインアウトのルートにリダイレクトする必要があります。これを支援するために、withLogto を使用して req.user に認証 (Authentication) ステータスを注入します。

app.ts
import { withLogto } from '@logto/express';

app.get('/', withLogto(config), (req, res) => {
  res.setHeader('content-type', 'text/html');

  if (req.user.isAuthenticated) {
    res.end(`<div>Hello ${req.user.claims?.sub}, <a href="/logto/sign-out">Sign Out</a></div>`);
  } else {
    res.end('<div><a href="/logto/sign-in">Sign In</a></div>');
  }
});

チェックポイント: アプリケーションをテストする

これで、アプリケーションをテストできます：

アプリケーションを実行すると、サインインボタンが表示されます。
サインインボタンをクリックすると、SDK がサインインプロセスを初期化し、Logto のサインインページにリダイレクトされます。
サインインすると、アプリケーションに戻り、サインアウトボタンが表示されます。
サインアウトボタンをクリックして、トークンストレージをクリアし、サインアウトします。

GitLab コネクターを追加する

迅速なサインインを有効にし、ユーザーコンバージョンを向上させるために、アイデンティティプロバイダー (IdP) として Express を接続します。Logto ソーシャルコネクターは、いくつかのパラメーター入力を許可することで、この接続を数分で確立するのに役立ちます。

ソーシャルコネクターを追加するには、次の手順に従ってください：

Console > Connectors > Social Connectors に移動します。
「Add social connector」をクリックし、「GitLab」を選択します。
README ガイドに従い、必要なフィールドを完了し、設定をカスタマイズします。

注記:

インプレースコネクターガイドに従っている場合は、次のセクションをスキップできます。

GitLab OAuth app を設定する

GitLab ウェブサイトにアクセスし、GitLab アカウントでサインインします。アカウントをお持ちでない場合は、新規登録も可能です。

OAuth アプリの作成と設定

GitLab OAuth アプリの作成ガイドに従い、新しいアプリケーションを登録します。

Name に新しい OAuth アプリケーションの名前を入力し、アプリの Redirect URI を記入します。Redirect URIs は ${your_logto_origin}/callback/${connector_id} の形式でカスタマイズしてください。connector_id は Logto 管理コンソールのコネクター詳細ページ上部で確認できます。

スコープには openid を選択します。profile や email も有効にすることをおすすめします。profile スコープはユーザーのプロフィール情報取得に、email スコープはユーザーのメールアドレス取得に必要です。これらのスコープを利用する場合は、GitLab OAuth アプリで許可されていることを確認してください。これらのスコープは後でコネクターを設定する際にも使用されます。

注記:

カスタムドメインを使用している場合は、OAuth フローが両方のドメインで正しく動作するよう、カスタムドメインとデフォルトの Logto ドメインの両方を Redirect URIs に追加してください。
ログイン時に「The redirect_uri MUST match the registered callback URL for this application.」というエラーメッセージが表示された場合は、GitLab OAuth アプリの Redirect URI と Logto アプリのリダイレクト URL（プロトコルを含む）を一致させて問題を解決してください。

OAuth アプリの管理

GitLab のアプリケーションページにアクセスすると、OAuth アプリの追加・編集・削除ができます。また、OAuth アプリの詳細ページで Application ID の確認や Secret の生成も可能です。

コネクターの設定

前のセクションで取得した Application ID と Secret を clientId および clientSecret フィールドに入力します。

scope はスコープをスペース区切りで指定するリストです。指定しない場合、デフォルトは openid です。GitLab コネクターで利用可能なスコープは openid、profile、email です。profile スコープはユーザーのプロフィール情報取得に、email スコープはユーザーのメールアドレス取得に必要です。これらのスコープを利用する場合は、GitLab OAuth アプリで許可されていることを確認してください（OAuth アプリの作成と設定セクションで設定）。

設定タイプ

Name	Type
clientId	string
clientSecret	string
scope	string

GitLab コネクターのテスト

これで完了です。GitLab コネクターが利用可能になっているはずです。サインイン体験でコネクターを有効化するのを忘れずに。

設定を保存する

Logto コネクター設定エリアで必要な値をすべて記入したことを確認してください。「保存して完了」または「変更を保存」をクリックすると、GitLab コネクターが利用可能になります。

ソーシャルコネクターを正常に作成したら、サインイン体験で「GitLab で続行」ボタンとして有効にすることができます。

Console > サインイン体験 > サインアップとサインインに移動します。
（オプション）ソーシャルログインのみが必要な場合は、サインアップ識別子に「該当なし」を選択します。
設定済みの GitLab コネクターを「ソーシャルサインイン」セクションに追加します。

テストと検証

Express アプリに戻ります。これで GitLab を使用してサインインできるはずです。お楽しみください！

さらなる読み物

エンドユーザーフロー：Logto は、MFA やエンタープライズシングルサインオン (SSO) を含む即時使用可能な認証 (Authentication) フローを提供し、アカウント設定、セキュリティ検証、マルチテナント体験の柔軟な実装のための強力な API を備えています。

認可 (Authorization)：認可 (Authorization) は、ユーザーが認証 (Authentication) された後に行えるアクションやアクセスできるリソースを定義します。ネイティブおよびシングルページアプリケーションの API を保護し、ロールベースのアクセス制御 (RBAC) を実装する方法を探ります。

組織 (Organizations)：特にマルチテナント SaaS や B2B アプリで効果的な組織機能は、テナントの作成、メンバー管理、組織レベルの RBAC、およびジャストインタイムプロビジョニングを可能にします。

顧客 IAM シリーズ：顧客（または消費者）アイデンティティとアクセス管理に関する連続ブログ投稿で、101 から高度なトピックまでを網羅しています。

Logto でアプリケーションを作成する​

Express SDK を統合する​

インストール​

統合​

設定と必要なミドルウェアの準備​

リダイレクト URI の設定​

リダイレクトベースのサインインについて​

リダイレクト URI を設定する​

ルートの登録​

サインインとサインアウトの実装​

チェックポイント: アプリケーションをテストする​

GitLab コネクターを追加する​

GitLab OAuth app を設定する​

GitLab アカウントでサインイン​

OAuth アプリの作成と設定​

OAuth アプリの管理​

コネクターの設定​

設定タイプ​

GitLab コネクターのテスト​

設定を保存する​

サインイン体験で GitLab コネクターを有効にする​

テストと検証​

さらなる読み物​