WordPress で Facebook シングルサインオン (SSO) を OAuth で設定する

概要

WordPress 用の OAuth / OpenID Connect シングルサインオン (SSO) プラグインを使用すると、OAuth2 を使用して WordPress に Facebook ソーシャルメディアログイン (Facebook SSO) を簡単に設定できます。このプラグインは、他のさまざまなソーシャルメディアプロバイダーやカスタム OAuth および OIDC プロバイダーを使用して構成できます。ユーザープロファイル属性マッピング、ロールマッピングなどの高度なシングルサインオン (SSO) 機能をサポートしています。ここでは、WordPress と Facebook 間の SSO を構成する手順を説明します。このガイドの最後には、ユーザーは Facebook から WordPress にログインできるようになります。WordPress 用の OAuth シングルサインオン (OAuth & OpenID Connect Client) プラグインで提供されるその他の機能の詳細については、こちらをクリックしてください。

プラグインのダウンロード 料金プラン Free Trial

前提条件: ダウンロードとインストール

• WordPress インスタンスに管理者としてログインします。
• WordPress に移動します ダッシュボード -> プラグイン をクリックします。入力したコードが正しければ、MFAの設定は正常に完了します 新規追加.
• を検索 OAuthシングルサインオン（SSO）プラグイン WordPressの場合は、クリックしてください。 今すぐインストール.
• インストールしたら、をクリックします アクティブにしましょう.

WordPressへのFacebookシングルサインオン（SSO）ログインの設定手順

1. FacebookをOAuthプロバイダーとして設定する

• 始めるには、Facebook開発者コンソールにアクセスして、クリックします。 こちら Facebook開発者アカウントでサインアップ/ログインしてください。

• Facebook 開発者アプリのページに移動し、 アプリを作成する 新しいアプリを追加するボタン。

• それからを選択してください Facebook アカウントでのログインを許可する オプションをユースケースとして選択し、押す 次へ.

• 入力する アプリ名 (NAIST) と 連絡先メールアドレスを追加 お使いのFacebookアプリに応じて、次にクリックしてください。 アプリを作成する ボタンをクリックして設定を保存します。

• に行く アプリ設定 -> 基本 アプリ ID とアプリ シークレットを表示します。 の アプリケーションID あなたです 顧客ID アプリシークレット あなたです クライアントシークレットこれらの値は、後で miniOrange OAuth シングルサインオン SSO プラグインを設定する際に必要となるため、手元に保管しておいてください (以下の画像を参照してください)。
• アプリドメイン: そこにウェブサイトのドメイン名を入力してください。
• プライバシーポリシーのURL: この欄に、ウェブサイトのプライバシーポリシーページへのリンクURLを入力してください。
• 利用規約： この欄に、ウェブサイトの利用規約ページへのリンクとなるURLを入力してください。
• ユーザーデータの削除: ドロップダウンメニューから「データ削除手順URL」を選択します（サイト上でユーザーがアカウントを削除する方法に関する手順が記載されているページのURLを入力してください）。
• 選択する カテゴリ カテゴリフィールドのドロップダウンから、 アプリの目的 アプリを最もよく説明するオプションを選択して、 を押します 変更を保存 設定を保存する。

• 下にスクロールしてクリックします プラットフォームの追加 ボタン。 を選択 ウェブサイト ウェブサイトに Facebook ログインを統合しようとしている場合のオプションをクリックします。 次へ.

• 次に、 ウェブサイトのURL (miniOrange OAuth シングル サインオンから) そしてクリック Save。 次に、をクリックします。 続ける.

• 以下を行うには、 ユースケース 左側のタブをクリックし、 カスタマイズ の横に表示されるボタン 認証とアカウントの作成 項目。

• 以下 権限 セクション、 メール 許可して、 追加


デフォルトでは、アプリケーションには「public_profile」と「email」の権限に対する標準アクセスのみが付与されています。つまり、あなただけがそのアプリケーションでログインできます。高度なアクセスを取得するには、左側の「認証」タブから開始できるビジネス認証手続きを行う必要があります。

• 下 Facebookログイン >> 設定 セクションをクリック 設定に移動 リダイレクト/コールバックURLを追加するボタン。

• 〜に 有効な OAuth リダイレクト URI フィールドに追加 リダイレクト/コールバック URL これは、miniOrange OAuth シングル サインオン (SSO) プラグインから取得します。 クリック 変更を保存

• 現在、アプリは開発モードになっているため、社外のユーザーはアプリを使用できません。確認が完了したら、 稼働する タブをクリックしてアプリを公開します。 稼働する 右下隅にあるボタンをクリックしてください。ボタンを押す前に、「本番稼働」ページに記載されている手順を確認し、すべてが正しく設定されていることを確認することをお勧めします。

WordPressサイトにFacebookをソーシャルログイン（OAuthプロバイダー）として正常に設定しました。

ステップ2: WordPressをOAuthクライアントとして設定する

• Free
• プレミアムサーマルバッグ

• に行く OAuthの構成 タブをクリックして 新しいアプリケーションを追加 新しいクライアント アプリケーションを Web サイトに追加します。

• ここの OAuth / OpenID Connect プロバイダーのリストからアプリケーションを選択してください Facebook

• プロバイダーを選択したら、 コールバックURL これは、OAuth プロバイダーの SSO アプリケーション構成で構成する必要があります。
• 次のようにクライアント認証情報を入力します。 顧客ID & クライアントシークレット これはFacebookのSSOアプリケーションから取得できます。
• 設定については、以下の表を参照してください。 プラグイン内のFacebookエンドポイント.

アプリ名：	Facebook
エンドポイントを承認します:	https://www.facebook.com/dialog/oauth
アクセストークンエンドポイント:	https://graph.facebook.com/v2.8/oauth/access_token
ユーザー情報の取得エンドポイント:	https://graph.facebook.com/me/?fields=id,name,email,age_range,first_name,gender,last_name,link
範囲：	public_profile メールアドレス

• ソフトウェアの制限をクリック 次へ.

• 概要ページのすべての詳細を確認したら、 をクリックします。 仕上げ 設定を保存し、SSO 接続をテストします。

WordPressをOAuthクライアントとして正常に設定し、Facebookシングルサインオン（SSO）によるユーザー認証をWordPressサイトへのログインに利用できるようにしました。

• に行く OAuthの構成 タブをクリックしてアプリケーション名を検索し、新しいクライアントアプリケーションをウェブサイトに追加します。 Facebook

• 設定については、以下の表を参照してください。 プラグイン内のFacebookのスコープとエンドポイント.

範囲：	電子メールを特定する
エンドポイントを承認します:	https://www.facebook.com/dialog/oauth
アクセストークンエンドポイント:	https://graph.facebook.com/v2.8/oauth/access_token
ユーザー情報の取得エンドポイント:	https://graph.facebook.com/me/?fields=id,name,email,age_range,first_name,gender,last_name,link

• 転送プランを選択し、 交付金の種類 オプションのリストから選択してクリックします [設定の保存] 設定を保存します。

WordPressをOAuthクライアントとして正常に設定し、Facebookシングルサインオン（SSO）によるユーザー認証をWordPressサイトへのログインに利用できるようにしました。

ステップ3: ユーザー属性のマッピング

• ユーザー属性マッピングは、ユーザーが WordPress に正常にログインできるようにするために必須です。 以下の設定を使用して、WordPress のユーザー プロファイル属性を設定します。

ユーザー属性の検索:

• に行く OAuthの構成 タブ。 下にスクロールしてクリックします テスト構成.

• OAuthプロバイダーからWordPressに返されるすべての値が表形式で表示されます。メールアドレスやユーザー名などの値が表示されない場合は、OAuthプロバイダーで必要な設定を行い、これらの情報が返されるようにしてください。
• テスト構成にすべての値が表示されたら、次のページに進みます。 属性/役割のマッピング タブをクリックすると、ドロップダウンメニューに属性のリストが表示されます。

4. サインイン設定

• シングルサインオン（SSO）設定タブの設定は、シングルサインオン（SSO）のユーザーエクスペリエンスを定義します。WordPressページにFacebookログインウィジェットを追加するには、以下の手順に従ってください。

• WordPress 5.7以下
• WordPressの5.8
• WordPress 5.9以上

• に行く WordPress の左側のパネル > 外観 > ウィジェット.
• 選択 miniOrange OAuth。 好きな場所にドラッグ＆ドロップして保存します。

• に行く WordPress の左側のパネル > 外観 > ウィジェット.
• 選択 miniOrange OAuth。 好きな場所にドラッグ＆ドロップして保存します。

• WordPressページを開くと、Facebook SSOログインボタンが表示されます。これでFacebookシングルサインオン（SSO）をテストできます。

• ことを確認してください 「ログインページに表示」 オプションがアプリケーションで有効になっています。 (下の画像を参照してください)

• 今、あなたに行きます ワードプレスログイン ページで見やすくするために変数を解析したりすることができます。 (例: https://< your-wordpress-domain >/wp-login.php)
• そこにFacebook SSOログインボタンが表示されます。ログインボタンをクリックすると、Facebookシングルサインオン（SSO）をテストできます。

このガイドでは、 WordPress 用の OAuth シングルサインオン (OAuth & OpenID Connect Client) プラグインを使用して、Facebook を OAuth プロバイダー、WordPress を OAuth クライアントとして設定することで、 Facebook シングルサインオン (SSO)の設定を完了しました。このソリューションにより、Facebook のログイン認証情報を使用して WordPress サイトへの安全なアクセスを数分以内に展開できるようになります。

関連記事

• OAuth 2.0とは何ですか?
• FacebookとのOAuth認証
• よくある質問（FAQ）