このドキュメントでは、ウェブページにJavaScript用Facebook SDKを使ったFacebookログインを実装するための手順について説明します。
Facebookユーザーの方で、自分のアカウントにログインできない場合は、ヘルプセンターにアクセスしてください。
次のものが必要です。
何らかの理由でFacebookのJavaScript SDKを使用できない場合は、ログインのフローを手動でビルドすることにより、Facebookログインを実装できます。
アプリダッシュボードでアプリを選択し、[製品を追加]までスクロールし、[Facebookログイン]カードで[設定]をクリックします。左側のナビゲーションパネルで[設定]を選択し、[クライアントOAuth設定]の[有効なOAuthリダイレクトURI]フィールドに認証のためのリダイレクトURLを入力します。
ウェブページの読み込みで最初に実行する手順は、利用者がFacebookログインを使ってすでにウェブページにログインしているかどうかを調べることです。FB.getLoginStatusを呼び出すと、ログインステータスを取得するための呼び出しがFacebookに対して開始されます。次にFacebookにより、その結果を使用してコールバック関数が呼び出されます。
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});{
status: 'connected',
authResponse: {
accessToken: '{access-token}',
expiresIn:'{unix-timestamp}',
reauthorize_required_in:'{seconds-until-token-expires}',
signedRequest:'{signed-parameter}',
userID:'{user-id}'
}
}statusは、ウェブページ利用者のログインステータスを指定します。statusは、次のいずれかに設定できます。
Statusの種類 | 説明 |
|---|---|
| 利用者は現在Facebookにログインしており、ウェブページにもログインしたことがある。 |
| 利用者は現在Facebookにログインしているが、ウェブページにはログインしたことがない。 |
| 利用者は現在Facebookにログインしていないため、ウェブページにログインしたことがあるかどうかがわからない。FB.logout()が先に呼び出されているため、Facebookに接続できない。 |
ステータスがconnectedの場合、応答には次のauthResponseパラメーターが含まれています。
authResponseパラメーター | 値 |
|---|---|
| ウェブページ利用者のアクセストークン。 |
| トークンが期限切れになったときのUNIXタイムスタンプ。トークンが期限切れになった場合、利用者は再度ログインする必要があります。 |
| ログインが期限切れになって利用者による再ログインが必要になるまでの時間(秒数)。 |
| ウェブページ利用者に関する情報が入る署名付きパラメーター。 |
| ウェブページ利用者のID。 |
JavaScript SDKでは利用者のログインステータスが自動的に検出されるため、この動作を有効にするための作業は必要ありません。
ウェブページを開いた利用者がそのウェブページにログインしていない、またはFacebookにログインしていない場合、ログインダイアログを使用してウェブページとFacebookへのログインを促すことができます。利用者がFacebookにログインしていない場合は、最初にFacebookへのログインを促すプロンプトが表示され、次にウェブページへのログインを促すプロンプトが表示されます。
ログインには次の2つの方法があります。
Facebookログインボタンを使用するには、Facebookのプラグイン設定ツールを使用してログインボタンをカスタマイズし、コードを入手します。
独自のログインボタンを使用するには、FB.login()を呼び出してログインダイアログを起動します。
FB.login(function(response){
// handle the response
});利用者がHTMLボタンをクリックすると、ログインダイアログのポップアップウィンドウが表示されます。このダイアログを利用することにより、利用者のデータにアクセスするためのアクセス許可を依頼することができます。FB.login()関数呼び出しでは、scopeパラメーターを渡すことができます。このオプションパラメーターは、ウェブページから利用者のデータにアクセスするために利用者が承認する必要のあるアクセス許可をコンマで区切ったリストです。
このサンプルでは、あなたのウェブページが利用者の公開プロフィールとメールアドレスにアクセスするアクセス許可を持てる場合に、その利用者にログインするように促します。
FB.login(function(response) {
// handle the response
}, {scope: 'public_profile,email'});接続またはキャンセルの応答では、FB.login()を呼び出した時点で指定したコールバックに対して、authResponseオブジェクトが返されます。この応答は、FB.login()内で検出して処理できます。
FB.login(function(response) {
if (response.status === 'connected') {
// Logged into your webpage and Facebook.
} else {
// The person is not logged into your webpage or we are unable to tell.
}
});JavaScript SDK関数FB.logout()をボタンまたはリンクに追加することにより、利用者をウェブページからログアウトさせます。
FB.logout(function(response) {
// Person is now logged out
});注:この関数呼び出しを実行すると、利用者がFacebookからもログアウトされることがあります。
さらに、ウェブページからログアウトしても、その利用者がログイン中にそのウェブページに付与したアクセス許可は撤回されません。アクセス許可の撤回は、別個に実行する必要があります。ウェブページは、ログアウトした利用者が再度ログインする際にログインダイアログが表示されないようにビルドするようにしてください。
次のコードは、HTMLページにJavaScript SDKを読み込んで初期化します。{app-id}は自分のアプリIDに、また{api-version}は使用するグラフAPIのバージョンに置き換えます。古いバージョンを使用しなければならない理由が特になければ、最新のバージョンを指定してください。 v5.0.
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus().
console.log('statusChangeCallback');
console.log(response); // The current login status of the person.
if (response.status === 'connected') { // Logged into your webpage and Facebook.
testAPI();
} else { // Not logged into your webpage or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +
'into this webpage.';
}
}
function checkLoginState() { // Called when a person is finished with the Login Button.
FB.getLoginStatus(function(response) { // See the onlogin handler
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '{app-id}',
cookie : true, // Enable cookies to allow the server to access the session.
xfbml : true, // Parse social plugins on this webpage.
version : '{api-version}' // Use this Graph API version for this call.
});
FB.getLoginStatus(function(response) { // Called after the JS SDK has been initialized.
statusChangeCallback(response); // Returns the login status.
});
};
(function(d, s, id) { // Load the SDK asynchronously
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function testAPI() { // Testing Graph API after login. See statusChangeCallback() for when this call is made.
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
// The JS SDK Login Button
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>
</body>
</html>
