質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Facebook

Facebookは、実名登録制のSNS(ソーシャル・ネットワーキング・サービス)です。開発者用のデベロッパーサイトが存在し、一般ユーザーによるFacebook向けアプリケーション開発が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3799閲覧

ブラウザにてFacebook JavaScript SDKを使ってログインができない

SatoTakeshiX

総合スコア113

Facebook

Facebookは、実名登録制のSNS(ソーシャル・ネットワーキング・サービス)です。開発者用のデベロッパーサイトが存在し、一般ユーザーによるFacebook向けアプリケーション開発が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2016/01/18 10:51

###前提・実現したいこと
ブラウザからFacebook JavaScript SDKを使ったFacebookのログイン機能を実装しようとしています。
しかし、ログインの処理でレスポンスされるオブジェクトがunknownとなり、うまく連携ができていません。
どこが原因とかんがえられるか(コードがおかしいのか、Facebookアプリの登録がおかしいのか)がわからない状態です。
なにか、原因究明の手立てをご教授願えれば幸いです。

行った操作

  • 下記から、Facebookアプリを作成しました。

https://developers.facebook.com/apps

  • アプリのダッシュボードから、App IDを取得しました。

  • チュートリアルに従って、facebookアプリにログインするURLを登録しました。

  • 下記のチュートリアルのサンプルコードを動かしました。

(App IDの部分は書き換えています)
https://developers.facebook.com/docs/facebook-login/web

###発生している問題・エラーメッセージ

下記関数を実行した際のresponseオブジェクトの返り値がunknownになってしまいます。
ブラウザ上もログインした形跡がありません。

javascript

1 function checkLoginState() { 2 FB.getLoginStatus(function(response) { 3 console.log("getLoginStatus実行:"+ JSON.stringify(response)) 4 statusChangeCallback(response); 5 }); 6 }

javascript

1//ログ 2getLoginStatus実行:{"status":"unknown","authResponse":null} 3

###ソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 8 <title>Facebookログイン</title> 9 10 <!-- Bootstrap --> 11 <link href="app/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 12 <link href="stylesheets/style.css" rel="stylesheet" > 13 14 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 15 <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 16 <!--[if lt IE 9]> 17 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 18 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 19 <![endif]--> 20</head> 21<body> 22 23<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 24<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 25<!-- Include all compiled plugins (below), or include individual files as needed --> 26<script src="app/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 27 28<script src="//www.parsecdn.com/js/parse-1.6.14.min.js"></script> 29<!-- Facebook SDK--> 30<script> 31 32 /* 33 https://developers.facebook.com/docs/facebook-login/web 34 でかかれていたサンプルコード 35 */ 36 37 // This is called with the results from from FB.getLoginStatus(). 38 function statusChangeCallback(response) { 39 console.log('statusChangeCallback'); 40 console.log(JSON.stringify(response)); 41 // The response object is returned with a status field that lets the 42 // app know the current login status of the person. 43 // Full docs on the response object can be found in the documentation 44 // for FB.getLoginStatus(). 45 if (response.status === 'connected') { 46 // Logged into your app and Facebook. 47 testAPI(); 48 } else if (response.status === 'not_authorized') { 49 // The person is logged into Facebook, but not your app. 50 document.getElementById('status').innerHTML = 'Please log ' + 51 'into this app.'; 52 } else { 53 // The person is not logged into Facebook, so we're not sure if 54 // they are logged into this app or not. 55 document.getElementById('status').innerHTML = 'Please log ' + 56 'into Facebook.'; 57 } 58 } 59 60 // This function is called when someone finishes with the Login 61 // Button. See the onlogin handler attached to it in the sample 62 // code below. 63 function checkLoginState() { 64 FB.getLoginStatus(function(response) { 65 console.log("getLoginStatus実行:"+ JSON.stringify(response)) 66 statusChangeCallback(response); 67 }); 68 } 69 70 window.fbAsyncInit = function() { 71 FB.init({ 72 appId : 'myfacebookappid', 73 cookie : true, // enable cookies to allow the server to access 74 // the session 75 xfbml : true, // parse social plugins on this page 76 version : 'v2.2' // use version 2.2 77 }); 78 79 // Now that we've initialized the JavaScript SDK, we call 80 // FB.getLoginStatus(). This function gets the state of the 81 // person visiting this page and can return one of three states to 82 // the callback you provide. They can be: 83 // 84 // 1. Logged into your app ('connected') 85 // 2. Logged into Facebook, but not your app ('not_authorized') 86 // 3. Not logged into Facebook and can't tell if they are logged into 87 // your app or not. 88 // 89 // These three cases are handled in the callback function. 90 91 FB.getLoginStatus(function(response) { 92 console.log(JSON.stringify(response)) 93 statusChangeCallback(response); 94 }); 95 96 }; 97 98 // Load the SDK asynchronously 99 (function(d, s, id) { 100 var js, fjs = d.getElementsByTagName(s)[0]; 101 if (d.getElementById(id)) return; 102 js = d.createElement(s); js.id = id; 103 js.src = "//connect.facebook.net/en_US/sdk.js"; 104 fjs.parentNode.insertBefore(js, fjs); 105 }(document, 'script', 'facebook-jssdk')); 106 107 // Here we run a very simple test of the Graph API after login is 108 // successful. See statusChangeCallback() for when this call is made. 109 function testAPI() { 110 console.log('Welcome! Fetching your information.... '); 111 FB.api('/me', function(response) { 112 console.log('Successful login for: ' + response.name); 113 document.getElementById('status').innerHTML = 114 'Thanks for logging in, ' + response.name + '!'; 115 }); 116 } 117</script> 118 119<fb:login-button scope="public_profile,email" onlogin="checkLoginState();"> 120</fb:login-button> 121 122<div id="status"> 123</div> 124 125</body> 126</html>

###補足情報

実行環境:Chrome バージョン 47.0.2526.111 (64-bit)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決しました。

chromeのデベロッパーツールでlocalstrageとcookieを消したあとに、Facebookが用意したログインボタン<fb:login-button scope="public_profile,email" onlogin="checkLoginState();"> </fb:login-button>ではなく、自分でボタンを作り、FB.loginメソッドを呼び出したところログインできるようになりました。

html

1<button id="login">ログイン</button>

javascript

1 $("#login").click(function () { 2 login() 3 }); 4 5 function login(){ 6 FB.login(function(response) { 7 if (response.authResponse) { 8 // proceed 9 } else { 10 // not auth / cancelled the login! 11 } 12 }); 13 }

投稿2016/01/19 11:29

SatoTakeshiX

総合スコア113

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問