Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / 技術 Tips & Tutorials / FacebookログインのJavascriptのSDKをサクッと試す方法

2018年3月30日 By KD コメントを書く

FacebookログインのJavascriptのSDKをサクッと試す方法

FacebookログインのJavascriptのSDKをサクッと試す方法

最近ではスタートアップ企業がログイン機能を付ける場合、名前とメールアドレスを利用した通常のログインを実装するのではなく、ソーシャルログインを実装するのが一般的になっています。これはログイン機能が本質的に価値を提供しないにもかかわらず、必ずサービスには必須なので低コストで実装したいという企業側と、新しいサービスを利用するたびに新しいアカウントを作りたくないというユーザ側の双方にメリットがあるからです。今回はソーシャルログインの中でも最も人気のあるFacebookログインを実装する前段階として、JavascriptのSDKを試す方法を紹介します。

見出し

  • 1 ソーシャルログインとは?
  • 2 Facebookログインとは?
  • 3 FacebookログインのJavascriptのSDKを軽く実装してみよう
    • 3.1 Facebook For Developersでアプリを登録する
    • 3.2 ドメインを登録する
    • 3.3 プラットフォームを選択する
    • 3.4 SDKを設定し、動作確認する
    • 3.5 Facebookログインボタンを実装する
  • 4 NodeJSでログイン状態を確認するAPIをスクラッチで実装しよう
    • 4.1 アプリケーションの準備
    • 4.2 Facebookのログイン状態確認用機能を実装する
    • 4.3 Expressでサーバーを実装する
    • 4.4 ログイン状態を確認する
  • 5 おまけ
    • 5.1 Facebookログインのテストはローカルホストでもできる
    • 5.2 実際のAPI実装にはPassportを使う
  • 6 最後に
  • 7 環境
    • 7.1 関連記事

ソーシャルログインとは?

ソーシャルログインとは、Facebook、Google、Twitter、LINEなどのSNSをすでに使用しているユーザが、新しいサービスを利用する時に新しくアカウントを作らずに、元々持っていたSNSアカウントを利用してログインを実現する仕組みです。

スタートアップ企業はログイン機能を自前で実装せずにソーシャルログインを実装することが多いです。Instagramが良い例です。

Facebookログインとは?

Facebookが提供しているソーシャルログインの仕組みです。ユーザはFacebookアカウントさえ持っていれば、別のサービス用に新しいアカウントを作ること無く、そのサービスにログインできます。今回はこの機能を実装します。

FacebookログインのJavascriptのSDKを軽く実装してみよう

まず、前提としてFacebookアカウントは持っているものとして進めます。持っていない人はいないと思いますし、実名でFacebookログインを実装したところでFacebookの人にしかばれないので大丈夫です。

Facebook For Developersでアプリを登録する

それでは、Facebook For Developersのサイトに行き、「ログイン」からFacebookアカウントでログインします。初めての場合は「スタート」ボタンに変わるので、クリックしましょう。

スクリーンショット 2018 02 21 13 33 04

FacebookログインはアプリケーションごとにIDを発行する形式になっているので、任意のアプリケーション名を決めて入力して下さい。今回は「sampleapp」として進めます。

ドメインを登録する

アプリ名を入力したら、以下のようにアプリのダッシュボードが表示されます。「設定 -> ベーシック」から「アプリドメイン」を入力して「変更を保存」をクリックして下さい。アプリドメインは後でも変えられるので、今回は「sampleapp.com」とします。この時にアプリIDをメモしておいて下さい。後で使います。

スクリーンショット 2018 02 21 13 44 01

プラットフォームを選択する

次に、プラットフォームを選びます。「プラットフォームを追加」をクリックします。

スクリーンショット 2018 02 21 13 51 25

すると、プラットフォームを選択する画面が表示されます。今回は「ウェブサイト」を選択しましょう。

スクリーンショット 2018 02 21 13 51 50

「サイトURL」を入力して、「クイックスタート」をクリックします。サイトURLも後で変えられるので、今回は「http://sampleapp.com」としましょう。

スクリーンショット 2018 02 21 13 52 22

すると、以下のクイックスタートのページが表示されます。

スクリーンショット 2018 02 21 13 53 03

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タグのすぐ下に設定します。

スクリーンショット 2018 02 21 13 53 31

次に、動作確認用のボタンのコードがあるので、これもまるっとコピーして、「index.html」の適当な場所に設定します。

スクリーンショット 2018 02 21 13 54 59

そうすると、「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との連携は完了です。

スクリーンショット 2018 02 21 0 48 29

Facebookログインボタンを実装する

Facebookが提供しているウィジェットはいくつかあるのですが、今回はもちろん「ログイン」を選びます。

スクリーンショット 2018 02 21 13 55 31

すると、いろいろなサンプルのある画面が表示されるのですが、今回は下の方にある「詳細なコードサンプル」のソースコードをそのまま使うことにします。全部まるっとコピーして、「index.html」を上書きして下さい。この時に「{your-app-id}」の部分を自分のアプリIDに置き換えて下さい。

スクリーンショット 2018 02 21 13 55 48

これだけで実装は完了なのですが、Facebookログインは最初の設定画面で設定したドメインからしか利用できないため、このままだとローカルで動作確認ができません。そこで、hostsファイルを変更することで対応します。

$ sudo vi /private/etc/hosts
...
127.0.0.1   sampleapp.com
...

これでローカルでもFacebookログインの動作確認ができるようになりました。

それでは確認していきましょう。

先ほどと同じように静的サーバを起動します。

$ yarn static

ブラウザから「http://sampleapp.com:3000」にアクセスします。すると、以下のようにログインボタンが表示されます。ログインボタンをクリックしてみましょう。

スクリーンショット 2018 02 21 15 10 00

いつものFacebookログインの画面が表示されるので、ログインをクリックします。

スクリーンショット 2018 02 21 15 10 33

以下が表示されれば成功です!

スクリーンショット 2018 02 21 15 10 52

ここまでで、もしうまくいかない場合は、ドメイン名を確認してみて下さい。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」が確認できますので、メモします。

スクリーンショット 2018 02 21 16 09 18

後は、ブラウザもしくはコマンドラインから「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」のままでもテストできます。

スクリーンショット 2018 02 22 21 58 56

実際のAPI実装にはPassportを使う

今回は簡単に動作確認をするAPIをスクラッチで作りましたが、一般的にはPassportのライブラリを使って実装し、コールバックURLでログイン後の画面に飛ばします。気になる方はPassportのサイトを見てみて下さい。

参考ですが、Passportでの実装時にコールバックURLの設定を忘れた場合に「URLを読み込めません: このURLのドメインはアプリのドメインに含まれていません。このURLを読み込むには、アプリ設定のアプリドメインにすべてのドメインとサブドメインを追加してください。」というエラーが出ます。というか、やりがちです。その場合は、以下のように「有効なOAuthコールバックURL」(画像の設定値は例です)を設定すればOKです。

スクリーンショット 2018 02 22 22 02 12

最後に

いかがでしたか?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
The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • [tips][Tumblr] Tumblrでソースコードをシンタックスハイライトする方法

    プログラマがTumblrをメインのブログにした時に困るのは、シンタックスハイライトです。私はめんどくさがりなので、シンタ…

  • ChatfuelでFacebookメッセンジャーを使うChatbot簡単入門

    AIの流行りと共に人気が出ているChatbotですが、最近ではサービスを使って簡単に作れるようになりました。今回はCha…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #2 基本機能実装編

    アメリカの友人と初めて職業について話していた時のことです。自分がエンジニアであることを言うと「Oh, you are p…

  • [tips][Subversion] TortoiseSVNのインストール方法

    SubversionのWindows用クライアントといえば、ダントツでTortoiseSVNです。TortoiseSVN…

  • [tips][perl] Perlで文字コードをいい感じに処理する方法

    日頃のつまらないルーチンワークは全てスクリプト化している俺です。スクリプトは動的言語であれば気楽にかけるので何でもよいの…

カテゴリ : 技術 Tips & Tutorials タグ : auth, facebook, nodejs

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • PythonでWebスクレイピング入門(Scrapy+Selenium編)
    PythonでWebスクレイピング入門(Scrapy+Selenium編)
  • SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
    SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
  • AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
    AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • [tips][Tumblr] Tumblrでソースコードをシンタックスハイライトする方法

    プログラマがTumblrをメインのブログにした時に困るのは、シンタックスハイライトです。私はめんどくさがりなので、シンタ…

  • ChatfuelでFacebookメッセンジャーを使うChatbot簡単入門

    AIの流行りと共に人気が出ているChatbotですが、最近ではサービスを使って簡単に作れるようになりました。今回はCha…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #2 基本機能実装編

    アメリカの友人と初めて職業について話していた時のことです。自分がエンジニアであることを言うと「Oh, you are p…

  • [tips][Subversion] TortoiseSVNのインストール方法

    SubversionのWindows用クライアントといえば、ダントツでTortoiseSVNです。TortoiseSVN…

  • [tips][perl] Perlで文字コードをいい感じに処理する方法

    日頃のつまらないルーチンワークは全てスクリプト化している俺です。スクリプトは動的言語であれば気楽にかけるので何でもよいの…

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes