How to build Microsoft Entra ID OIDC enterprise SSO with Vanilla JS

新しい友達のために:

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

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

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

前提条件

実行中の Logto インスタンス。始めるには紹介ページをご覧ください。
Vanilla JS の基本的な知識。
使用可能な Microsoft Entra ID OIDC enterprise SSO アカウント。

Create an application in Logto

Logto は OpenID Connect (OIDC) 認証 (Authentication) と OAuth 2.0 認可 (Authorization) に基づいています。複数のアプリケーション間でのフェデレーテッドアイデンティティ管理をサポートしており、一般的にシングルサインオン (SSO) と呼ばれます。

あなたのシングルページアプリアプリケーションを作成するには、次の手順に従ってください：

Logto コンソールを開きます。「Get started」セクションで「View all」リンクをクリックしてアプリケーションフレームワークのリストを開きます。あるいは、Logto Console > Applications に移動し、「Create application」ボタンをクリックします。
開いたモーダルで、左側のクイックフィルターチェックボックスを使用して、すべての利用可能な "シングルページアプリ" フレームワークをフィルタリングするか、"シングルページアプリ" セクションをクリックします。"Vanilla JS" フレームワークカードをクリックして、アプリケーションの作成を開始します。
アプリケーション名を入力します。例：「Bookstore」と入力し、「Create application」をクリックします。

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

Integrate Vanilla JS SDK

ヒント:

vanilla-js SDK はフレームワークに依存しないため、ラッパーを書いて適合させることで、任意のフロントエンドフレームワークで使用できます。
サンプルプロジェクトは、私たちの SDK リポジトリで利用可能です。

インストール

お好きなパッケージマネージャーを選ぶか、CDN を使用して Logto Browser SDK をインストールしてください。

npm
pnpm
yarn
CDN

npm i @logto/browser

pnpm add @logto/browser

yarn add @logto/browser

<!-- jsdelivr に特別な感謝を -->
<script type="module">
  import LogtoClient from 'https://cdn.jsdelivr.net/npm/@logto/[email protected]/+esm';
</script>

LogtoClient の初期化

LogtoClient インスタンスをインポートして、設定を渡して初期化します：

index.js
import LogtoClient from '@logto/browser';

const logtoClient = new LogtoClient({
  endpoint: '<your-logto-endpoint>',
  appId: '<your-application-id>',
});

endpoint と appId は、Logto Console のアプリケーション詳細ページで見つけることができます。

リダイレクト 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 セクションとして追加します。

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

リダイレクトの処理

ユーザーが Logto からあなたのアプリケーションにリダイレクトされた後に行うべきことがまだあります。適切に処理しましょう。

pages/Callback.js
const callbackHandler = async (logtoClient) => {
  await logtoClient.handleSignInCallback(window.location.href);

  if (!logtoClient.isAuthenticated) {
    // サインイン失敗の処理
    alert('サインインに失敗しました');
    return;
  }

  // サインイン成功の処理
  window.location.assign('/');
};

logtoClient は、認証 (Authentication) フローを簡単に管理するための signIn と signOut メソッドを提供します。

注記:

.signIn() を呼び出す前に、Admin Console でリダイレクト URI が正しく設定されていることを確認してください。 :::

pages/Home.js
const isAuthenticated = await logtoClient.isAuthenticated();

const onClickSignIn = () => {
  logtoClient.signIn('http://localhost:3000/callback');
};
const onClickSignOut = () => {
  logtoClient.signOut('http://localhost:3000');
};

const button = document.createElement('button');
button.innerHTML = isAuthenticated ? 'Sign Out' : 'Sign In';
button.addEventListener('click', isAuthenticated ? onClickSignOut : onClickSignIn);

document.body.appendChild(button);

.signOut() を呼び出すと、存在する場合、メモリと localStorage 内のすべての Logto データがクリアされます。

認証 (Authentication) ステータスの処理

Logto SDK では、一般的に logtoClient.isAuthenticated を使用して認証 (Authentication) ステータスを確認できます。ユーザーがサインインしている場合、この値は true になり、そうでない場合は false になります。

バニラ JS アプリでは、isAuthenticated ステータスを使用して、サインインおよびサインアウトボタンをプログラムで表示および非表示にすることができます。どのように行うか見てみましょう。

const redirectUrl = 'http://localhost:3000/callback';
const baseUrl = 'http://localhost:3000';

// サインインおよびサインアウトボタンの条件付きレンダリング
const render = async (logtoClient) => {
  const isAuthenticated = await logtoClient.isAuthenticated();
  const container = document.querySelector('#container');

  const onClickSignIn = () => logtoClient.signIn(redirectUrl);
  const onClickSignOut = () => logtoClient.signOut(baseUrl);

  const button = document.createElement('button');
  button.innerHTML = isAuthenticated ? 'Sign Out' : 'Sign In';
  button.addEventListener('click', isAuthenticated ? onClickSignOut : onClickSignIn);

  container.append(button);
};

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

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

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

Add Microsoft Entra ID OIDC enterprise SSO connector

To simplify access management and gain enterprise-level safeguards for your big clients, connect with Vanilla JS as a federated identity provider. The Logto enterprise SSO connector helps you establish this connection in minutes by allowing several parameter inputs.

To add an enterprise SSO connector, simply follow these steps:

Navigate to Logto console > Enterprise SSO.

SSO page

Click "Add enterprise connector" button and choose your SSO provider type. Choose from prebuilt connectors for Microsoft Entra ID (Azure AD), Google Workspace, and Okta, or create a custom SSO connection using the standard OpenID Connect (OIDC) or SAML protocol.
Provide a unique name (e.g., SSO sign-in for Acme Company).

Select your SSO provider

Configure the connection with your IdP in the "Connection" tab. Check the guides above for each connector types.

SSO connection

Customize the SSO experience and enterprise’s email domain in the "Experience" tab. Users sign in with the SSO-enabled email domain will be redirected to SSO authentication.

SSO experience

Save changes.

Set up Azure AD SSO アプリケーション

ステップ 1: Microsoft EntraID OIDC アプリケーションを作成する

Microsoft Entra 管理センターにアクセスし、管理者としてサインインします。
Identity > Applications > App registrations に移動します。

New registration を選択します。
アプリケーション名を入力し、アプリケーションに適したアカウントタイプを選択します。
アプリケーションプラットフォームとして Web を選択します。
Logto の SSO 設定ページから redirect URI をコピーして貼り付けます。redirect URI は、ユーザーが Microsoft Entra ID で認証された後にリダイレクトされる URL です。

Register をクリックしてアプリケーションを作成します。

ステップ 2: Logto で Microsoft Entra ID OIDC SSO を設定する

Microsoft Entra OIDC アプリケーションを正常に作成した後、IdP 設定を Logto に戻す必要があります。Logto コンソールの Connection タブに移動し、次の設定を入力してください：

Client ID: Microsoft Entra によって OIDC アプリケーションに割り当てられた一意の識別子です。この識別子は、OIDC フロー中に Logto がアプリケーションを識別し認証するために使用されます。アプリケーションの概要ページで Application (client) ID として見つけることができます。

Client Secret: 新しいクライアントシークレットを作成し、その値を Logto にコピーします。このシークレットは、OIDC アプリケーションを認証し、Logto と IdP 間の通信を保護するために使用されます。

発行者 (Issuer): IdP の一意の識別子である発行者 URL で、OIDC アイデンティティプロバイダーの場所を指定します。これは OIDC 設定の重要な部分であり、Logto が必要なエンドポイントを発見するのに役立ちます。

これらの OIDC エンドポイントを手動で提供する代わりに、Logto は提供された発行者 URL を利用して IdP のディスカバーエンドポイントに呼び出しを行い、必要な設定と IdP エンドポイントを自動的に取得します。

発行者 URL を取得するには、アプリケーションの概要ページの Endpoints セクションで見つけることができます。

OpenID Connect metadata document エンドポイントを見つけ、URL をコピーします。この際、末尾のパス .well-known/openid-configuration は含めないでください。これは、Logto が OIDC 設定を取得する際に発行者 URL に .well-known/openid-configuration を自動的に追加するためです。

スコープ (Scope): OIDC 認証 (Authentication) プロセス中に Logto が要求する権限またはアクセスレベルを定義するスペースで区切られた文字列のリストです。スコープパラメータを使用して、Logto が IdP から要求する情報とアクセスを指定できます。

スコープパラメータはオプションです。カスタムスコープ設定に関係なく、Logto は常に openid、profile、および email スコープを IdP に送信します。

Save をクリックして設定プロセスを完了します。

ステップ 3: メールドメインを設定し、SSO コネクターを有効にする

コネクターの 体験 タブで、組織のメール ドメイン を提供してください。これにより、これらのユーザーに対する認証 (Authentication) 方法として SSO コネクターが有効になります。

指定されたドメインのメールアドレスを持つユーザーは、唯一の認証 (Authentication) 方法として SSO コネクターを使用することに限定されます。

Save your configuration

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

You don’t need to configure enterprise connectors individually, Logto simplifies SSO integration into your applications with just one click.

Navigate to: Console > Sign-in experience > Sign-up and sign-in.
Enable the "Enterprise SSO" toggle.
Save changes.

Once enabled, a "Single Sign-On" button will appear on your sign-in page. Enterprise users with SSO-enabled email domains can access your services using their enterprise identity providers (IdPs).

Auto detect SSO sign-in via email domain

To learn more about the SSO user experience, including SP-initiated SSO and IdP-initiated SSO, refer to User flows: Enterprise SSO.

Testing and Validation

Vanilla JS アプリに戻ります。これで Microsoft Entra ID OIDC enterprise SSO を使用してサインインできるはずです。お楽しみください！

Create an application in Logto​

Integrate Vanilla JS SDK​

インストール​

LogtoClient の初期化​

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

リダイレクト URI の設定​

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

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

リダイレクトの処理​

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

認証 (Authentication) ステータスの処理​

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

Add Microsoft Entra ID OIDC enterprise SSO connector​

Set up Azure AD SSO アプリケーション​

ステップ 1: Microsoft EntraID OIDC アプリケーションを作成する​

ステップ 2: Logto で Microsoft Entra ID OIDC SSO を設定する​

ステップ 3: メールドメインを設定し、SSO コネクターを有効にする​

Save your configuration​

Enable Microsoft Entra ID OIDC enterprise SSO connector in Sign-in Experience​

Testing and Validation​

Further readings​