BuddyPressでソーシャルログインするプラグインSocial Loginの設定方法と使い方

スポンサーリンク

どうも!湿度の高い福島市でこの記事を書いている@xi10jun1です。

今回はですね、BuddyPressへソーシャルメディアからログインすることができるプラグイン「Social Login」について解説します。

以前ソーシャルログインとして使っていたプラグイン「Gianism」では相性が悪かったので、こっちにしました。

BuddyPressでソーシャルログインするプラグインSocial Loginとは

このプラグインは、ワードプレスのログインにソーシャルアカウントを用いることができるプラグインとなっています。

BuddyPressでもソーシャルログインの実装ができたので、bbpressでも使えるんじゃないですかね?

次のソーシャルアカウントでログインの実装をすることができます。

Amazon、Blogger、Disqus、Facebook、Foursquare、Github.com、Google 、Instagram、LinkedIn、LiveJournal、Mail.ru、Odnoklassniki、OpenID、PayPal、Reddit、Skyrock.com、StackExchange、Steam、Twitch.tv、Twitter、Vimeo、VKontakte、Windows Live、WordPress.com、Yahoo、YouTube

知らないのいっぱいあるなぁ(;^ω^)

今回はポピュラーなソーシャルログインとして、ツイッターでのログインを実装してみたいと思います。

ここからの流れをざっくり書くと、

  1. 「Social Login」を管理しているサイト「https://app.oneall.com/signup/にアクセスしてアカウントを作成
  2. APIキーを取得する
  3. プラグインにアカウントのAPIキーを設定する
  4. 実装したいソーシャルログインをプラグインの管理画面から設定する
  5. ソーシャルログイン(今回はツイッター)の連携アプリを作成してAPIキーとアクセストークンを取得し、https://app.oneall.comに設定する
  6. 実際にログインしてみる

少し長いので、頑張ってください!

スポンサーリンク

Social Loginの設定方法1:BuddyPressサイトにプラグインをインストール

まずは、「Social Login」プラグインをインストールして有効化します。

左メニューから「Social Login」と書かれているところをクリックすると管理画面に行きます。

BuddyPressログインSocial Loginの設定画像1

ここが設定画面になります。

そしたら、画面赤枠の「click here to setup your free account」をクリックして、Social Loginの管理サイトhttps://app.oneall.com/signup/にアクセスします。

Social Loginの設定方法2:管理サイトでアカウントを作成する

BuddyPressログインSocial Loginの設定画像2

はーい、がっつり英語ですよー!逃げちゃダメですからね。

ソーシャルアカウントかメールアドレスでアカウントを作成します。僕は念のため、右側の「Get Started!」からメールアドレスでアカウントを作成しました。

BuddyPressログインSocial Loginの設定画像3

Firstnameが名前、Lastnameが苗字ですが、名前とかは適当でOKです。

BuddyPressログインSocial Loginの設定画像4

Optionalとは任意という意味なので、ここは入力しなくてOKです。

そしたら、「Create my free account!」をクリックして次に進みます。

BuddyPressログインSocial Loginの設定画像5

これでアカウントの作成は完了しました。

続いて、APIキーを取得しますので、Create a new OneAll Siteをクリックしてください。

Social Loginの設定方法3:管理サイトでプラグインのAPIキーを取得する

BuddyPressログインSocial Loginの設定画像6

するとこのような画面になります。

ここはプラグインを使うサイトを登録して、APIキーを取得するための登録画面です。

画像のように、サイトの情報を入力してください。

BuddyPressログインSocial Loginの設定画像7

このようになればOK(チェックはデフォルトで入っているのでそのままでOK)です。

Create this Siteをクリックして先に進みます。

BuddyPressログインSocial Loginの設定画像8

Public KeyとPrivate Keyが表示されます。

これをコピペして、Social Loginプラグインに設定します。

Social Loginの設定方法4:プラグインにAPIキーを入力する

そしたら、一旦Social Loginプラグインの設定画面に戻ります。

BuddyPressログインSocial Loginの設定画像9

このようになればOKです。

Public KeyとPrivate Keyを間違えないようにだけしてください。

Verify API Settingsをクリックしたら、次は実装したいソーシャルログインの設定です。

Social Loginの設定方法5:実装したいソーシャルログインをプラグインの管理画面から選択

Social Loginの設定画面を下にスクロールしていくと、実装できるソーシャルログインが現れます。

BuddyPressログインSocial Loginの設定画像10

赤枠のチェック項目にチェックを入れて保存することで、ログインが実装できます。

ただし、このチェックを入れた項目によっては、先ほどのhttps://app.oneall.comでアプリの認証などを行う必要があります。今回実装予定のツイッターは、そのアプリ連携が必要となりますので、その設定を行います。

Social Loginの設定方法6:各ソーシャルの連携アプリを作成してAPIキーとアクセストークンを取得し、https://app.oneall.comに設定する

そしたら、https://app.oneall.comのAPIキーの画面から下にスクロールします。

BuddyPressログインSocial Loginの設定画像11

すると、各ソーシャルのメニューが右側にずらーっと出てきます。緑がログイン実装可能になっているソーシャル、赤が実装できないソーシャルとなっています。

今回設定するツイッターは赤色のままなので、ログインの実装はまだできません。ここから設定していきますので、Twitterと赤文字になったところをクリックしてください。

BuddyPressログインSocial Loginの設定画像12

すると、アカウントの設定画面に行きます。Setup ~ for Twitterをクリックしてください。

BuddyPressログインSocial Loginの設定画像13

ここはツイッターのアプリ連携について解説しているページとなります。

英語なので分かりにくいと思いますが、ざっくり書くと、

  • ツイッターで連携アプリを作る
  • APIとアクセストークンを取得してこのページに設定する

という作業になります。

ツイッターで連携アプリを作成する

まずはツイッターで連携アプリを作成しましょう。

PCでツイッターにアクセスし、アカウントのホーム画面から次の箇所を探してください。

BuddyPressログインSocial Loginの設定画像14

ここをクリックすると、ディベロッパー(開発者向け)ツール画面になります.

BuddyPressログインSocial Loginの設定画像15

下にスクロールして、上記赤枠のManage Your Appsをクリックします。

BuddyPressログインSocial Loginの設定画像16

するとこのような画面になりますので、Create New Appをクリックします。

BuddyPressログインSocial Loginの設定画像17

するとこのような画面になりますので、上記画像のように、各種設定をしていきます。

https://app.oneall.comの説明にも設定方法が書かれていますので、その通りに設定しました。

BuddyPressログインSocial Loginの設定画像18

チェックを入れて保存します。

※ツイッターの仕様変更により、ツイッターアカウントに電話番号が設定されていないと連携アプリの作成ができなくなっています。予め電話番号の認証をしてから連携アプリを作成してください。

次に、アプリのパーミッションの設定です。

BuddyPressログインSocial Loginの設定画像19

ここはread and writeにします。

そしたら、APIキーとアクセストークンが表示されている画面に行きます。

BuddyPressログインSocial Loginの設定画像20

ここに、連携アプリのAPIキーと

BuddyPressログインSocial Loginの設定画像21

アクセストークンが表示されていますので、これを先ほどのhttps://app.oneall.comのツイッターの設定画面にコピペします。

BuddyPressログインSocial Loginの設定画像22

先ほどの設定画面を下にスクロールすると、このような入力フォームがありますので、連携アプリのAPIキーとアクセストークンを入力して保存します。

BuddyPressログインSocial Loginの設定画像23

これで完了です!

次で最後です!

Social Loginの設定方法7:実際にログインしてみる

そしたら、実際にログインしてみましょう。

今回はツイッターで作成したので、ツイッターでログインしてみます。

BuddyPressログインSocial Loginの設定画像24

ワードプレスのログイン画面ですが、ツイッターのアイコンがありますよね。

ここからログインをすると、

BuddyPressログインSocial Loginの設定画像25

このような小窓が出てきます。ツイッターのアカウント名(@~の部分)と設定したパスワードを入力すれば、

BuddyPressログインSocial Loginの設定画像26

すぐに画面に入れました!

これでログインは完了しました!

ログインボタンをウィジェットに設定する

なお、このプラグインはログインボタンをウィジェットに設定することができます。

BuddyPressログインSocial Loginの設定画像27

このように、Social Loginと書かれたウィジェットメニューがありますので、ウィジェットに設定しましょう。

ウィジェットメニューの設定方法は割愛しますが、画像を見ればだいたいわかると思います。

BuddyPressログインSocial Loginの設定画像28

これで完璧!

まとめ:設定は面倒だけどBuddyPressとの相性は今のところ良い

ここまでの設定は非常に面倒ですが、冒頭で出たGianismを使っていたときのエラーは出ませんでした。

ただ、今のところ相性がいいだけなので、BuddyPressのプラグイン本体またはBuddyPress対応のテーマ、さらに各種アップデートによっては、急に相性が悪くなることが考えられます。

参考までに、このようなエラーがありました。

BuddyPressの投稿・お気に入り・フィルター等のエラーを直したい!BuddyPressの投稿・お気に入り・フィルター等のエラーを直したい!

とはいえ、フェイスブックやインスタグラムなど、日本での登録者の多いソーシャルも設定すれば使えますから、使い勝手の良いプラグインかもしれませんね。



スポンサーリンク

いつもシェアありがとうございます!(はてブだと嬉しいな)