Facebookログインボタンを設置する方法


Facebookの認証を使用したアプリケーションを作る際に必要なlogin button設置の方針について今回は記事を書きます。

自作のWebアプリケーションでfacebookのログインを実装する方法は大きく2つあります。一つは、”Facebookが提供しているクライアント側のみで認証処理を行うJavaScript SDKを使う方法”。もう一つは、昔ながらの”サーバー側で認証の処理を行い、クライアント側には単なるボタンのリンクを貼る方法”です。

もちろんアプリケーションが提供する機能や実装の都合など、場合に応じて選択するアプローチは異なってくるでしょう。今回はボタンを設置する場合にデザインのカスタマイズや国際化という観点から両者を比較してみます。

 
1. Facebookが提供しているクライアント側のみで認証処理を行うJavaScript SDKを使う方法

Facebook’s JavaScript SDKを使用するとログインの処理だけではなくプロフィール情報の取得等様々なAPIを手軽にクライアント側のみの実装で利用することができます。
以下のFacebook Developer向けの記事ではlogin buttonの設置についてのクイックガイドが載っています。
https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.0
ドキュメントは充実していてoauth認証処理もsdkでやってくれるので、これから何かアプリケーションを作成する人にはおすすめです。

やることはまず以下のスクリプトをまず読み込む。

window.fbAsyncInit = function() {
    FB.init({
        appId      : '{your_app_id}',
        cookie     : true, 
        xfbml      : true,
        version    : 'v2.0'
    });
};

(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 = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

ボタン自身は以下をHTMLにペタリ。htmlのonloginのハンドラで認証結果に対する処理等を書けば良いです。

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button>

スクリプトの後半でsrcに”//connect.facebook.net/en_US/sdk.js”を代入している部分がsdk本体のロードしている部分です。
これで以下のようなFBログインボタンが完成。クリックすればちゃんとFBの認証画面がポップアップで表示されます。非常にお手軽。
スクリーンショット 2014-06-11 12.41.10

ボタンのラベルを国際化したい場合は以下のように読み込むSDKのURLを変更します。

“//connect.facebook.net/ja_JP/sdk.js”

そうすると”ログイン”と表示されます。
スクリーンショット 2014-06-11 12.41.40

したがって、アプリケーションが国際化する場合は、ロケールに応じて読み込むURLを変えれば良いです。
ただし、この場合表示されるボタンのデザインやラベルはfacebookにお任せとなり、カスタマイズはあまりできません(ボタンサイズの変更等はできる)。

サーバー側で認証処理を実装するのが面倒くさい場合やボタンの見た目にこだわらない場合に、JavaScript SDKを使った実装がおすすめです。

 
2. サーバー側で認証の処理を行い、クライアント側には単なるボタンのリンクを貼る

JavaSript SDKがあるなら従来のこの方法がいらないのでは?と思われるかもしれないですが、やはりサーバー側で認証処理を行う状況は頻繁にあります。
例えば自前でFacebookのAPIを利用したREST APIの実装等をする時に、サーバー側でtokenの認証が必要になるでしょう。

サーバーで認証し、クライアントはリンクを設置するだけという方式は、見た目のコントロールがSDKに縛られていないので自分で多言語対応などの拡張が可能です。(もちろん各言語の翻訳ラベルを用意が必要です)

javascript sdkを使用してURLをロケールに応じて変更した場合、表示される文字が”Login”や”ログイン”とシンプル過ぎますよね。そこで、例えば”Login with Facebook”や”Facebookにログイン”と表示させたい場合にどのようにすればよいか以下一つの例として紹介します。

Fb画像ダウンロードは以下のfacebook brandのページからします。
https://www.facebookbrand.com/
ただし、注意点として以下のセクション6に記述されているようなガイドラインを遵守する必要があります。
https://developers.facebook.com/docs/facebook-login/checklist/v1.0
例えばボタンのbackground-colorには#3b5998を使え、など指定されています。

さて、もし翻訳を事前に用意している場合は、ラベルの長さに応じてボタンのwidthが変化するボタンでなければなりません。
以下のHTMLとCSSがそのサンプルです。

HTML

<a class="FbBtn" href="https://www.facebook.com/dialog/oauth?client_id={your-app-id}&amp;redirect_uri={redirect-uri}">
   <div class="FbBtnLabel">Facebookでログイン</div>
</a>

CSS

.FbBtn {
    background-color: #3b5998;
    height: 45px;
    display: inline-block;
    position: relative;
    text-decoration: none;
    border-radius: 4px;
}

.FbBtn:after {
    content: "";
    position: absolute;
    top: 12px;
    left: 12px;
    width: 20px;
    height: 20px;
    background-image: url({ダウンロードしたfの画像を保存した場所});
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.FbBtnLabel {
    color: #ffffff;
    position: relative;
    top: 13px;
    text-align: center;
    margin: 0 20px 0 50px;
}

以下のように表示されるかと思います。ラベルを変更すればその長さに応じてバックグラウンドの長さも変わります。

スクリーンショット 2014-06-11 12.43.29

ざっと、この手法を使った時のメリット・デメリットをまとめます。
メリット
– ボタンの見た目、ラベルを調整することができる
– クライアント側のsdkのロードが不要
デメリット
– Facebookのガイドラインに則しているか注意が常に必要
– サーバー側の認証処理の実装が必要

 

以上。最近FB認証を使ったアプリを趣味で作り始めたので、ついでにFBボタン設置について今回ご紹介させていただきました。