同様の質問が寄せられていますが、これらの問題の解決策は役に立たないようです。
仮想マシンで実行するローカル開発サイトをセットアップしました: http://lamp.site
index.phpが読み込まれると、次の JavaScript が実行されます (正しい appId を使用):
/* facebook auth */
window.fbAsyncInit = function() {
FB.init({
appId: '01234567890',
channelUrl: 'http://lamp.site/channel.html'
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
次に、ボタンがクリックされると、次の JavaScript 関数がトリガーされます。
#HTML
<li><a class="btn" href="#" ng-click="connectToFacebook()">Connect with Facebook</a></li>
#Snippet in AngularJS Controller
$scope.connectToFacebook = function() {
facebookConnect.authenticate(
function(reason) { // fail
console.log(reason);
},
function(user) { // success
console.log('logged in',user);
//Session.login();
});
return false;
}
#Factory in AngularJS module
.factory('facebookConnect', function() {
return {
authenticate: function(fail, success) {
FB.login(function(response) {
console.log(response);
if (response.authResponse) {
FB.api('/me', success);
} else {
fail('User cancelled login or did not fully authorize.');
}
});
}
}
Firefox でボタンを押すと、機能します。素敵です。Facebook から正しい情報がすべて返ってきます。
PC で Chrome または Safari を使用している場合、または iPhone で Safari Mobile を使用している場合、Facebook のログイン ウィンドウ ポップアップに「エラーが発生しました。後でもう一度試してください」というメッセージが表示されます。、および次のコンソール データ:
Unsafe JavaScript attempt to access frame with URL
https://www.facebook.com/dialog/permissions.request from frame with URL
http://lamp.site/index.php?page=login. Domains, protocols and ports must match.
Object
authResponse: null
status: "not_authorized"
__proto__: Object
User cancelled login or did not fully authorize.
Facebook アプリの開発者セクションにローカル テスト用の URL を追加しました。これは Firefox でログインするため機能します。これは私のチャンネル ファイルで、http://lamp.site/channel.htmlに保存されています。
<script src="http://connect.facebook.net/en_US/all.js"></script>
src=タグにhttp:を含むチャンネル ファイルと含まないチャンネル ファイルを用意してみました。
Facebook アプリには次の設定があります。
- アプリ ドメイン: lamp.site
- サイトURL： http: //lamp.site
- 携帯サイトURL： http: //lamp.site
Firefoxで動作するので、一体何が間違っているのでしょう。クロス サイト スクリプティングを有効にすることはできません。ユーザーがクロス サイト スクリプティングを有効にしないためです。これはモバイル サイトに適用されます。
最近、この問題を解決できた人はいますか？
他の同様の質問はすべて未回答です...誰かがこれを修正したに違いありません!
編集: ウェブサイトで簡略化されたバージョンの新しいアプリ ID を作成しました。
http://dev.willshawmedia.com/fb/
これは、Facebook Dev アプリケーション パネルからのアプリ ID を含むスクリーン ショットです。
ソースコードを見ることができます。ここから直接コピーされています。
https://developers.facebook.com/docs/guides/web/
そしてチャンネルファイルは存在します：
http://dev.willshawmedia.com/fb/channel.html
これ以上簡単にすることはできませんが、「エラーが発生しました。後でもう一度やり直してください」というメッセージが表示されます。メッセージですが、認証して閉じるのではなく、Facebook に転送するだけです。
編集: サイトの URL がありませんでした。追加しました。簡単な例が機能しています。
私のライブ サイトで動作しているため、ローカル ドメインに関係しているに違いありません。しかし、/etc/hosts/ファイルに次の行があります。
192.168.0.13 lamp.site
これは、私のラップトップで実行されている VirtualBox Ubuntu サーバーの IP アドレスです。そのサイトは問題なく閲覧できます。
