「Facebook」タグアーカイブ

Tampermonkey(Chrome版Greasemonkey)でFacebookの広告を非表示

2018年2月12日未分類Facebook, tempermonkeypr

Facebookの広告が目に入ってしまう

久しぶりの投稿で時代遅れのトピックを扱おうとしています、すいません。もしかしたら役立つ人もいるかと思い。

Facebookの右側に広告を表示する領域があるのですが、たまに下世話な芸能ニュースなど表示されていると、ワタシ嫌いではないので、ついついクリックしてしまうわけです。そして何度も「次へ」「次へ」とクリックしてどうでもいい情報をみせられ、中身のなさに愕然とするわけです。あまりに時間の無駄！でも目に入ってしまう以上、クリックしてしまいたい衝動にアガらえない！

という訳で、おもむろにCtrl+Shift+iで開発者コンソールをたちあげ、

$x('//*[@class="home_right_column"]').forEach((el)=>{el.textContent='何かの跡地';});

1	$x('//*[@class="home_right_column"]').forEach((el)=>{el.textContent='何かの跡地';});

と入力して消していました。

一度入力すれば、上矢印カーソルを押すと入力履歴が呼び出されるので、ほとんど手間はありません。

しかし、Facebookではページ移動するたびに画面が書き換えられまた広告がでてきます。

そこでTampermonkeyでスクリプトを書きました。ユーザースクリプトはかなり昔からあるもはや古（いにしえ）の技術ですが、なんと私は初ユーザースクリプトです。たぶん、すでに誰かが作っていると思うんですが、まったく気にせずさくっと書けるかやってみました。

Tempermonkeyのインストール

インストールの仕方は、まずここからChrome拡張機能のTempermonkeyをインストールします。

Tempermonkeyにユーザースクリプト追加

Chromeの拡張機能画面でTempermonkeyが有効になっていることを確認し、オプションをクリックするとTempermonkeyのダッシュボードが開くので、＋ボタンを押してユーザースクリプトを入力、保存してください。

以下がスクリプト。

// ==UserScript==
// @name         Facebook
// @namespace    https://www.facebook.com/
// @version      0.1
// @description  try to take over the world!
// @author       Kazuya Utsunomiya
// @match        https://www.facebook.com/*
// @grant        none
/* load jQuery */
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
// ==/UserScript==

(function() {
    'use strict';
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            $('.home_right_column').hide();
        });
    });
    const config = { attributes: true, childList: true, characterData: true };
    observer.observe($('body').get(0),  config);
})();

// ==UserScript==

// @name Facebook

// @namespace https://www.facebook.com/

// @version 0.1

// @description try to take over the world!

// @author Kazuya Utsunomiya

// @match https://www.facebook.com/*

// @grant none

/* load jQuery */

// @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js

// ==/UserScript==

(function() {

'use strict';

const observer = new MutationObserver((mutations) => {

mutations.forEach((mutation) => {

$('.home_right_column').hide();

});

const config = { attributes: true, childList: true, characterData: true };

observer.observe($('body').get(0), config);

})();

これだけで、メタタグの@match属性から該当するfacebookのURLを開いた時点でユーザースクリプトが発動し、DOMを監視して変更があれば広告の入っているhome_right_columnクラスの領域を非表示にします。

facebookを開いて確認

一瞬広告が表示されますが、自動的にFacebookから広告が消えます。

難しかったところ

ユーザースクリプトではsetTimeoutが無視されるので、後から追加されるDOM要素は拾えない。
Facebookでのページ遷移はreactと思うが動的に行われるので、DOMの変更を検知する必要があった。

【Facebook for PHP SDK】ログアウトの仕方

2013年8月10日FacebookAPIFacebookpr

自分のFacebook連携アプリからログアウトするだけでなく、Facebookからもログアウトする方法です。
複数のFacebookアカウントを切り替えてテストしたりする場合に必要なんですが、なかなか正しいやり方を書いているものがなくて苦労しました。

$facebook->destroySession()を使うわけですが、Facebookログアウト後に呼び出すところがポイントです。

function logout() {
	if (!isset($this->facebook)){
		$this->set_facebook();
	}
	// Faceebookのログアウト
	$params = array(
		'next' => Router::url('/users/fb_logout', true),
		'access_token' => $this->facebook->getAccessToken(),

	);
	$logout_url = $this->facebook->getLogoutUrl($params);
	$this->redirect($logout_url);
}
public function fb_logout(){
	if (!isset($this->facebook)){
		$this->set_facebook();
	}
	$this->facebook->destroySession();

	// セッション変数を全て解除する
	$_SESSION = array();

	// セッションを切断するにはセッションクッキーも削除する。
	// Note: セッション情報だけでなくセッションを破壊する。
	if (isset($_COOKIE[session_name()])) {
		setcookie(session_name(), '', time()-42000, '/');
	}
	// 最終的に、セッションを破壊する
	session_destroy();
}
public function set_facebook(){
	$this->facebook = new Facebook(array(
		'appId'  => Configure::read('facebook_appId'),
		'secret' => Configure::read('facebook_secret'),
	));
}

function logout() {

if (!isset($this->facebook)){

$this->set_facebook();

}

// Faceebookのログアウト

$params = array(

'next' => Router::url('/users/fb_logout', true),

'access_token' => $this->facebook->getAccessToken(),

);

$logout_url = $this->facebook->getLogoutUrl($params);

$this->redirect($logout_url);

}

public function fb_logout(){

if (!isset($this->facebook)){

$this->set_facebook();

}

$this->facebook->destroySession();

// セッション変数を全て解除する

$_SESSION = array();

// セッションを切断するにはセッションクッキーも削除する。

// Note: セッション情報だけでなくセッションを破壊する。

if (isset($_COOKIE[session_name()])) {

setcookie(session_name(), '', time()-42000, '/');

}

// 最終的に、セッションを破壊する

session_destroy();

}

public function set_facebook(){

$this->facebook = new Facebook(array(

'appId' => Configure::read('facebook_appId'),

'secret' => Configure::read('facebook_secret'),

));

}

calePHPのサンプルコードですが、cakePHPでなくてもほとんど同じです。
getLogoutUrl()のnextパラメータにFacebookのセッションを破棄するページのURLを入れています。

参考：http://stackoverflow.com/questions/8405729/facebook-php-sdk-caching-user

facebookAPIでapi()を認証に使うとセッションが切れてしまう

2013年2月27日FacebookAPIFacebookpr

たまにアプリからのfacebookログイン失敗してるけどなんなの

cakePHP(v2.2.2)にFacebook SDK for PHP(v.3.2.2)を入れてFacebookへのログインを実装しているのですが、1度目Facebookへのログインボタンを押してもログインせず、2回目押すとログインするという現象が起きましたので原因を調査しました。

問題のソースはこんな感じ。

App::uses(&#039;Controller&#039;, &#039;Controller&#039;);
App::import(&#039;Vendor&#039;,&#039;facebook&#039;,array(&#039;file&#039; =&gt; &#039;facebook&#039;.DS.&#039;facebook.php&#039;));

class AppController extends Controller {
	var $facebook;
	var $components = array(&#039;Auth&#039;);
	var $uses = array(&#039;User&#039;);

	function beforeFilter() {
		parent::beforeFilter();

		// ログイン判定
		$this-&gt;Auth-&gt;fields = array(
			&#039;Username&#039; =&gt; &#039;facebook_code&#039;,
			&#039;password&#039; =&gt; &#039;password&#039;,
		);
		$this-&gt;facebook = new Facebook(array(
			&#039;appId&#039;  =&gt; Configure::read(&#039;facebook_appId&#039;),
			&#039;secret&#039; =&gt; Configure::read(&#039;facebook_secret&#039;),
		));

		try {   // Facebookの持つcookieによりログアウトしてもgetUserがとれることがあるので/meをとることでエラーになるか判定
			$facebook_me = $this-&gt;facebook-&gt;api(&#039;/me&#039;, &#039;GET&#039;);
			$user = $this-&gt;User-&gt;find(&#039;first&#039;, array(
				&#039;conditions&#039; =&gt; array(&#039;facebook_code&#039;=&gt;$uid)
			));
		} catch (Exception $e) {
			$loginUrl = $this-&gt;facebook-&gt;getLoginUrl(array(
				&#039;scope&#039; =&gt; &#039;user_birthday,user_relationships,user_relationship_details,email&#039;,
				&#039;display&#039; =&gt; &#039;touch&#039;,
			));
			$this-&gt;set(&#039;loginUrl&#039;, $loginUrl);
		}
	}
}

App::uses('Controller', 'Controller');

App::import('Vendor','facebook',array('file' => 'facebook'.DS.'facebook.php'));

class AppController extends Controller {

var $facebook;

var $components = array('Auth');

var $uses = array('User');

function beforeFilter() {

parent::beforeFilter();

// ログイン判定

$this->Auth->fields = array(

'Username' => 'facebook_code',

'password' => 'password',

);

$this->facebook = new Facebook(array(

'appId' => Configure::read('facebook_appId'),

'secret' => Configure::read('facebook_secret'),

));

try { // Facebookの持つcookieによりログアウトしてもgetUserがとれることがあるので/meをとることでエラーになるか判定

$facebook_me = $this->facebook->api('/me', 'GET');

$user = $this->User->find('first', array(

'conditions' => array('facebook_code'=>$uid)

));

} catch (Exception $e) {

$loginUrl = $this->facebook->getLoginUrl(array(

'scope' => 'user_birthday,user_relationships,user_relationship_details,email',

'display' => 'touch',

));

$this->set('loginUrl', $loginUrl);

}

Apacheのエラーログをみると

CSRF state token does not match one provided.

1	CSRF state token does not match one provided.

と記録されています。これはSDKの中にあるbase_facebook.phpの

protected function getCode() {
	if (isset($_REQUEST[&#039;code&#039;])) {
		if ($this-&gt;state !== null &amp;&amp;
			isset($_REQUEST[&#039;state&#039;]) &amp;&amp;
			$this-&gt;state === $_REQUEST[&#039;state&#039;]) {

			// CSRF state has done its job, so clear it
			$this-&gt;state = null;
			$this-&gt;clearPersistentData(&#039;state&#039;);
			return $_REQUEST[&#039;code&#039;];
		} else {
			self::errorLog(&#039;CSRF state token does not match one provided.&#039;);
			return false;
		}
	}

	return false;
}

protected function getCode() {

if (isset($_REQUEST['code'])) {

if ($this->state !== null &&

isset($_REQUEST['state']) &&

$this->state === $_REQUEST['state']) {

// CSRF state has done its job, so clear it

$this->state = null;

$this->clearPersistentData('state');

return $_REQUEST['code'];

} else {

self::errorLog('CSRF state token does not match one provided.');

return false;

}

return false;

}

によるものでした。stateがいつの間にか消失してしまったようです。stateは単純にSDKの中でログインURLを取得する際に

$this-&gt;state = md5(uniqid(mt_rand(), true));

1	$this->state = md5(uniqid(mt_rand(), true));

と生成するもので、セッションに入れておいてリクエストを受け取ったクライアントがリクエストを送ったクライアントと一致するかのチェックに使われています。このstateがどこで消えたのか追っていきました。

犯人はfacebook->api()

結果、Facebookへのログイン状態を確かめるfacebook->api()で消えていました。

facebook->api()を使うのはこことかの質問サイトでみつけたやり方で、facebook->getUserだとfacebookからログアウトした後もクッキーからログインし続ける、または逆にfacebookにログインしていてもユーザーIDがクッキーのために返ってこないことを回避するためにfacebook->api()を使うんだとか。（実際はfacebook->getUserで問題なかった）

facebook->api()のソースを追うと、OAuthで例外エラーがでたときにセッションを破棄しています。ここまで追っていったところで流れが追いきれなくなってきました・・・。

getLoinUrlの前にapi(‘me’)でログインチェックするのはやめよう

整理しますとfacebookでログイン状態、自分の作ったアプリでは未ログイン状態で画面を表示すると、アプリ認証がまだなのでfacebook->getLoginUrl()が実行され、stateがセッションに保存されます。このままログインすればいいのですが、問題の起きるパターンでは、ここで同じページを再度読み込みます。すると再度ログイン認証facebook->api()が行われ、セッションを破棄したうえでログインURLを生成するため、認証先でエラーとなるというわけです。

認証チェックはgetUserを使う、てかそれが普通だった

facebook->api()を使ってこの現象を回避する方法が思いつかなかったので、結局facebook->api()はやめてfacebook->getUser()を使うことにしました。テストしたところ、ちゃんとfacebookのログイン状態と連動した値を返していました。

そしてSDKのreadme.mdをみますと、ちゃんとfacebook->getUser()を使って0以外が返ってきたときだけapi(‘me’)を使うようになっているじゃありませんか。これみて作ってれば最初からこんなエラーはぶち当たらなかったはず・・・。

そんなわけで、普通はこのエラーには当たらないと思います。ただ解決までけっこう時間がかかってしまったのでドキュメントちゃんとみないとだめですよという教訓としてブログに載せてみました。

ぼくの答えはいつもNo…そしてYes！

愛媛県南予在住現在フリーのウェブプログラマです。お仕事募集中です。

「Facebook」タグアーカイブ

Tampermonkey(Chrome版Greasemonkey)でFacebookの広告を非表示

Facebookの広告が目に入ってしまう

Tempermonkeyのインストール

Tempermonkeyにユーザースクリプト追加

facebookを開いて確認

難しかったところ

【Facebook for PHP SDK】ログアウトの仕方

facebookAPIでapi()を認証に使うとセッションが切れてしまう

たまにアプリからのfacebookログイン失敗してるけどなんなの

犯人はfacebook->api()

getLoinUrlの前にapi(‘me’)でログインチェックするのはやめよう

認証チェックはgetUserを使う、てかそれが普通だった

Facebookの広告が目に入ってしまう

Tempermonkeyのインストール

Tempermonkeyにユーザースクリプト追加

facebookを開いて確認

難しかったところ

たまにアプリからのfacebookログイン失敗してるけどなんなの

犯人はfacebook->api()

getLoinUrlの前にapi(‘me’)でログインチェックするのはやめよう

認証チェックはgetUserを使う、てかそれが普通だった

Facebookの広告が目に入ってしまう

Tempermonkeyのインストール