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

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

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

この記事では、WordPress プラグイン と Logto を使用して、Xiaomi サインイン体験（ユーザー認証 (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 クイックスタート を参照してください。

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

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

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

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

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

Xiaomi OAuth app を設定する​

はじめに​

  1. Xiaomi Open Platform で開発者アカウントを作成します
  2. Xiaomi アカウントサービス にアクセスします
  3. アプリケーションをまだお持ちでない場合は、新しいアプリケーションを作成します

Xiaomi OAuth アプリケーションの設定​

  1. Xiaomi アカウントサービス にアクセスします
  2. OAuth 設定を構成します：
    • ログインに使用したいアプリケーションを開き、「Callback URL」をクリックします（コールバック URL を編集していない場合、「Enabled」と表示されます）
    • 認可 (Authorization) コールバック URL を追加します：${your_logto_origin}/callback/${connector_id}
    • connector_id は Logto コンソールのコネクター詳細ページの上部で確認できます
  3. アプリケーション詳細ページから AppID と AppSecret を取得します
  4. Logto コンソールの clientId および clientSecret フィールドに、手順 3 で取得した値を入力します
  5. オプション設定：
    • skipConfirm: ユーザーがすでに Xiaomi アカウントにログインしている場合に Xiaomi 認可 (Authorization) 確認ページをスキップするかどうか。デフォルトは false です

スコープ (Scope) の説明​

デフォルトでは、コネクターは次のスコープ (Scope) をリクエストします：

  • 1: ユーザープロファイルの読み取り

利用可能なスコープ (Scope)：

Scope 値説明API インターフェース
1ユーザープロファイルの取得user/profile
3ユーザー open_id の取得user/openIdV2
1000Xiaomi ルーター情報の取得Mi Router
1001すべての Xiaomi ルーター情報へのアクセスMi Router
2001Xiaomi クラウドカレンダーへのアクセスMi Cloud
2002Xiaomi クラウドアラームへのアクセスMi Cloud
6000Mi Home スマートホームサービスの利用Mi Home
6002サードパーティデバイスを Mi Home へ追加Mi Home
6003Alexa で Xiaomi デバイスを操作Mi Home
6004サードパーティサービスによる Xiaomi デバイスアクセスMi Home
7000イエローページサービスアカウントのフォローMi Cloud
11000Xiaomi クラウド写真の取得Mi Cloud
12001アプリデータを Mi Cloud へ保存Mi Cloud
12005ヘルス ECG サービスの利用Health
16000Mi Wallet パスの取得app/get_pass
20000XiaoAI 音声サービスの有効化XiaoAI
40000クラウド AI サービスの有効化内部利用

複数のスコープ (Scope) を設定する場合は、スペースで区切って指定します。例：1 3 6000

Xiaomi コネクターのテスト​

これで完了です。サインイン体験で ソーシャルサインインを有効化 するのを忘れずに行ってください。

設定を保存する​

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

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

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

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

テストと検証​

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

さらなる読み物​

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

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

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

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