最近ではスタートアップ企業がログイン機能を付ける場合、名前とメールアドレスを利用した通常のログインを実装するのではなく、ソーシャルログインを実装するのが一般的になっています。これはログイン機能が本質的に価値を提供しないにもかかわらず、必ずサービスには必須なので低コストで実装したいという企業側と、新しいサービスを利用するたびに新しいアカウントを作りたくないというユーザ側の双方にメリットがあるからです。今回はソーシャルログインの中でも最も人気のあるFacebookログインを実装する前段階として、JavascriptのSDKを試す方法を紹介します。
見出し
ソーシャルログインとは？
ソーシャルログインとは、Facebook、Google、Twitter、LINEなどのSNSをすでに使用しているユーザが、新しいサービスを利用する時に新しくアカウントを作らずに、元々持っていたSNSアカウントを利用してログインを実現する仕組みです。
スタートアップ企業はログイン機能を自前で実装せずにソーシャルログインを実装することが多いです。Instagramが良い例です。
Facebookログインとは？
Facebookが提供しているソーシャルログインの仕組みです。ユーザはFacebookアカウントさえ持っていれば、別のサービス用に新しいアカウントを作ること無く、そのサービスにログインできます。今回はこの機能を実装します。
FacebookログインのJavascriptのSDKを軽く実装してみよう
まず、前提としてFacebookアカウントは持っているものとして進めます。持っていない人はいないと思いますし、実名でFacebookログインを実装したところでFacebookの人にしかばれないので大丈夫です。
Facebook For Developersでアプリを登録する
それでは、Facebook For Developersのサイトに行き、「ログイン」からFacebookアカウントでログインします。初めての場合は「スタート」ボタンに変わるので、クリックしましょう。
FacebookログインはアプリケーションごとにIDを発行する形式になっているので、任意のアプリケーション名を決めて入力して下さい。今回は「sampleapp」として進めます。
ドメインを登録する
アプリ名を入力したら、以下のようにアプリのダッシュボードが表示されます。「設定 -> ベーシック」から「アプリドメイン」を入力して「変更を保存」をクリックして下さい。アプリドメインは後でも変えられるので、今回は「sampleapp.com」とします。この時にアプリIDをメモしておいて下さい。後で使います。
プラットフォームを選択する
次に、プラットフォームを選びます。「プラットフォームを追加」をクリックします。
すると、プラットフォームを選択する画面が表示されます。今回は「ウェブサイト」を選択しましょう。
「サイトURL」を入力して、「クイックスタート」をクリックします。サイトURLも後で変えられるので、今回は「http://sampleapp.com」としましょう。
すると、以下のクイックスタートのページが表示されます。
SDKを設定し、動作確認する
ここで、SDKの設定と動作確認をするためにはHTMLが必要なので、今回用のフォルダを作って簡単なHTMLを作成します。今回はNPMのパッケージを利用するためのYarnを使います。
$ mkdir facebook-login
$ cd facebook-login
$ yarn init -y
$ yarn add static-server --dev
$ vi package.json
...
"scripts": {
"start": "node server.js"
"static": "static-server -i public/index_test.html -p 3000"
},
...
$ mkdir public
$ touch public/index.html
クイックスタートの画面を見ていくと、最初に「Facebook SDK for Javascriptの設定」が表示されています。このコードをまるっとコピーして、「index.html」のbodyタグのすぐ下に設定します。
次に、動作確認用のボタンのコードがあるので、これもまるっとコピーして、「index.html」の適当な場所に設定します。
そうすると、「index.html」の中身は、以下のようになります。「{your-app-id}」は自分のアプリIDに置き換えて下さい。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Facebook Auth!</title>
</head>
<body>
<script>
window.fbAsyncInit = function () {
FB.init({
appId: '{your-app-id}',
xfbml: true,
version: 'v2.12'
});
FB.AppEvents.logPageView();
};
(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'));
</script>
<h1>Hello Facebook Auth!</h1>
<div>
<div class="fb-like" data-share="true" data-width="450" data-show-faces="true">
</div>
</div>
</body>
</html>
では、Yarnを使って静的サーバ上で「index.html」を起動します。
$ yarn static
...
* Static server successfully started.
* Serving files at: http://localhost:3000
* Press Ctrl+C to shutdown.
ブラウザから「http://localhost:3000」にアクセスして、以下の画面が表示されればSDKとの連携は完了です。
Facebookログインボタンを実装する
Facebookが提供しているウィジェットはいくつかあるのですが、今回はもちろん「ログイン」を選びます。
すると、いろいろなサンプルのある画面が表示されるのですが、今回は下の方にある「詳細なコードサンプル」のソースコードをそのまま使うことにします。全部まるっとコピーして、「index.html」を上書きして下さい。この時に「{your-app-id}」の部分を自分のアプリIDに置き換えて下さい。
これだけで実装は完了なのですが、Facebookログインは最初の設定画面で設定したドメインからしか利用できないため、このままだとローカルで動作確認ができません。そこで、hostsファイルを変更することで対応します。
$ sudo vi /private/etc/hosts
...
127.0.0.1 sampleapp.com
...
これでローカルでもFacebookログインの動作確認ができるようになりました。
それでは確認していきましょう。
先ほどと同じように静的サーバを起動します。
$ yarn static
ブラウザから「http://sampleapp.com:3000」にアクセスします。すると、以下のようにログインボタンが表示されます。ログインボタンをクリックしてみましょう。
いつものFacebookログインの画面が表示されるので、ログインをクリックします。
以下が表示されれば成功です！
ここまでで、もしうまくいかない場合は、ドメイン名を確認してみて下さい。Facebookのデベロパーページのアプリに設定したドメイン名と、hostsファイルのドメイン名が完全に一致している必要があります。加えて、ソースコード上のアプリIDも正しい値が設定されている必要があります。
NodeJSでログイン状態を確認するAPIをスクラッチで実装しよう
Facebookログインの実装が完了したところで、今度はNodeJSでFacebookのAPIを利用して、ユーザのログイン状態を確認していきましょう。
アプリケーションの準備
まずはフォルダやファイルを作り、必要なパッケージをインストールしましょう。
$ yarn add express request
$ touch server.js
$ mkdir helpers
$ touch helpers/facebook_auth.js
$ tree -L 2 -I node_modules
.
├── helpers
│ └── facebook_auth.js
├── package.json
├── public
│ └── index.html
├── server.js
└── yarn.lock
Facebookのログイン状態確認用機能を実装する
Facebookのログイン状態の確認にはFacebookのGpaph APIを利用します。APIドキュメントを確認すると「https://graph.facebook.com/me」にアクセストークンを用いてアクセスすればユーザIDとユーザ名を取得できます。ログインされている状態ではアクセストークンが有効なので、アクセストークンを利用してユーザIDとユーザ名が取得できれば、ログインしていることが判断できます。
「facebook_auth.js」は以下の実装になります。
const request = require('request');
const FACEBOOK_GRAPH_URL = 'https://graph.facebook.com/me?access_token=';
verifyToken = (userId, accessToken) => {
return new Promise((resolve, reject) => {
request.get(FACEBOOK_GRAPH_URL + accessToken, (err, res) => {
if (err) return reject(err);
const id = JSON.parse(res.body).id;
if (id === userId) {
resolve(true);
} else {
resolve(false);
}
});
});
};
module.exports = { verifyToken };
単にGraph APIのレスポンスにユーザIDが含まれているかを確認しているだけのシンプルなコードです。
Expressでサーバーを実装する
「server.js」はExpressを使って以下のように実装します。
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
const facebookAuth = require('./helpers/facebook_auth');
app.use(express.static('./public'));
app.get('/api/auth', (req, res) => {
const userId = req.query.userId;
const accessToken = req.query.accessToken;
if (!userId) {
return res.status(400).send('User ID NOT provided');
}
if (!accessToken) {
return res.status(400).send('Access token NOT provided');
}
facebookAuth
.verifyToken(userId, accessToken)
.then(isValid => {
if (isValid) {
res.status(200).json({ message: 'The user is logging in' });
} else {
res.status(401).json({ message: 'The user is NOT logging in' });
}
})
.catch(err => {
res.status(500).send(err);
});
});
app.listen(port, () => {
console.log(`Server is starting on ${port}...`);
});
「/api/auth」にGETされた時にユーザIDとアクセストークンをリクエストから受け取る仕組みです。より実践的にはクッキーを使うと良いでしょう。
ログイン状態を確認する
やっとここまできました。それでは、Yarnからサーバーを起動してログイン状態を確認しましょう。
$ yarn start
...
Server is starting on 3000...
ブラウザから「http://sampleapp.com」にアクセスし、「Option+Command+I」でブラウザのコンソールを開きます。ログインしていれば「userID」と「accessToken」が確認できますので、メモします。
後は、ブラウザもしくはコマンドラインから「http://sampleapp.com/api/auth」にアクセスしてログインされているか確認できれば完了です。
今回はコマンドラインから確認してみましょう。もちろん「{userID}」と「{accessToken}」は先程メモした値に置き換えて下さい。
$ curl "http://sampleapp.com:3000/api/auth?userId={userID}&accessToken={accessToken}" | jq
...
{
"message": "The user is logging in"
}
ログインされていると返ってきています！
これで簡単ではありますが、NodeJSで作った自作APIでログイン状態を確認することができました。
おまけ
Facebookログインのテストはローカルホストでもできる
今回はドメインを「sampleapp.com」として進めましたが、実は「localhost」のままでもテストできます。
実際のAPI実装にはPassportを使う
今回は簡単に動作確認をするAPIをスクラッチで作りましたが、一般的にはPassportのライブラリを使って実装し、コールバックURLでログイン後の画面に飛ばします。気になる方はPassportのサイトを見てみて下さい。
参考ですが、Passportでの実装時にコールバックURLの設定を忘れた場合に「URLを読み込めません: このURLのドメインはアプリのドメインに含まれていません。このURLを読み込むには、アプリ設定のアプリドメインにすべてのドメインとサブドメインを追加してください。」というエラーが出ます。というか、やりがちです。その場合は、以下のように「有効なOAuthコールバックURL」（画像の設定値は例です）を設定すればOKです。
最後に
いかがでしたか？FacebookログインはSDKを使えば実装は簡単ですよね。あまりにもサクッと実装できてしまうので、サービスがヒットしてログイン機能を自前で実装する必要が出てきたら嫌になるほどです。今後何かサービスを立ち上げる時はFacebookログインなどのソーシャルログインを試してみて下さい。次回は、ExpressとPassportを使ってもう少し踏み込んだ実装を紹介します。
環境
- PC : macOS High Sierra 10.13.3
- NodeJS : v9.5.0
- Yarn : 1.3.2
- static-server : 3.0.0
- express : 4.16.2
- request : 2.83.0
最新記事 by KD (全て見る)
関連記事
コメントを残す