TPソーシャルメディアを使ってXOOPS CubeにTwitterログインする

富士見高原スキー場でクロールする雲

富士見高原スキー場でクロールする雲

TPソーシャルメディアとは、Facebookやtwitterのログインを使ってXOOPS Cubeにログイン出来るモジュールです。RYUSサイトで配布しています。

前回、TPソーシャルメディアを使ってXOOPS CubeにFacebookログインする でTPソーシャルメディアによるFacebookログインについて書きました。今回は同じく、Twitterログインについて書きたいと思います。

TPソーシャルメディアのインストールは前回で終了してますので、Twitterログインの設定だけです♪

Twitterアプリのkeyとsecretを取得する

Twitter デベロッパーページに行きます。

Twitter デベロッパーページ

Image

右上にある Sign in をクリックして、

Image

自分のidとパスワードを入れてサインインしてください。

Image

↓サインインした画面。右上に自分のアイコンが出ています。

Image

右上の自分のアイコンの上にカーソルを置くと、

Image

リストが出ますので、 My applications をクリックします。

Image

Twitter Apps ページに来ますので、 Create New App をクリックします。

Image

Create an application ページです。ここで XOOPS CubeでTwitterログインをさせるために必要な情報を入れていきます。

Image

入力は4カ所です。

1:Name ログインするときに表示される名前を入れます
2:Description 説明を入れます。面倒なのでNameとおなじにしちゃいました
3:Website このアプリケーションの公的なホームページを入れるようです。Twitterログインをする人がどんな人が作ったアプリケーションなのか、信頼性を得るために見るって感じでしょうか。自分のサイトのurlを入れればいいかと思います。
4:Callback URL ここが一番重要です。コールバックされるurlです。つまり、ログインしたら戻る所なので Twitterログインを使うXOOPS Cubeサイトのurl を入れます。トップのurlでいいです。
注意点としてローカルでテストをする際は、 localhost ではなく 127.0.1.1 (環境によって変わるかもしれません) としないと私の環境では動作しませんでした。通常のローカルでないurlならそのまま入れればいいです。

入力が済んだら、許諾条件を読んで

Image

Yes, I agree にチェックを入れて Create your Twitter application ボタンをクリックします。

Image

作成されました。API Keys タブをクリックすると、

Image

key(API key) と secret(API secret) が確認できます。これらはXOOPS Cubeの設定で使いますのでコピーペーストして保存しておきます。

TPソーシャルメディアのTwitterログイン設定をする

XOOPS Cube管理画面の左ブロックで、

Image

SocialMedia をクリックします。

Image

twitter行の KeyとSecretに先ほど保存しておいた、key(API key) と secret(API secret)を貼り付けて 登録する をクリックします。

Twitterログインをしてみる!

これで設定は終わりました。ログアウトしてトップページを見てください。

Image

このようにログインの下部に、 Twitterでログイン というボタンが表示されています。

Twitterアカウントと既存のXOOPS Cubeユーザーを結びつけてみる

Twitterでログインボタンをクリックすると、このような画面が表示されます
TwitterにログインしていないときはTwitterのログインが間に入ります。

Image

連携アプリを認証 をクリックします。

Image

一瞬この画面が表示され、

Image

XOOPS Cubeのこの画面が表示されます。

既存のXOOPS CubeユーザーにTwitterログインをひもづけたいので、左側の「このサイトにアカウントをお持ちの方はログインしてください」のログインを使います。

XOOPS Cubeのユーザ名とパスワードを入れて ログイン をクリックします。

Image

ログインが終了し、自分のアカウント名(mika)が表示されていることがわかります。Twitterでログインの既存のユーザーに結びつける設定が終わりました。

次回からは Twitterでログイン ボタンを押すだけで、XOOPS Cubeのサイトにログインすることが出来るようになります。ログインが気軽に出来ますね(^^)!

Twitterのアカウントを使って新規登録する

今度はXOOPS Cubeのユーザーとしてまだ登録していない人Twitterのアカウントで簡単にXOOPS Cubeに登録できるということを説明します。

Image

別のTwitterアカウントでログインしておきます(usadekiアカウントを使ってみます)。

この状態でXOOPS Cubeサイトの Twitterでログイン ボタンをクリックします。

先ほどと同じように、

Image

連携アプリを認証 をクリックします。

XOOPS Cubeの画面に戻ります。

今度は右側の アカウントをまだお持ちでない方はこちらから登録をお願いします の方に、

Image

XOOPS Cubeサイトに登録したいユーザ名とメールアドレスを入力して 登録する をクリックします。

Image

ログインが終了して、新しく登録したユーザーでログイン済みになっていることが分かります。

アカウント情報を表示すると、登録したユーザーの内容を確認できます。

Image

XOOPS Cubeに軽快なログインを提供するTPソーシャルメディアは超便利です♪

2回に渡って説明してきました。ちょっと設定はややこしいですが、設定をするのは1サイト1度限りです。それだけでユーザーさんが簡単にログインしてくれるサイトになるので是非是非使ってみてくださいね(^^)♪

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告

コメント

  1. 福井 より:

    TPソーシャルメディアプラグイン大変便利に使わせていただいております。
    facebookには問題ないのですが、twitterのリンクをクリックすると画面が真っ白になって固まってしまいます。
    xoops(ten)の環境なのですが、何か考えられる原因などありますでしょうか?
    よろしくお願い申し上げます。

    • 兎本 美佳 より:

      福井さんTPソーシャルメディアご利用ありがとうございます。twitterは今まで問題なかったのですが、前回facebookがログイン出来なくなったのと同様にtwitterの方の仕様変更があったのかもしれません。ちょっと見て原因が分かりましたら対応したいと思います。

      • 兎本 美佳 より:

        (間違えて別の場所にコメントしてしまったので再度書き込みします)

        確認してみました。XOOPS Cubeサイトからリンクしているxtenのサイトから安定版をダウンロードしてインストール。xoops.ryus.co.jpからTPソーシャルメディアをダウンロードしてインストール。管理画面でfacebookとtwitterのキーとシークレットを入れて更新。

        ログアウトしてFacebookボタンをクリックしてログイン>OK
        ログアウトしてTwitterボタンをクリックしてログイン>OK

        でした。結果的に今のバージョンで問題なく\入れたようです。

        あとはTwitterのAPI登録をしたときの何かが違うとか?ありますかねー。

        Access Level Read-only

        となっていますが、この辺はいかがでしょうか?

        試しにtwitterのキーの最後に空白スペースを一つ追加して更新して試してみたのですが、twitterからエラーが表示されます。キーやシークレットが間違っていたとしてもなんらかの表示がされると思うので真っ白になるのがちょっとわかりませんね。

        エラーが表示されても良いようでしたら、

        http://xoops.ryus.co.jp/modules/d3downloads/index.php?page=singlefile&cid=2&lid=11

        から OhMyGodHelpMe をダウンロードして、preloadフォルダにアップロードしてからTwitterボタンを押すと何らかのエラーが表示されるかもしれません。

        使えるようになると良いのですが~

        • 福井 より:

          兎本様、お世話になっております。福井です。

          Access Level Read-onlyは試してみましたが変化ありませんでした。ちなみにRead&Writeで運用しようとしていました。

          教えていただいたプリロードをアップロードし、twitterボタンをクリックしたら、以下のエラーが表示されました。

          Fatal error: Cannot redeclare class OAuthException in /home/users/0/ciao.jp-arowana/web/xoops_trust_path/vendor/twitteroauth/OAuth.php on line 8

          なんだか雰囲気的にあやしげですね。。。

          何かおわかりでしたらご教示いただければ幸いです。

  2. 福井 より:

    兎本さん、お世話になっております。福井です。

    おっしゃる通り、パーミッションの問題かと思い、新しくインストールしたすべてのフォルダとファイルの権限を777にしてみたのですが、まったく動作は変わりませんでした。
    penginプラグインは初めから入っていたので入れ替えなかったのですが、バージョンはおなじ1.00なので問題ないですよね?
    とても便利なプラグインなのでぜひツイッターも使えるようになりたいです。

    以下、作業中に出たPHPデバグの内容です。ログインなどを試しながら入れ替え作業をしていたのでそれに起因するものと思われますがご参考までに。

    Deprecated [PHP]: Assigning the return value of new by reference is deprecated in file (html)/modules/social_media/Form/Register.php line 38 (1)
    Deprecated [PHP]: Assigning the return value of new by reference is deprecated in file (html)/modules/social_media/Form/Register.php line 98 (1)

    よろしくお願いいたします。

    • mikaumoto より:

      先ほど1つのメッセージを間違えた場所に書き込んでいたことに気づいてもう一度書きました。混乱させてしまうかもでスミマセン。

      パーミッションなのですがフォルダのではなくTwitterアプリケーションのパーミッションをご確認いただけますか?

      Deprecated [PHP]: のエラーは今時点では関係がなさそうです。OhMyGodHelpMeを仕込むと、Twitter ログイン ボタンをクリックしたときに真っ白でなく、エラーが出るかもしれません。もしそのメッセージを見ることができると一番早く解決しそうです。

      それでもダメな場合は、自分だったら

      ・Twitterアプリのkeyとsecretを取得をもう一度べつのものを取得して再設定してみる
      ・modules\social_media\controller\twitter.php の function _loginAction 内にデバッグ表示を仕込んでどこまで進んでいるのか確認したり、変数の内容を表示したり

      ということをやってみるかとおもいます

      • 福井 より:

        mikaumoto様、福井です。

        行き違いですが、上部にコメントしましたのでそちらをご覧ください。

        • 兎本 美佳 より:

          了解しました。Fatalエラーをもとにもう少し考えてみます。
          今週はちょっとスケジュールが詰まってしまってるので、検討するのは来週になると思いますが試してみます

        • 兎本 美佳 より:

          あとPHPのバージョンを教えていただけますか?

        • 兎本 美佳 より:

          来週と言いつつ、気になってちょっとだけ調べたのですが、

          http://stainless-note.tumblr.com/post/39691238499/ec-cube%E3%81%A7fatal-error-cannot-redeclare-class

          このあたりと同じ事が起こっているかもしれません。redeclareは二重定義なのですが、該当のphpはすべてrequire_onceで読み込んでいます。一度しか読み込まれないはずなのですがredeclareが起こるのはなぜ?と調べて上のページを見つけました。

          この現象が起こるのは環境に夜かもしれないのでphpのバージョンなどを教えていただけると解決の手がかりになるかもしれません。
          また、来週にこのページを参考にして定義部分の指定を揃えるようにはしてみようと思います。

          • 福井 より:

            兎本様、お世話になっております、福井です。
            素早く対応して頂け手助かります。

            PHPのバージョンは5.4です。
            ロリポップのロリポプランを使っています。

            以上です。よろしくお願い致します。

  3. 兎本 美佳 より:

    福井さん来週と言いつつ、今日まで時間が取れませんでした。

    ロリポップのロリポプランに同じようにインストールしたところ、画面真っ白が再現しました(^^)/。
    再現すれば色々試せるのでやってみたところ解決しました。

    取り急ぎ、ですが、

    xoops_trust_path\vendor\twitteroauth\OAuth.php

    class OAuthException extends Exception {
    // pass
    }

    となっているところを

    if( !class_exists( ‘OAuthException’ ) ) {
    class OAuthException extends Exception {
    // pass
    }
    }

    というように もし OAuthException というクラスがなければ、という条件付きにします。

    これでtwitterログインの画面が出て、ログインすることができます。

    ある環境だけに起こる問題ですが教えていただいて助かりました。このコードが入っていても特に問題ないと思いますのでダウンロードファイルの方も後ほど修正する予定です。

  4. 福井 より:

    兎本さま

    福井です。教えていただいた通りコードを修正しログインできるようになりました!

    ただ、twitterアイコンをクリック後、なにやら右端の方にデバッグ出力のような文字列がテーブルに覆いかぶさるように出力されました。
    いったん無視してログインを行ったしまったため、その後再発しなくなり、記録に残せてません。
    たぶん初めてサイトにいらっしゃる方が見たら抵抗を感じると思いますので、なんとか再現して内容をお送りしたいと思います。
    とはいえ、ご協力のおかげでtwitterログインの機能自体は回復したので、大変感謝しております。

    それではまた近いうちに投稿させていただきます。

    ありがとうございました。

    • 兎本 美佳 より:

      福井さん、ログイン出来るようになって良かったです。

      デバッグ表示のようなものですが、こちらでは確認できなかったのでまた詳しく教えていただければ見れるかと思います。
      ロリポップを無料で利用できる期間が10日なのでできればその間に分かれば対応できるかと思います。

      以前出ていた、

      Deprecated [PHP]: Assigning the return value of new by reference is deprecated in file (html)/modules/social_media/Form/Register.php line 38 (1)
      Deprecated [PHP]: Assigning the return value of new by reference is deprecated in file (html)/modules/social_media/Form/Register.php line 98 (1)

      が、私が試していた環境で出ていたのでmainfile.phpの下の方に

      error_reporting(E_ALL ^ E_NOTICE ^ E_DEPRECATED);
      }

      と最後の行の上にerror_reportingの行を追加しました。このエラーでしたらこれで消えると思います。

      違う場合は詳しく教えていただければまた見てみます

トップへ戻る