JavaScript SDKを使用したウェブ向けのFacebookログイン
このドキュメントでは、JavaScript用Facebook SDKを使用したFacebookログインをウェブページに実装する手順を説明します。
開始する前に
次のものが必要です。
- ウェブサイトのFacebookアプリID
基本的な自動ログインの例
次のコード例は、JavaScript用Facebook SDKをウェブページに追加して、SDKを初期化する方法を示しています。Facebookにログインしている場合は、名前とメールアドレスが表示されます。Facebookにログインしていない場合は、ログインダイアログのポップアップウィンドウが自動的に表示されます。
public_profileアクセス許可(名前やプロフィール写真など、一般公開されている情報を取得する)、およびemailアクセス許可に、アプリレビューは不要です。これらは、Facebookログインを使用するすべてのアプリに自動的に付与されます。
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<h2>Add Facebook Login to your webpage</h2>
<!-- Set the element id for the JSON response -->
<p id="profile"></p>
<script>
<!-- Add the Facebook SDK for Javascript -->
(function(d, s, id){
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')
);
window.fbAsyncInit = function() {
<!-- Initialize the SDK with your app and the Graph API version for your app -->
FB.init({
appId : '{your-facebook-app-id}',
xfbml : true,
version : '{the-graph-api-version-for-your-app}'
});
<!-- If you are logged in, automatically get your name and email adress, your public profile information -->
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', {fields: 'name, email'}, function(response) {
document.getElementById("profile").innerHTML = "Good to see you, " + response.name + ". i see your email address is " + response.email
});
} else {
<!-- If you are not logged in, the login dialog will open for you to login asking for permission to get your public profile and email -->
console.log('User cancelled login or did not fully authorize.'); }
});
};
</script>
</body>
</html>1.FacebookログインのJavaScript SDKを有効にする
アプリダッシュボードでアプリを選択し、[製品を追加]までスクロールして、[Facebookログイン]カードの[設定]をクリックします。左側のナビゲーションパネルで[設定]を選択し、[クライアントOAuth設定]の[有効なOAuthリダイレクトURI]フィールドに認証用のリダイレクトURLを入力します。
JavaScript SDKをログインに使用することを示すために[JavaScript SDKでログイン]トグルを[はい]に設定し、SDKをホストするページのドメインを[JavaScript SDKに許可されたドメイン]リストに入力します。これにより、許可されたドメインのコールバックに対してのみ、アクセストークンが返されるようになります。Facebook JavaScript SDKを使用した認証アクションは、HTTPSページのみに対応しています。
2.利用者のログインステータスを確認する
ウェブページの読み込みで最初に実行する手順は、利用者がFacebookログインを使ってすでにウェブページにログインしているかどうかを調べることです。FB.getLoginStatusの呼び出しにより、ログインステータスを取得するためのFacebookへの呼び出しが開始されます。次にFacebookにより、その結果を使用してコールバック関数が呼び出されます。
呼び出しの例
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});JSON応答の例
{
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では利用者のログインステータスが自動的に検出されるため、この動作を有効にするための作業は必要ありません。
3.利用者をログインさせる
ウェブページを開いた利用者が、そのページまたはFacebookにログインしていない場合は、ログインダイアログを使用してウェブページとFacebookへのログインを促すことができます。利用者がFacebookにログインしていない場合は、最初にFacebookへのログインを促すプロンプトが表示され、次にウェブページへのログインを促すプロンプトが表示されます。
ログインには次の2つの方法があります。
- JavaScript SDKのログインダイアログ
A.ログインボタンによるログイン
Facebookログインボタンを使用するには、Facebookのプラグイン設定ツールを使用してログインボタンをカスタマイズし、コードを取得します。
B.Javascript SDKのログインダイアログによるログイン
独自のログインボタンを使用するには、FB.login()を呼び出してログインダイアログを起動します。
FB.login(function(response){
// handle the response
});付加的なアクセス許可を依頼する
利用者がHTMLボタンをクリックすると、ログインダイアログのポップアップウィンドウが表示されます。このダイアログを使用して、利用者のデータにアクセスするためのアクセス許可を依頼できます。FB.login()関数呼び出しとともに、scopeパラメーターを渡すことができます。このオプションのパラメーターは、ウェブページが利用者のデータにアクセスするために利用者の承認が必要なアクセス許可をコンマで区切ったリストです。外部ユーザーが使用できるようにするには、Facebookログインにpublic_profileの詳細アクセス許可が必要です。
呼び出しの例
この例では、あなたのウェブページが利用者の公開プロフィールとメールアドレスにアクセスするアクセス許可を持つことができる場合に、その利用者にログインするように促します。
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.
}
});4.利用者をログアウトさせる
利用者をウェブページからログアウトさせるには、JavaScript SDK関数FB.logout()をボタンまたはリンクにアタッチします。
呼び出しの例
FB.logout(function(response) {
// Person is now logged out
});注: この関数呼び出しを実行すると、利用者がFacebookからもログアウトされることがあります。
考慮するシナリオ
- 利用者がFacebookにログインした後、ウェブページにログインする。アプリからのログアウト時に、利用者は引き続きFacebookにログインしている。
- 利用者がウェブページにログインし、アプリのログインフローの一環としてFacebookにログインする。アプリからのログアウト時に、利用者はFacebookからもログアウトする。
- 利用者が別のウェブページにログインし、そのウェブページのログインフローの一環としてFacebookにログインして、その後、最初のウェブページにもログインする。いずれかのウェブページからのログアウト時に、利用者はFacebookからログアウトする。
さらに、ウェブページからログアウトしても、その利用者がログイン中にそのウェブページに付与したアクセス許可は撤回されません。アクセス許可の取り消しは、別個に実行する必要があります。ウェブページは、ログアウトした利用者が再度ログインする際にログインダイアログが表示されないようにビルドするようにしてください。
全コードの例
次のコードは、HTMLページにJavaScript SDKを読み込んで初期化します。{app-id}はアプリIDに置き換え、{api-version}は使用するグラフAPIのバージョンに置き換えてください。古いバージョンを使用しなければならない理由が特になければ、最新のバージョン v21.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 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>
<!-- Load the JS SDK asynchronously -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>
</html>