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

Image

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

旧スタッフブログでもblogで説明していたのですが、ソーシャルメディア側のプログラムが若干変更になったため、設定方法がちょっと変わりました

今回はFacebookログインが出来るまでについて書いてみます。

TPソーシャルメディアのダウンロードとモジュールインストール

TPソーシャルメディアのダウンロード

上記からダウンロードしたzipファイルを解凍します。

htmlフォルダとxoops_trust_pathフォルダができますので、インストールしたいサイトにアップロードします。

管理者でログインして、モジュールのインストールに進みます。

Image

モジュールが2つありますので、PenginとSocialMediaをインストールしてください。

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

TPソーシャルメディアを利用するにはFacebookでアプリの登録をしてkey(App ID)とsecret(App Secret)を取得します。

ちょっと手順はいくつかありますが、書いたとおりにやれば出来ますので!ひとつずつやっていきましょう~(^^)/

Facebook開発者ページ

Facebook開発者ページにアクセスします。Facebookログインしていない場合はログインしてください。

Image

このような感じのページです。

Image

Apps をクリックし、Create A New App をクリックすると「新しいアプリを作成」という画面がポップアップします。

Image

Display Name という欄に適当な名前を入力します。ここで入力した名前はユーザーがFacebookログインを利用する時に表示されるのでわかりやすい名前にしておくといいかと思います。

アプリケーションを作成 ボタンを押します。

Image

セキュリティチェック画面になるので表示された文字を入力して、送信を押します。

*しかし…わ、わかりにくいですよね…何度か失敗するかもしれませんががんばりましょう!

正しく入力すると、

Image

この画面になります。App ID の欄にある15桁の数字を忘れないようにコピーペーストして保存しておきます。

App Secret は伏せ字になっているので、

Image

Show ボタンをクリックします。

Image

パスワードを要求する画面がポップアップするので、Facebookでログインするときのパスワードを入力して、送信 をクリックします。

Image

App Secret が表示されますのでこの文字列をコピーペーストして取っておきます。

画面説明用にIDとSecretを表示していますがすでに変更済みです。実際にはこれらは絶対に人に知られないようにご注意くださいね!

これでkeyとsecretが取得できました

あと、1つ設定が必要です。このアプリはどこから利用されるか、という指定をします。

左ブロックの Settings をクリックします

Image

Advanced ラベルをクリック

Image

ページの下の方、

Image

Valid OAuth redirect URIs 欄に、XOOPS Cubeサイトのurlを入れます。

Image

変更を保存、ボタンをクリックします。

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

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

Image

SocialMedia をクリックします。

Image

facebook行の KeyとSecretに先ほど保存しておいた、App IDとApp Secretを貼り付けて 登録する をクリックします。

Image

Twitter行が空白のため、このメッセージが出ますが特に問題ありませんので OK をクリックします。

Facebookログインをしてみる!

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

Image

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

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

Facebookでログインボタンをクリックすると、このような画面が表示されます

Image

OK をクリックします。

Image

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

FacebookにログインしていないときはFacebookのログインが間に入ります。

Image

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

Image

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

Image

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

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

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

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

別のFacebookアカウントでログインしておきます(テスト用ユーザーを使っています)。

Image

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

Image

今度は右側の アカウントをまだお持ちでない方はこちらから登録をお願いします の方に、XOOPS Cubeサイトに登録したいユーザ名とメールアドレスを入力して 登録する をクリックします。

Image

ログインが終了し、新しく追加したユーザー mikatest でログインしたことが分かります。

ユーザー情報を見るとこのようになっています。

Image

このようにFacebookログインからのXOOPS Cubeユーザー新規登録はとても簡単なので、多くの人に登録してもらえそうですね(^^)!

次回は TPソーシャルメディア を使って Twitterログイン、について書きたいと思います♪

兎本美佳

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

シェアする

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

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

コメント

  1. ono より:

    はじめまして。
    これは!と思いモジュールのインストールをさせていただきました。
    エントリの内容に沿って
    ・FacebookのAppを作成してAPI key ,Srcretを入手し、Valid OAuth redirect URIsに自分のサイトアドレスを入力して保存。
    ・自分のサイトのSocialMediaモジュールにAPI key,Secretを保存してログアウト。
    いざFacebookでログインボタンを押したらエラーが出てログインに失敗してしまいました。
    なにが間違ってるのでしょうか?

    エラーの内容は以下のとおりでした。
    Invalid Scopes: publish_stream. This message is only shown to developers. Users of your app will ignore these permissions if present. Please read the documentation for valid permissions at: https://developers.facebook.com/docs/facebook-login/permissions

    • 兎本 美佳 より:

      onoさん、こんにちは!コメントありがとうございます。エラーが出てしまいましたか…ちょっと調べてみますね。

  2. 岩崎 より:

    通りすがりですが、私も同じエラーが出て以下を試しましたらとりあえず連携できましたので、置いていきます。
    modules/social_media/Control/er/facebook.phpにある下記コードを変更したところ解決しました。

    protected function _loginAction()
    {
    $option = $this->_getProviderOption();

    //facebookログイン用URLを取得
    $_SESSION[‘facebook_state’] = md5(uniqid(rand(), TRUE));
    $authorize_url = ‘https://www.facebook.com/dialog/oauth?’
    . ‘client_id=’. $option[‘key’]
    . ‘&redirect_uri=’. rawurlencode($this->connect)
    . ‘&scope=’. rawurlencode(‘public_stream’)
    . ‘&state=’. $_SESSION[‘facebook_state’];

    header(“location:”.$authorize_url);
    die;
    }

    protected function _loginAction()
    {
    $option = $this->_getProviderOption();

    //facebookログイン用URLを取得
    $_SESSION[‘facebook_state’] = md5(uniqid(rand(), TRUE));
    $authorize_url = ‘https://www.facebook.com/dialog/oauth?’
    . ‘client_id=’. $option[‘key’]
    . ‘&redirect_uri=’. rawurlencode($this->connect)
    . ‘&scope=’. rawurlencode(‘publish_actions’)
    . ‘&state=’. $_SESSION[‘facebook_state’];

    header(“location:”.$authorize_url);
    die;
    }

    修正個所は、プログラム内46行目
    「. ‘&scope=’. rawurlencode(‘public_stream’)」

    「. ‘&scope=’. rawurlencode(‘publish_actions’)」
    へ変更しました。
    http://norm-nois.com/blog/archives/2845 こちらのサイトで上記エラー時に、PHP SDK内の上記相当箇所を変更したことで解決したというくだりがありましたので、試したところOKでしたが、恥ずかしながら私のほうでは直接的な原因はわかっておりませんので、修正は自己責任になってしまいますが・・・。^^;

    参考になりましたら幸いです。

    • 兎本 美佳 より:

      ありがとうございますm(_ _)m。見直してみようと思って忘れていました。教えていただいた所を私も試してみます。

  3. 兎本 美佳 より:

    onoさん、岩崎さんありがとうございました。
    ローカルに以前検証をしてFacebookログインができていたサイトを見つけたので検証してみたところ、onoさんの教えていただいたエラーが出ていました。ということはFacebookAPIの仕様が変更されたため、使えなくなったようです。

    英語のサイトですが、

    http://stackoverflow.com/questions/30379487/unable-to-like-on-facebook-publish-actions-missing-will-publish-stream-do

    こちらで、「アプリを更新し、 publish_actionsに変更する必要があります。 publish_streamsは数年前に廃止され、今年4月の最後に除去が終了しました」という文章を見つけました!

    なるほどです。エラーの状況を教えていただいたり、岩崎さんにソースコードを追ってもらって大変助かりました。

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

    修正したソースをアップしました。よろしければダウンロードし直して使ってみていただけますか?よろしくお願いします。

  4. ono より:

    兎本さん、岩崎さんありがとうございます。

    修正されたソースをインストールして試してみました。
    Facebookの認証画面が少し変わり情報の受け渡しをしようと前進した感じですが、
    okボタンを押すと「Facebookログインに失敗しました」となってしまいます。

    エラー内容は
    Submit for Login Review
    以下に示す権限の一部はFacebookで使用するように承認されませんでした。
    レビューのために送信または詳細をチェック

    どうやらFacebook Developersのアプリ側で何か許可する設定を追加しなくてはいけないようですが、よくわかりませんでした。

    • 兎本 美佳 より:

      onoさん、おはようございます。情報ありがとうございました。

      またしても失敗してしまったとのこと、うーん、再度新しいXOOPSと新しいアプリidで試してみます。

    • 兎本 美佳 より:

      検証してみました
      ・新しいXOOPS Cubeをインストール
      ・Facebook開発者で新しくアプリidを取得
      ・TPソーシャルメディアをダウンロード
      ・TPソーシャルメディアをインストール
      ・ログアウトした状態からFacebookログイン
      ・ログイン成功

      とういことで上記の手順では問題なくログイン出来ました。上記のうち、onoさんが再度やってみることができる部分を試していただけますか?
      よろしくお願いします。

  5. delsol より:

    お世話になります。
    ぜひ使ってみたいと思い、上部のリンクをクリックしたところリンク切れだったため、
    http://xoops.ryus.co.jp/modules/d3downloads/index.php?cid=3&intree=0&perpage=10&orderby=dateD
    からダウンロードしましたがファイルが壊れているようで解凍できません。
    解凍可能なファイルをご提供いただくことあhできますでしょうか?ご検討よろしくお願いいたします。

    • 兎本美佳 兎本美佳 より:

      delsolさん、こんにちは!たしかに、確認のためダウンロードはできたのですが解凍ができませんでした。再度アップしましたのでお確かめください。chromeでダウンロードすると .zip がつかないファイル名になるかもしれないのですが .zip をつけて解凍していただければと思います。

  6. delsol より:

    無事解凍できました!これからいろいろ試してみたいと思います。
    ありがとうございました!

    • 兎本美佳 兎本美佳 より:

      delsolさん、こんにちは。無事に使えたとお知らせいただきありがとうございました。また、ファイルが壊れていることもお知らせいただき助かりました(^^)/

トップへ戻る