5330-gigya

Gigya Make Your Site Socialを使ってTwitter、Facebookのアカウントでログイン

WordPressで会員制サイトを作ることがあると思います。2、3人の管理者がサイトの更新をするようなところであれば、WordPressのユーザー機能でアカウントを作成すれば済みます。しかし数百名規模もしくはそれ以上の不特定多数のユーザー(会員)に使ってもらうためにアカウントを新たに発行して管理するのは、小規模サイトではしんどいと思います。

Twitter、Facebookに代表されるソーシャルサービスでは、外部のWebサイトに、それらのサービスのアカウントを使ってサイトにログインする方法を提供しています。Twitterの@AnywhereやFacebook Connectなどがそうです。このようなログインサービス(「シングルサインオン」とも呼ばれます)を利用するメリットとして、ユーザー側には新たにアカウントを発行して、新しいパスワードを覚える必要がないこと、サイト側には、ユーザーのパスワードを管理しなくてもよいこと(つまりパスワード再発行の責任を負わなくて済むようになる)、が挙げられます。

ログインサービスには各サービスに対応した専用プラグインもありますが、ユーザーがどのサービスをメインに使っているかは、ユーザーの好みもありますので、色々なものから選択できるようになっているほうが親切です。実際、ブックマークボタンはサービスごとに用意しているサイトが多いですね。ログインでさまざまなソーシャルサービスに対応させるには、Gigyaが開発している「Make Your Site Social」プラグインを使います。

Gigya
Make Your Site Social

Make Your Site SocialのインストールとGigyaのレジストレーション

上のサイトからプラグインをダウンロードして、管理画面からインストールします。設定メニューにGigyaというメニューが追加されるので、そこから設定します。

このプラグインの設定を行うには、Gigyaが提供するAPI Keyが必要になりますので、上のリンクから同社のサイトにアクセスして、開発者登録します。ちなみに、開発者登録を行うのは無料で、非商用サイトであればサービスの利用も無料です。商用サイトで利用する場合はご注意ください。

上はGigyaのアカウント登録の画面です。アカウント登録のフィールドの上にソーシャルサービスのアイコンがずらーっと並んでいます。それぞれのアイコンはボタンになっていて、クリックすると、そのサイトに飛んで行き、そのサービスでのログインを求められます。Gigyaを使ったログインの流れを理解するために、実際に表示されているアイコンから選んでログインしてみましょう。各サービスでの認証後、メールアドレスの提供などが求められるので、必要に応じてOKを出します。認証が成功したら、またGigyaのサイトに戻り、下のような管理画面が表示されます。これでアカウントの作成は終わりです。簡単でしたよね?

Gigyaで認証するサイトの登録とAPI Keyの取得

Gigyaではソーシャルログイン以外にも、ソーシャルサービスを使う便利なサービスが色々提供されているので、設定できる項目が多数ありますが、ログインに関しては右上の「Sites」の設定だけ行います。上の例では既に2件のサイトが追加されていますが、初めて利用する場合は、もちろん何もエントリされてないはずなので、「Add Site」をクリックして、サイトを追加します。

ソーシャルログインを利用するサイトのドメイン名を聞かれますので入力します。OKボタンを押すと、Sites欄にドメイン名が追加されます。追加されたドメイン名の下に、Show API Keyのリンクが出るので、それをクリックしてAPI Keyを取得します。Secret KeyはSitesの下にあるShow Secret Keyのリンクを押して取得します。それぞれのキーは設定画面のフィールドに貼付けますので、クリップボードに保存するか、テキストに貼付けておいてください。

プラグインの設定

キーの取得が済んだら、WordPressの管理画面に戻り、プラグインの設定画面にそれぞれのキーを入力します。

Post Login Redirectはログイン後に任意のページに飛ばしたい時に設定します。なにも設定しなければ、ログイン後はダッシュボードが表示されます。Email required for registrationもオンのままでいいでしょう。

次に「外観」を設定します。こちらはブックマークボタンの設定のように、JavaScriptのコードをそのまま記入します。コードの生成は、Gigyaのサイトにログイン後、上の方に「PLUGINS」というメニューがあるので、それをクリックして、コード生成画面に行きます。

2. View でアウトプットを確認しながら、1. Customize Plugin Design を設定していきます。設定を変えると、3. Grab Code に設定に対応したコードが出力されます。上の例では、scriptタグを含めたコードが出力されていますが、WordPressの設定で必要になるのは、上の枠から「var conf=….」と下の枠から「var login_params=…」の部分だけです。

抜き出した2つのパラメーターをまとめると以下のようになります:

var conf=
{
    APIKey:'YOUR_API_KEY_HERE',
    enabledProviders:'twitter,facebook'
};
var login_params=
{
    showTermsLink:false,
    hideGigyaLink:true,
    headerText:'Or login using Twitter or Facebook',
    height:150,
    width:200,
    containerID:'componentDiv',
    UIConfig:'<config><body><controls><snbuttons buttonsize="42"></snbuttons></controls><background frame-color="#FFFFFF"></background></body></config>'
};

GigyaのPLUGINSであれこれいじるよりも、ドキュメントでパラメーターの内容を確認しながら、上のコードを修正した方が楽かもしれません。WordPressのログイン画面で奇麗に表示されるように見た目(UIConfigの所)も調整済みです。APIKeyにはご自身のキーを入れてください。enableProvidersの部分には、好きなソーシャルサービスを追加できます。サービス名をカンマで区切って入力してください。headerTextにはログインの説明を書きます。WordPressのログイン画面で表示されます。

設定を完了し、ログイン画面に行くと上のようなログインボタンが追加されます!

ログインしてみる!

早速、ソーシャルログインボタンを使ってログインしてみましょう。好きなボタンをクリックするだけでログインが始まります。

Twitterのボタンを押すと、上のような画面が表示されます。Twitterのアカウント名とパスワードを入力し、ログインボタンを押します。もしソーシャルログインをするユーザーが初めてログインする場合は、WordPressのアカウントを作ることになるので、事前にWordPress管理画面の「一般設定」で「誰でもユーザー登録ができるようにする」にチェックするのを忘れないでください。(わたしもよく忘れます。。。)

Twitterでのログインが成功したら、WordPressに戻り、しばらくした後にダッシュボードに遷移します。プロフィールを見るとTwitterから受け取ったユーザー情報がそれぞれのフィールドに入力されます。ウェブサイトのフィールドにはTwitterのアカウントのURLが入力されてしまいますが、新たにTwitterのURLのフィールドを作って、そちらに自動で入力するようなこともプラグインのコードを少しいじればできるようになります。Twitterでログインした場合、アバターもTwitterのプロフィール画像のURLが自動でアサインされます。アバターはWordPressのユーザー一覧で表示されるようになります。

各サービスから自動取得できるユーザー情報の一覧は以下のリンク先に詳しいです:

Products>Social Sign-on

これからWebサービスを作るなら、アカウント管理やログインなんかはソーシャルサービスに任せてしまって、サイト運用でラクしてみてはいかがでしょうか?

CAUTION!: Gigyaの2.0.4のプラグインだと、ソーシャルサービスでの認証から戻って来た時、WordPressのログイン画面で止まってしまうという現象が見られました。昔ダウンロードした1.2.2だと正常に動作することを確認しています。)