facebook - カスタム Facebook FOSFacebookBundle ログイン ボタン

Question

FosFacebookログインボタンの画像をカスタム/変更する方法を知っている人はいますか?

{{ facebook_login_button({'autologoutlink': true}) }}

そして、ポップアップではなくフルページのFacebookログインでリダイレクトします。

Answer 1

これは twig ヘルパーを使用し、facebook sdk js を使用して '' 表記でテンプレートをレンダリングします。

ログインページにリダイレクトする必要がある場合は、html リンクを使用し、php facebook SDK からメソッド「getLoginUrl」を呼び出します。

'fos_facebook.api'FOSFacebookBundleのサービス レジスタからアクセスできます。

コード例で更新

Facebookの「フリクションレス」でログインするために使用するJavaScriptコードは次のとおりです

<script>
//scopes string stored as container parameter
var fb_scope='{{ facebook_scope }}';
//connected in sf2 app ?
{% if app.user %}
    var isLogged=true;
{% else %}
    var isLogged=false;
{% endif %}
//var to store fb status
var fb_connected = false;

function onFbInit() {

  if (typeof(FB) != 'undefined' && FB != null ) {

      // fetch the status on load
      FB.getLoginStatus(handleSessionResponse);

      //my facebook connect link
      $('a.facebook_connect').on('click', function(e) {
        FB.login(function(response) {
           if (response.authResponse) {
             checkAccount();
           } else {
              onAuthRefusal();
           }
         }, {scope: fb_scope});
        e.preventDefault();
      });
      //my logout link
      $('#logout').on('click', function(e) {
        FB.logout(null);
      });

      //want to distinguish three status states
      FB.Event.subscribe('auth.statusChange', handleSessionResponse);
  }
}




function handleSessionResponse(response) {
    if (response.status === 'connected') {
        // the user is logged in and has authenticated your
        // app, and response.authResponse supplies
        // the user's ID, a valid access token, a signed
        // request, and the time the access token
        // and signed request each expire
        var uid = response.authResponse.userID;
        var accessToken = response.authResponse.accessToken;
        var expiresIn = response.authResponse.expiresIn;

        //already logged in sf2 app
        if(!isLogged){
            checkAccount();
        }
        fb_connected = true;

      } else if (response.status === 'not_authorized') {
        // the user is logged in to Facebook,
        // but has not authenticated your app
         fb_connected = false;
      } else {
        // the user isn't logged in to Facebook.
          fb_connected = false;
      }
}

function checkAccount(){
   //route defined in your security.yml  ( check_path value in your fos_facebook firewall )
   top.location.href  = '{{ path('_security_check_facebook' ) }}';
}

function onAuthRefusal(){
 //message, special page ?
 console.log('refused authentification, message to display ?');
}


</script>

{{ facebook_initialize({'xfbml': true, 'fbAsyncInit': 'onFbInit();', 'frictionlessRequests' : 'true'} ) }}

Facebook認証にリダイレクトするルート（ /login/facebook ）も定義しました

//controller action for /login/facebook pattern
function loginFacebookAction()
{
    //get facebook api service registered by FacebookBundle
    $api = $this->container->get('fos_facebook.api');
    //get scope provided in url or default
    $scope = $this->container->get('request')->get('scope', 'publish_stream');
    //generate call url that use facebook check_path (used by FacebookBundle for authentification)
    $callback = $this->container->get('router')->generate('_security_check_facebook',array(), true);
    $redirect_url = $api->getLoginUrl(array('scope' => $scope, 'redirect_uri' => $callback));

    return new RedirectResponse($redirect_url);
}

で、これだ！