WordPressにソーシャルログインを実装する国産プラグイン「Gianism」の設定方法

WordPressの管理画面に主要SNSアカウントでログインできるようになる
「Gianism（ジャイアニズム）」という面白いネーミングのプラグインを
みつけましたので、設定方法を解説しておきます。

Gianismとはどんなプラグインなのか

「Gianism」とは、各種ソーシャルメディアに登録したユーザー情報を受け取り、
その情報でログインできるユーザーを自動で作成するプラグインです。

「Gianism（ジャイアニズム）」という特徴的な名前と、
「おまえのユーザーはおれのユーザー」というキャッチフレーズが
とてもセンスを感じるネーミングで目に止まりました。

「Gianism」を使用すると、下記のように

WordPressのログイン画面にFacebook、Twitter、Googleなどの
ログインボタンで管理画面にログインできるようになります。

これはWordPressで会員制サイトを運営している場合などに、
ユーザーが新たにアカウント情報を登録する手間が省けるため、
ユーザービリティや顧客満足度の向上に繋がります。

Gianismは、現在は下記SNSに対応ということになっています。

• Facebook
• Twitter
• Google
• mixi
• Yahoo! JAPAN

しかし、mixiとYahooに関してはエラーになり登録できませんでしたので、
今回はそれ以外の設定を「Gaianism」を有効化後の状態からの解説していきます。

Gianismプラグイン：Facebookログインボタン設定編

まずはFacebookの設定方法から解説していきます。
「Gianism」でFacebookログインを実装するためには、
Facebookアカウントだけでなく、「Facebook開発者」登録が必要になります。

まずFacebookアカウントにログインした状態で、Facebook developersにアクセスし、画面上の「アプリ」を押してください。

私のアカウントはすでに開発者登録済みですので、
このあとの流れは下記の記事を参照して開発者登録を完了させてください。
facebook開発者（Developer）への登録

開発者登録を完了したら、ログイン機能実装のために必要なFacebookアプリを登録します。

アプリページの「Create New App」ボタンをクリックして、
「新しいアプリを作成」画面に移動してください。

「Display Name」欄に任意の名前(ブログタイトル等)を入力し、
ご自分のブログに近いカテゴリを適当に選択し、
「アプリケーションを作成」ボタンをクリックします。

クリック後、セキュリティチェックが要求されるので、
画像にあるアルファベットを入力し、送信ボタンを押してください。
セキュリティチェックに問題がなければ、
アプリ登録はこれで完了となり、作成したアプリのTOPページに移動します。

左メニューの「設定」をクリックして、
「サイトURL」を入力して「変更を保存」してください。

それと、このページ上部にある、

• アプリケーションID
• アプリのシークレットキー

が「Gianism」の登録に必要なのでメモしておいてください。
これで、Facebook側の作業は終了です。

次に、Wordpressの設定画面に移動します。
メニューのユーザーから「外部サービス連携」を選択してください。

「Facebookと接続」欄で「有効」を選択して、
「App ID」にさきほどメモした「アプリケーションID」を入力し、
「アプリの秘訣」欄に「アプリのシークレットキー」を入力後、設定を保存してください。

その後、Wordpressをログアウトすると、
ログイン画面にFacebookでログインボタンが表示されるようになります。

設定に問題がなければ、このFacebookでログインボタンを押した後、
FacebookのログインIDとパスワードの入力が求められ、
ログイン後、認証を許可するかどうかを求められます。

そして、認証許可後に自動で新しいユーザーが作成され、
そのユーザーのプロフィール画面に移動します。
これで、GianismによるFacebookログイン機能の設定完了です。

Gianismプラグイン：Twitterログインボタン設定編

次はTwitterの設定です。

まだ登録していない場合はTwitter公式サイトでアカウントを作成してから、
開発用ページにアクセスしてログインしてください。
そして、マイアプリページにある「Create a new application」をクリックします。

各項目には下記の情報を入力してください。

「Name」 → このアプリの名前(ブログタイトル等)
「Description」 → このアプリの説明文
「Website」 → サイトのルートURL
「CallbackURL」 → サイトのルートURL

入力後、画面下部にある「Yes, I agree」をチェックし、
キャプチャの文字と数字を入力した後、
「Ceate your Twitter application」ボタンをクリックしてください。
これで、Twitterアプリの登録は完了です。

登録完了後に表示された画面の「Create My Access Token」ボタンを
クリックすると下記の画面に移動します。

• 「Consumer Key」
• 「Consumer Secret」
• 「Access Token」
• 「Access token」 secret

の4項目は後で必要になるので、保存しておいてください。
これで、Twitter側での設定は終了です。

次に、Wordpressの設定画面に移動し、
左メニューの「ユーザー」から「外部サービス連携」を選択してください。

「Twitterと接続」欄で「有効」を選択し、
スクリーン名にはTwitterアカウント名などのわかりやすい識別名を入力して、
それ以外の項目には先ほど保存した情報をそれぞれ入力して設定を保存してください。

その後、Wordpressをログアウトすると、
ログイン画面にTwitterでログインボタンが表示されるようになります。

これでGianismによるTwitterログイン機能の設定完了です。

Gianismプラグイン：Googleログインボタン設定編

最後はGoogleの設定です。

まだアカウント登録していない場合はGoogleアカウントを作成し、
その後、Google Console APIに移動してください。
そして、移動後のページで、「Create Project…」ボタンをクリックしてください。

左メニューの「API Access」を選択して、
「Create an OAuth 2.0 Client ID」をクリックしてください。

「Product Name」にこのアプリの名前(ブログタイトル等)を入力し、
「Home Page URL」にサイトのルートURLを入力し、
「Next」ボタンをクリックしてください。

「Aplication Type」は「Web Application」を選択してください。

その下の「Your site or hostname」は、
ログイン時にSSLを使用する場合はプロトコルをhttpsにして、
それ以外はhttpを選択して、サイトのルートURLを入力した後、
「Create client ID」をクリックすればアプリの登録は完了です。

登録完了後の上記画面に表示されている

• Client ID
• Client Secret

の2項目が必要になるので、保存しておいてください。
これでGoogle側での設定は終了です。

次に、Wordpressの設定画面に移動し、
メニューの「ユーザー」から「外部サービス連携」を選択してください。

「Googleと接続」欄で「有効」を選択し、
リダイレクトURIにサイトのルートURLを入力して、
それ以外の項目には先ほど保存した情報をそれぞれ入力して設定を保存してください。

その後、Wordpressをログアウトすると、
ログイン画面にGoogleでログインボタンが表示されるようになります。

これで、GianismによるGoogleログイン機能の設定完了です。

以上が、Facebook、Twitter、Googleアカウントを使った
ソーシャルログインボタンの実装方法の解説です。

ちなみに、外部サービス連携の「カスタマイズ」タブをクリックすると、
細かなカスタマイズ方法が日本語で解説されています。
色々カスタマイズしてみたい人はそちらを参照してみてください。

管理画面内にカスタマイズ方法が日本語で解説されていたり、
プラグインの作者と日本語でやり取りできるのは国産プラグインの強みですね。