Wordpressで会員制サイトを構築してみよう（GianismでSNS連携）


"Gianism" というプラグインを利用すると、最近流行りのSNS連携を利用したログインを簡単に実装することができます。今回はFacebookとの連携を試してみます。

##元記事
下記エントリの転載になります。
[WordPressで会員制サイトを構築してみよう（GianismでSNSログイン）](http://www.rokurofire.info/2014/10/09/wp_membership7/)

##利用プラグイン

* **[Gianism](https://wordpress.org/plugins/gianism/)**<br>バージョン 2.2.1 で試しています

こちらの製作者さんは日本人で、プラグインの更新頻度も高いです。

##Facebookの事前設定

###Facebookアプリの作成
SNSログインを行うには、事前にFacebook Developersにてアプリの申請が必要になります。
まずDevelopersサイトにログインして、「Add a New App」を選択します。

![register8-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/10172/8a0c7338-39f7-cb9b-bc56-b3ad01bccb8e.jpeg "register8-1.jpg")

今回はWebサイトへのログインなので、一番右の「Webサイト」を選択します。

![register8-2.jpg](https://qiita-image-store.s3.amazonaws.com/0/10172/2cc54380-fb7a-0efd-e06d-f8362f7d53c2.jpeg "register8-2.jpg")

サイト名を記述し、「Create〜」ボタンを押します。

![register8-3.jpg](https://qiita-image-store.s3.amazonaws.com/0/10172/f953b502-e55c-bf16-93ca-f9be41fc1840.jpeg "register8-3.jpg")

「カテゴリを選択」部分で、作成するサイトが属するカテゴリを選択します。

![register8-4.jpg](https://qiita-image-store.s3.amazonaws.com/0/10172/650926f5-8129-e35a-09cb-e5eec17af658.jpeg "register8-4.jpg")

次に表示される「 **Setup the Facebook SDK for JavaScript**」欄にあるスクリプトのコードを、bodyタグの直後に記述します。
（xxxxxxxxxxxxxxxx 部分は固有のAppIDが入ります）

```myscript.js
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'xxxxxxxxxxxxxxxx',
      xfbml      : true,
      version    : 'v2.1'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
```

その下に表示される「 **Tell us about your website**」欄に、作成するサイトのURLを記入します。

※ この時、「localhost〜」などのURLはバリデーションに引っかかります。ローカルで試す場合も「www.hogehoge.com」のような形式でホスト名を設定しましょう。


ここまで設定したら、右上にある「Skip Quick Start」で、作成したアプリのページへ遷移します。

###Facebookアプリの設定

作成したアプリのページに行くと、下記のようになっていると思います。

![register8-5.jpg](https://qiita-image-store.s3.amazonaws.com/0/10172/e4ecdc3d-a079-0993-15a8-5af194913591.jpeg "register8-5.jpg")

左の「Settings」ボタンを押して、下記のページに行きます。
そこで「App Domains」「Contact Email」を入力します。

App Domains・・・サイトURLのドメイン
Contact Email・・・管理者のメールアドレス等

![register8-6.jpg](https://qiita-image-store.s3.amazonaws.com/0/10172/ff5b9292-9368-64b5-81f6-706fe243bba4.jpeg "register8-6.jpg")

左の「Status & Review」を押して、アプリのステータスを変更します。
右側にあるスイッチを「YES」に変更します。

![register8-7.jpg](https://qiita-image-store.s3.amazonaws.com/0/10172/7fcc2e0e-39f8-890e-515c-258446f60cc6.jpeg "register8-7.jpg")


これでFBアプリの設定は完了です。
この後Gianismの設定を行いますが、この後利用する AppID、AppSecret をメモしておきましょう。

##Gianismの設定

WordPressの管理画面に戻り、Gianismの設定を行います。
「Facebook」の設定欄で、「Facebookとの接続」「App ID」「アプリの秘訣（AppSecret）」を入力し、変更を保存します。

![register8-8.jpg](https://qiita-image-store.s3.amazonaws.com/0/10172/81c270f5-23c4-6f38-d508-4e968f54f86c.jpeg "register8-8.jpg")

設定後、ログイン画面を見ると、下記のようにFacebookボタンが追加されています。

![register8-9.jpg](https://qiita-image-store.s3.amazonaws.com/0/10172/33d1798f-9e9c-9ab8-ce1b-a80699300974.jpeg "register8-9.jpg")

これでとりあえず完了です。簡単に実装できてしまいましたね。
このFacebookボタンを押すと、Facebook連携での会員登録が行われます。

ユーザー名（user_login）は自動でランダム？な文字列（fb-xxxxxxxxxxxxxxx）になり、メールアドレス（user_email）は、Facebookに登録されているメールアドレスが格納されます。

##ログインボタンの位置を変更する

Theme My Loginを利用したメールアドレスでの会員登録と、Gianismを利用した会員登録の2種類が混在している状態です。
この表示ではユーザーが混乱するため、表示を調整する必要があります。

まず、Gianismの「Facebook」設定画面で「ログインボタンを表示しない。」を選択し、ログイン画面からFacebookボタンが消します。
任意の位置にボタンを表示するには、下記記述をテンプレート内に入れればOKです。

```
<?php
if(function_exists('gianism_login')){
    gianism_login();
}
?>
```

##Facebook登録情報を追加で取得する

デフォルトでは、ユーザー名、メールアドレスのみが登録されるようですが、追加で情報を取得することができます。

フックを利用し、Facebookアカウントに登録されている、姓「last_name」名「first_name」の情報も取得してみます。

```functions.php
/* gianism 登録時の処理 */
function additional_info( $user_id, $data, $service, $on_creation ){
	// 既存ユーザーの場合は処理せず
	if ( is_user_logged_in() ) return;

	switch ( $service ) {
		case 'facebook' :
			/* first_name, last_name 更新 */
			if( !empty( $data['first_name'] ))	update_user_meta( $user_id, 'first_name', $data['first_name']);
			if( !empty( $data['last_name']  ))	update_user_meta( $user_id, 'last_name',	$data['last_name']);
		break;
	}
}
add_action('wpg_connect', 'additional_info', 10, 4);
```



今回はFacebook連携ですので、$service が "facebook" の時の分岐を書いています。

また、どんな項目が追加で取得できるかは、下記Graph API Referenceが参考になると思います。
（実際に取得できるかどうかは試す必要があります）

（参考）[Graph API Reference User /user](https://developers.facebook.com/docs/graph-api/reference/v2.1/user) 


これで、会員登録時にユーザーの姓名も追加できるようになりました。