メインコンテンツまでスキップ
新しい友達のために:

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

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

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

前提条件

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

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

あなたの 従来のウェブ アプリケーションを作成するには、次の手順に従ってください：

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

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

WordPress SDK を統合する​

プラグインのインストール​

  1. プラグイン > 新規追加 に移動します。
  2. 「Logto」を検索するか、検索ボックスに https://wordpress.org/plugins/logto/ を入力します。
  3. 今すぐインストール をクリックします。
  4. 有効化 をクリックします。

プラグインの設定​

これで、WordPress 管理パネルのサイドバーに Logto メニューが表示されるはずです。Logto > 設定 をクリックしてプラグインを設定します。

注記:

プラグインを設定する前に、Logto コンソールで 従来のウェブ アプリケーションを作成しておく必要があります。まだ作成していない場合は、Logto をアプリケーションに統合する を参照してください。

プラグインを開始するための最小限の設定は次のとおりです：

  • Logto エンドポイント：Logto テナントのエンドポイント。
  • アプリ ID：Logto アプリケーションのアプリ ID。
  • アプリシークレット：Logto アプリケーションの有効なアプリシークレットのいずれか。

すべての値は Logto コンソールのアプリケーション詳細ページで見つけることができます。

値を入力したら、変更を保存 をクリックします（ボタンが見つからない場合はページの下までスクロールしてください）。

リダイレクト URI の設定​

リダイレクト URI は、ユーザーが認証された後に Logto がリダイレクトする URL です。また、サインアウト後のリダイレクト URI は、ユーザーがログアウトした後に Logto がリダイレクトする URL です。

サインインフローを説明する非規範的なシーケンス図はこちらです：

サインアウトフローがどのように見えるかを示す非規範的なシーケンス図はこちらです：

リダイレクトが必要な理由について詳しくは、サインイン体験の説明 を参照してください。

この場合、Logto コンソールで両方のリダイレクト URI を設定する必要があります。リダイレクト URI を見つけるには、WordPress 管理パネルの Logto > 設定 ページに移動します。リダイレクト URI と サインアウト後のリダイレクト URI フィールドが表示されます。

  1. リダイレクト URI と サインアウト後のリダイレクト URI の値をコピーし、Logto コンソールの リダイレクト URI と サインアウト後のリダイレクト URI フィールドに貼り付けます。
  2. Logto コンソールで 変更を保存 をクリックします。

チェックポイント：WordPress ウェブサイトのテスト​

これで、WordPress ウェブサイトで Logto の統合をテストできます：

  1. 必要に応じてシークレットブラウザウィンドウを開きます。
  2. WordPress ウェブサイトを訪問し、該当する場合は ログイン リンクをクリックするか、直接ログインページ（例：https://example.com/wp-login.php）にアクセスします。
  3. ページは Logto サインインページにリダイレクトされるはずです。
  4. サインインまたはサインアッププロセスを完了します。
  5. 認証が成功すると、WordPress ウェブサイトに戻り、自動的にログインされるはずです。
  6. ログアウト リンクをクリックして WordPress ウェブサイトからログアウトします。
  7. Logto サインアウトページにリダイレクトされ、その後 WordPress ウェブサイトに戻るはずです。
  8. WordPress ウェブサイトからログアウトされているはずです。

WordPress プラグインの設定について詳しく知るには、 WordPress クイックスタート を参照してください。

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

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

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

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

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

Facebook login を設定する​

Facebook デベロッパーアカウントを登録する​

まだアカウントを持っていない場合は、Facebook デベロッパーとして登録 してください。

Facebook アプリを設定する​

  1. Apps ページにアクセスします。
  2. 既存のアプリをクリックするか、必要に応じて新しいアプリを作成 します。
    • 選択する アプリタイプ は任意ですが、Facebook Login プロダクトを含んでいる必要があります。
  3. アプリダッシュボードページで、「Add a product」セクションまでスクロールし、「Facebook Login」カードの「Set up」ボタンをクリックします。
  4. Facebook Login クイックスタートページをスキップし、サイドバー -> 「Products」 -> 「Facebook Login」 -> 「Settings」をクリックします。
  5. 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}
  6. 右下隅の「Save changes」ボタンをクリックします。

コネクター JSON を作成する​

  1. Facebook アプリダッシュボードページで、サイドバー -> 「Settings」 -> 「Basic」をクリックします。
  2. パネルに「App ID」と「App secret」が表示されます。
  3. App secret 入力ボックスの「Show」ボタンをクリックして、その内容をコピーします。
  4. Logto コネクター設定を入力します：
    • clientId フィールドに App ID の文字列を入力します。
    • clientSecret フィールドに App secret の文字列を入力します。
    • scope フィールドに、カンマまたはスペースで区切られた 権限 のリストを文字列で入力します。スコープを指定しない場合、デフォルトのスコープは email,public_profile です。

Facebook のテストユーザーでサインインをテストする​

開発およびライブの アプリモード の両方で、関連するアプリでのサインインをテストするために、テスト、開発者、および管理者ユーザーのアカウントを使用できます。

また、アプリを直接 ライブにする ことで、任意の Facebook ユーザーがアプリでサインインできるようにすることもできます。

  • アプリダッシュボードページで、サイドバー -> 「Roles」 -> 「Test Users」をクリックします。
  • 「Create test users」ボタンをクリックしてテストユーザーを作成します。
  • 既存のテストユーザーの「Options」ボタンをクリックすると、「名前とパスワードの変更」などの操作が表示されます。

Facebook サインイン設定を公開する​

通常、開発モード では、テスト、管理者、および開発者ユーザーのみが関連するアプリでサインインできます。

本番環境で通常の Facebook ユーザーがアプリでサインインできるようにするには、アプリタイプに応じて、Facebook アプリを ライブモード に切り替える必要があるかもしれません。例えば、純粋な ビジネスタイプ のアプリには「ライブ」スイッチボタンがありませんが、使用を妨げることはありません。

  1. Facebook アプリダッシュボードページで、サイドバー -> 「Settings」 -> 「Basic」をクリックします。
  2. 必要に応じて、パネルの「Privacy Policy URL」と「User data deletion」フィールドを入力します。
  3. 右下隅の「Save changes」ボタンをクリックします。
  4. アプリのトップバーで「Live」スイッチボタンをクリックします。

設定タイプ​

名前タイプ
clientIdstring
clientSecretstring
scopestring

設定を保存する​

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

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

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

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

テストと検証​

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

さらなる読み物​

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

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

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

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