{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/facebook-login-with-php/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"1d3df93c-331e-50cf-b669-27d442aba571","excerpt":"こんにちは。 先日、友達がシステムの実装を行なっている時に、 「phpでFacebookでログインを実装したいけど詰まった」と言っていまして、 そんな難しいものでもないだろうと思ったら、そのとおり簡単だったのですが 調べる事も結構ありましたので、 備忘録として、ここに残しておきます。 Facebook-php-sdk…","html":"

こんにちは。
\n先日、友達がシステムの実装を行なっている時に、

\n

「phpでFacebookでログインを実装したいけど詰まった」と言っていまして、

\n

そんな難しいものでもないだろうと思ったら、そのとおり簡単だったのですが

\n

調べる事も結構ありましたので、

\n

備忘録として、ここに残しておきます。

\n\n

Facebook-php-sdkを用意

\n

有難いことに、Facebook公式がsdkを公開してくれています。

\n

これがあるのと無いのでは天と地との差があります。

\n

さくっと手に入れてしまいましょう。

\n

リンクはこちら。https://github.com/facebook/Facebook-php-sdk

\n

上記のリンクをクリックして、「ZIP」をクリック。

\n

ダウンロードが始まるので、適当なディレクトリに解凍して、

\n

「src」フォルダとその中身を、Facebookでログインを使いたいphpファイルと同じ場所へ置いて下さい。

\n

これでOKです。次に行きましょう。

\n

アプリケーションを作成

\n

Facebookでログインをするには、ユーザ情報を得る元となるアプリケーションが必要になります。

\n

Twitterでも同様ですね。では早速作っていきます。

\n

ですが、アプリケーションの作成については多くの資料があり、

\n

まんまコピー&ペーストで出来たので参考にさせて頂いたリンクをご紹介します。あとはぐぐれ。

\n\n

アプリケーションの作成は手順はやや多いですが、

\n

上記のサイト様を見ればすぐに分かると思います。

\n

アプリケーションが作成できたら、次へ進みましょう。

\n

処理の流れ

\n

Facebook-php-sdkのソースを見れば、

\n

丁寧に書かれているので、分かると思うのですが、それじゃ備忘録にならないので書きます。笑

\n

ソース読むのに抵抗がある。

\n

という方もいると思うので、手順を噛み砕きます。

\n

必要なファイル構成

\n

まずこれを整えます。同じディレクトリに、srcとindex.phpを置きます。こんな感じ。

\n
/\n    +- src（facebook-php-sdkのsrcです）\n    +- index.php
\n

今回は、この構成で実装します。たったこれだけです。

\n

説明の前に、実際に動くサンプルを作りましたので、そちらを参考にしてみて下さい。

\n

ログインをして、ユーザ情報を表示するだけのサンプルです。

\n

「facebookでログイン」動作サンプル

\n

サンプルを見ればなんとなく分かると思います。

\n

ログイン時には、

\n

index.php -> Facebook -> アプリで設定したURLへリダイレクト(ログイン完了)

\n

という順番になります。ログアウトするときは、

\n

index.php -> Facebook -> 指定したURLへリダイレクト -> セッションをリセット -> ログアウト完了

\n

と、少々手順が増えます。

\n

このような処理を実際に書いていきます。

\n

ただ、サンプルは無駄なものが多めに入っているので、最低限必要な機能だけを書いていきます。

\n

いざ実装。

\n

さて、お待ちかねの実装です。

\n

まずいじるファイルは「index.php」です。
\nindex.phpを開いて下記の内容を記入。

\n

**※<?php

\n

の?の手前にスペースが空いていますが、削除して下さい。**

\n
<?php\n\n// facebookSDKを読み込み\nrequire_once(\"src/facebook.php\");\n\n// アプリの情報を$configに格納\n$config = array(\n  'appId' => \"登録したアプリのID\",\n  'secret' => \"取得したアプリのsecret\"\n);\n\n$facebook = new Facebook($config);\n$user = $facebook->getUser();
\n

まずはこれだけ。

\n

これで、もしindex.phpにアクセスしたユーザーがアプリにログインしていれば、

\n

$userにはユーザIDが入っています。

\n

ログインしている場合と、していない場合で処理を分けたいので、

\n

index.phpに下記を追加して下さい。

\n
// もしユーザがログインしていたら\nif ( $user ) {\n\t// ログアウトURLを生成\n\t$logoutUrl = $facebook->getLogoutUrl();\n\t// ユーザ情報を取得\n\t$user_info = $facebook->getUser();\n\t// ログアウト用のリンクを出力\n\techo \"[ログアウト](\".$logoutUrl.\")\";\n\t// ユーザ情報を出力\n\tprint_r($user_info);\n} else {\n\t// ログインURLを生成\n\t$loginUrl = $facebook->getLoginUrl();\n\techo \"[facebookでログイン！](\".$loginUrl.\")\";\n}
\n

実にシンプルですが、これで完了です。

\n

作成したindex.phpをサーバにアップロードして、アクセスしてみて下さい。

\n

いかがでしょうか。

\n

リファレンス通りにやった（言い訳）のですが、動かないなど何かしらの不具合が御座いましたら、

\n

コメントにてご一報よろしくお願い致します。

\n

ちなみに私はログアウトが上手く動かなかったため、上記のgetLogoutUrl()ではなく、

\n

自前でログアウト用のURLと、多少の処理を付け加えました。

\n

それについては、また別の記事として書きます。

","timeToRead":5,"frontmatter":{"title":"phpで「facebookでログイン」を実装するまで","tags":["Facebook","PHP"],"date":"November 21, 2012","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='159'%20viewBox='0%200%20400%20159'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2080v79h401V0H0v80m88-53c-3%201-6%204-6%208l-2%202-2%203%202%203c2%200%202%201%202%2010v10h4c5-1%205%200%205-13v-7h3c3%200%203%200%203-3%200-2-1-3-4-3-5%200-4-4%202-4%203%200%205-4%203-5-1-1-7-2-10-1m106%200l-1%2018v18h6l8%201c5%201%2010-2%2012-8%205-12-3-23-13-19l-4%202V27l-4-1-4%201m99%200l-1%2018v18h4l4-1v-5c1-6%202-6%206%200s4%206%209%206h5l-4-6-5-8%204-6%204-6h-5c-4%200-5%200-8%205l-5%204V27l-4-1-4%201M109%2037l-5%201c-1%200-2%201-2%203%200%203%200%203%205%202h7c4%201%204%203-2%203-7%201-11%203-12%206-3%208%206%2015%2013%2010h4l4%201h5v-9c0-10-1-14-4-16-3-1-11-2-13-1m35%200c-9%202-12%206-12%2014%200%209%209%2015%2020%2012%204-1%204-1%204-5s0-4-2-3c-3%202-9%202-11%200-3-2-2-8%200-10%202-3%207-3%2010-1s3%202%203%200c1-4%200-6-2-6-3-1-9-2-10-1m26%200c-7%202-10%206-10%2013%200%2010%209%2016%2022%2013%205-1%205-1%205-5%200-3%200-3-2-2-4%201-13%201-15-1-3-2-2-3%208-3h10l-1-4c0-9-8-14-17-11m64%200c-6%201-9%206-9%2013%200%206%200%207%203%2010%2010%208%2025%203%2025-10%200-10-8-16-19-13m33%200c-8%202-12%2011-9%2019%204%209%2018%2010%2024%203%209-11-1-26-15-22m-30%206c-5%202-5%2012%200%2014s7-1%207-7c-1-6-3-8-7-7m31%201c-2%202-3%208-1%2011s8%203%209-1c3-8-3-15-8-10m-65%200c-2%201-1%2013%201%2013%203%202%207-1%208-4%201-7-4-12-9-9m-56%2055v18l1%2016h9v-11l6-1c9-1%2013-4%2013-12%200-5-2-7-7-10-3-2-21-1-22%200m35%200v18l1%2016h9v-16h6l7%201v7l1%208h8V98h-9v13h-13V98h-5l-5%201m40%2016l1%2018h8v-6l1-5%206-1c9-1%2013-5%2013-13%200-7-6-10-19-10h-10v17'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.511278195488722,"src":"/static/3757e4c86f2ce3a97aedf76f2f17975d/741c1/featured-image.jpg","srcSet":"/static/3757e4c86f2ce3a97aedf76f2f17975d/466a3/featured-image.jpg 334w,\n/static/3757e4c86f2ce3a97aedf76f2f17975d/741c1/featured-image.jpg 604w","srcWebp":"/static/3757e4c86f2ce3a97aedf76f2f17975d/e33b9/featured-image.webp","srcSetWebp":"/static/3757e4c86f2ce3a97aedf76f2f17975d/cd98f/featured-image.webp 334w,\n/static/3757e4c86f2ce3a97aedf76f2f17975d/e33b9/featured-image.webp 604w","sizes":"(max-width: 604px) 100vw, 604px"}}}}}},"pageContext":{"slug":"/facebook-login-with-php/","previous":{"fields":{"slug":"/catalog/"},"frontmatter":{"title":"[DEBUG] All elements","tags":["Debug"]}},"next":{"fields":{"slug":"/eyecatch-with-wordpress/"},"frontmatter":{"title":"WordPressの投稿一覧にアイキャッチ画像を表示させたいときのメモ","tags":null}}}}, "staticQueryHashes": ["2585454260","2954598359"]}