Note初級・中級のエンジニアやデザイナー向けに技術情報と英語学習情報を提供中。最近ではスタートアップ企業がログイン機能を付ける場合、名前とメールアドレスを利用した通常のログインを実装するのではなく、ソーシャルログインを実装するのが一般的になっています。これはログイン機能が本質的に価値を提供しないにもかかわらず、必ずサービスには必須なので低コストで実装したいという企業側と、新しいサービスを利用するたびに新しいアカウントを作りたくないというユーザ側の双方にメリットがあるからです。今回はソーシャルログインの中でも最も人気のあるFacebookログインを実装する前段階として、JavascriptのSDKを試す方法を紹介します。関連記事ソーシャルログインとは?ソーシャルログインとは、Facebook、Google、Twitter、LINEなどのSNSをすでに使用しているユーザが、新しいサービスを利用する時に新しくアカウントを作らずに、元々持っていたSNSアカウントを利用してログインを実現する仕組みです。スタートアップ企業はログイン機能を自前で実装せずにソーシャルログインを実装することが多いです。Instagramが良い例です。Facebookログインとは?Facebookが提供しているソーシャルログインの仕組みです。ユーザはFacebookアカウントさえ持っていれば、別のサービス用に新しいアカウントを作ること無く、そのサービスにログインできます。今回はこの機能を実装します。FacebookログインのJavascriptのSDKを軽く実装してみようまず、前提としてFacebookアカウントは持っているものとして進めます。持っていない人はいないと思いますし、実名でFacebookログインを実装したところでFacebookの人にしかばれないので大丈夫です。Developersのサイトに行き、「ログイン」からFacebookアカウントでログインします。場合は「スタート」ボタンに変わるので、クリックしましょう。FacebookログインはアプリケーションごとにIDを発行する形式になっているので、任意のアプリケーション名を決めて入力して下さい。今回は「sampleapp」として進めます。ドメインを登録するアプリ名を入力したら、以下のようにアプリのダッシュボードが表示されます。ベーシック」から「アプリドメイン」を入力して「変更を保存」をクリックして下さい。アプリドメインは後でも変えられるので、今回は「sampleapp.com」とします。この時にアプリIDをメモしておいて下さい。プラットフォームを選択する次に、プラットフォームを選びます。「プラットフォームを追加」をクリックします。すると、プラットフォームを選択する画面が表示されます。今回は「ウェブサイト」を選択しましょう。「サイトURL」を入力して、「クイックスタート」をクリックします。サイトURLも後で変えられるので、今回は「http://sampleapp.com」としましょう。すると、以下のクイックスタートのページが表示されます。SDKを設定し、動作確認するここで、SDKの設定と動作確認をするためにはHTMLが必要なので、今回用のフォルダを作って簡単なHTMLを作成します。今回はNPMのパッケージを利用するためのYarnを使います。Javascriptの設定」が表示されています。このコードをまるっとコピーして、「index.html」のbodyタグのすぐ下に設定します。次に、動作確認用のボタンのコードがあるので、これもまるっとコピーして、「index.html」の適当な場所に設定します。すると、「index.html」の中身は、以下のようになります。「{your-app-id}」は自分のアプリIDに置き換えて下さい。</div></body></html>では、Yarnを使って静的サーバ上で「index.html」を起動します。shutdown.ブラウザから「http://localhost:3000」にアクセスして、以下の画面が表示されればSDKとの連携は完了です。Facebookログインボタンを実装するFacebookが提供しているウィジェットはいくつかあるのですが、今回はもちろん「ログイン」を選びます。すると、いろいろなサンプルのある画面が表示されるのですが、今回は下の方にある「詳細なコードサンプル」のソースコードをそのまま使うことにします。全部まるっとコピーして、「index.html」を上書きして下さい。この時に「{your-app-id}」の部分を自分のアプリIDに置き換えて下さい。これだけで実装は完了なのですが、Facebookログインは最初の設定画面で設定したドメインからしか利用できないため、このままだとローカルで動作確認ができません。そこで、hostsファイルを変更することで対応します。sampleapp.com...これでローカルでもFacebookログインの動作確認ができるようになりました。それでは確認していきましょう。先ほどと同じように静的サーバを起動します。staticブラウザから「http://sampleapp.com:3000」にアクセスします。すると、以下のようにログインボタンが表示されます。ログインボタンをクリックしてみましょう。いつものFacebookログインの画面が表示されるので、ログインをクリックします。以下が表示されれば成功です!ここまでで、もしうまくいかない場合は、ドメイン名を確認してみて下さい。Facebookのデベロパーページのアプリに設定したドメイン名と、hostsファイルのドメイン名が完全に一致している必要があります。加えて、ソースコード上のアプリIDも正しい値が設定されている必要があります。NodeJSでログイン状態を確認するAPIをスクラッチで実装しようFacebookログインの実装が完了したところで、今度はNodeJSでFacebookのAPIを利用して、ユーザのログイン状態を確認していきましょう。アプリケーションの準備まずはフォルダやファイルを作り、必要なパッケージをインストールしましょう。APIドキュメントを確認すると「https://graph.facebook.com/me」にアクセストークンを用いてアクセスすればユーザIDとユーザ名を取得できます。ログインされている状態ではアクセストークンが有効なので、アクセストークンを利用してユーザIDとユーザ名が取得できれば、ログインしていることが判断できます。「facebook_auth.js」は以下の実装になります。APIのレスポンスにユーザIDが含まれているかを確認しているだけのシンプルなコードです。Expressでサーバーを実装する「server.js」はExpressを使って以下のように実装します。${port}...`);});「/api/auth」にGETされた時にユーザIDとアクセストークンをリクエストから受け取る仕組みです。実践的にはクッキーを使うと良いでしょう。ログイン状態を確認するやっとここまできました。それでは、Yarnからサーバーを起動してログイン状態を確認しましょう。3000...ブラウザから「http://sampleapp.com」にアクセスし、「Option+Command+I」でブラウザのコンソールを開きます。ログインしていれば「userID」と「accessToken」が確認できますので、メモします。後は、ブラウザもしくはコマンドラインから「http://sampleapp.com/api/auth」にアクセスしてログインされているか確認できれば完了です。今回はコマンドラインから確認してみましょう。「{userID}」と「{accessToken}」は先程メモした値に置き換えて下さい。in"}ログインされていると返ってきています!これで簡単ではありますが、NodeJSで作った自作APIでログイン状態を確認することができました。おまけFacebookログインのテストはローカルホストでもできる今回はドメインを「sampleapp.com」として進めましたが、実は「localhost」のままでもテストできます。実際のAPI実装にはPassportを使う今回は簡単に動作確認をするAPIをスクラッチで作りましたが、一般的にはPassportのライブラリを使って実装し、コールバックURLでログイン後の画面に飛ばします。気になる方はPassportのサイトを見てみて下さい。このURLのドメインはアプリのドメインに含まれていません。このURLを読み込むには、アプリ設定のアプリドメインにすべてのドメインとサブドメインを追加してください。」というエラーが出ます。いうか、やりがちです。その場合は、以下のように「有効なOAuthコールバックURL」(画像の設定値は例です)を設定すればOKです。最後にいかがでしたか?FacebookログインはSDKを使えば実装は簡単ですよね。あまりにもサクッと実装できてしまうので、サービスがヒットしてログイン機能を自前で実装する必要が出てきたら嫌になるほどです。今後何かサービスを立ち上げる時はFacebookログインなどのソーシャルログインを試してみて下さい。次回は、ExpressとPassportを使ってもう少し踏み込んだ実装を紹介します。最新の記事Keid自由で楽しい世界を目指すフルスタックWebデベロッパー。大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。Tumblrでソースコードをシンタックスハイライトする方法プログラマがTumblrをメインのブログにした時に困るのは、シンタックスハイライトです。私はめんどくさがりなので、シンタ...ChatfuelでFacebookメッセンジャーを使うChatbot簡単入門AIの流行りと共に人気が出ているChatbotですが、最近ではサービスを使って簡単に作れるようになりました。基本機能実装編アメリカの友人と初めて職業について話していた時のことです。TortoiseSVNのインストール方法SubversionのWindows用クライアントといえば、ダントツでTortoiseSVNです。日頃のつまらないルーチンワークは全てスクリプト化している俺です。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。AuthorKeid自由で楽しい世界を目指すフルスタックWebデベロッパー。大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。バッチで明日の日付を計算する。0.0010このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。最新の記事Keid自由で楽しい世界を目指すフルスタックWebデベロッパー。大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。Tumblrでソースコードをシンタックスハイライトする方法プログラマがTumblrをメインのブログにした時に困るのは、シンタックスハイライトです。私はめんどくさがりなので、シンタ...ChatfuelでFacebookメッセンジャーを使うChatbot簡単入門AIの流行りと共に人気が出ているChatbotですが、最近ではサービスを使って簡単に作れるようになりました。基本機能実装編アメリカの友人と初めて職業について話していた時のことです。TortoiseSVNのインストール方法SubversionのWindows用クライアントといえば、ダントツでTortoiseSVNです。日頃のつまらないルーチンワークは全てスクリプト化している俺です。