How to build Google Workspace enterprise SSO with Vanilla JS

新しい友達のために:

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

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

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

前提条件

稼働中の Logto インスタンス。紹介ページをチェックして始めてください。
Vanilla JS の基本的な知識。
使用可能な Google Workspace 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/browser@2.2.13/+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 Google Workspace enterprise SSO connector

アクセス管理を簡素化し、大規模なクライアント向けにエンタープライズレベルの保護を得るために、Vanilla JS をフェデレーテッドアイデンティティプロバイダーとして接続します。Logto エンタープライズシングルサインオン (SSO) コネクターは、いくつかのパラメーター入力を許可することで、この接続を数分で確立するのに役立ちます。

エンタープライズ SSO コネクターを追加するには、次の手順に従ってください：

Logto コンソール > エンタープライズ SSO に移動します。

「エンタープライズコネクターを追加」ボタンをクリックし、SSO プロバイダーのタイプを選択します。Microsoft Entra ID (Azure AD)、Google Workspace、Okta の事前構築されたコネクターから選択するか、標準の OpenID Connect (OIDC) または SAML プロトコルを使用してカスタム SSO 接続を作成します。
一意の名前を指定します（例：Acme Company の SSO サインイン）。

「接続」タブで IdP と接続を構成します。各コネクタータイプのガイドを上記で確認してください。

「体験 (Experience)」タブで SSO 体験と企業の メールドメイン をカスタマイズします。SSO 対応のメールドメインでサインインするユーザーは、SSO 認証にリダイレクトされます。

変更を保存します。

Set up Google Cloud Platform

ステップ 1: Google Cloud Platform で新しいプロジェクトを作成する

Google Workspace を認証 (Authentication) プロバイダーとして使用する前に、Google API Console でプロジェクトを設定し、OAuth 2.0 資格情報を取得する必要があります。すでにプロジェクトがある場合は、このステップをスキップできます。そうでない場合は、Google 組織の下で新しいプロジェクトを作成してください。

新しい OIDC 資格情報を作成するには、アプリケーションの同意画面を設定する必要があります。

OAuth 同意画面ページに移動し、Internal ユーザータイプを選択します。これにより、OAuth アプリケーションは組織内のユーザーのみが利用可能になります。

ページの指示に従って Consent Screen 設定を入力します。次の最低限の情報を提供する必要があります：

アプリケーション名：アプリケーションの名前です。同意画面に表示されます。
サポートメール：アプリケーションのサポートメールです。同意画面に表示されます。

アプリケーションの Scopes を設定します。ユーザーのアイデンティティ情報とメールアドレスを IdP から適切に取得するために、Logto SSO コネクターは IdP から次のスコープを付与する必要があります：

openid：このスコープは OIDC 認証 (Authentication) に必要です。ID トークンを取得し、IdP の userInfo エンドポイントにアクセスするために使用されます。
profile：このスコープはユーザーの基本的なプロフィール情報にアクセスするために必要です。
email：このスコープはユーザーのメールアドレスにアクセスするために必要です。

Save ボタンをクリックして同意画面の設定を保存します。

ステップ 3: 新しい OAuth 資格情報を作成する

Credentials ページに移動し、Create Credentials ボタンをクリックします。ドロップダウンメニューから OAuth client ID オプションを選択して、アプリケーション用の新しい OAuth 資格情報を作成します。

次の情報を入力して OAuth 資格情報の設定を続行します：

アプリケーションタイプとして Web application を選択します。
クライアントアプリケーションの Name を入力します。例えば、Logto SSO Connector。これにより、将来的に資格情報を識別するのに役立ちます。
Authorized redirect URIs に Logto のコールバック URI を入力します。これは、Google が認証 (Authentication) に成功した後にユーザーのブラウザをリダイレクトする URI です。ユーザーが IdP での認証に成功した後、IdP はユーザーのブラウザをこの指定された URI に認可 (Authorization) コードと共にリダイレクトします。Logto は、この URI から受け取った認可 (Authorization) コードに基づいて認証 (Authentication) プロセスを完了します。
Authorized JavaScript origins に Logto コールバック URI のオリジンを入力します。これにより、あなたの Logto アプリケーションのみが Google OAuth サーバーにリクエストを送信できるようになります。
Create ボタンをクリックして OAuth 資格情報を作成します。

ステップ 4: クライアント資格情報で Logto コネクターを設定する

OAuth 資格情報の作成に成功すると、クライアント ID とクライアントシークレットが表示されるプロンプトモーダルが表示されます。

Client ID と Client secret をコピーし、Logto の SSO コネクターの Connection タブの対応するフィールドに入力します。

これで、Logto 上で Google Workspace SSO コネクターの設定が完了しました。

ステップ 5: 追加のスコープ (オプション)

Scope フィールドを使用して、OAuth リクエストに追加のスコープを追加します。これにより、Google OAuth サーバーからより多くの情報を要求できます。詳細については、 Google OAuth Scopes ドキュメントを参照してください。

カスタムスコープ設定に関係なく、Logto は常に openid、profile、および email スコープを IdP に送信します。これは、Logto がユーザーのアイデンティティ情報とメールアドレスを適切に取得できるようにするためです。

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

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

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

Google Workspace SSO コネクターの詳細については、 Google OpenID Connector をご確認ください。

Save your configuration

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

エンタープライズコネクターを個別に設定する必要はありません。Logto は、ワンクリックでアプリケーションに SSO 統合を簡素化します。

移動先： Console > サインイン体験 > サインアップとサインイン。
「エンタープライズシングルサインオン (SSO)」トグルを有効にします。
変更を保存します。

有効にすると、サインインページに「シングルサインオン (SSO)」ボタンが表示されます。SSO が有効なメールドメインを持つエンタープライズユーザーは、エンタープライズアイデンティティプロバイダー (IdP) を使用してサービスにアクセスできます。

SP 主導の SSO や IdP 主導の SSO を含む SSO ユーザー体験について詳しくは、ユーザーフロー：エンタープライズ SSO を参照してください。

Testing and Validation

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

Create an application in Logto​

Integrate Vanilla JS SDK​

インストール​

LogtoClient の初期化​

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

リダイレクト URI の設定​

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

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

リダイレクトの処理​

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

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

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

Add Google Workspace enterprise SSO connector​

Set up Google Cloud Platform​

ステップ 1: Google Cloud Platform で新しいプロジェクトを作成する​

ステップ 2: アプリケーションの同意画面を設定する​

ステップ 3: 新しい OAuth 資格情報を作成する​

ステップ 4: クライアント資格情報で Logto コネクターを設定する​

ステップ 5: 追加のスコープ (オプション)​

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

Save your configuration​

Enable Google Workspace enterprise SSO connector in Sign-in Experience​

Testing and Validation​

Further readings​