PHPでソーシャル(SNS)ログインする方法2018

久しぶりにソーシャル(SNS)ログインを実装する機会があった。以前に対応方法を書いておいたのでそのままいけるかと思ったが、所々躓いたので2018年版として新たにメモ。尚、使用するSNSはFacebook / Twitter /  Googleとする。

opauthをダウンロード

以下よりダウンロードする。

https://github.com/opauth/opauth

ディレクトリとURLは以下と想定する。

/ドキュメントルート/user/login

http://test.com/user/login

ファイルの設置

example内のファイルとlibディレクトリをloginディレクトリに設置する。

login/
　├.htaccess
　├callback.php
　├index.php
　└lib/

/lib/Opauth/Strategyディレクトリ内に利用したいSNSのディレクトリを作成する。

Strategy/
　├Facebook
　├Twitter
　└Google

各ディレクトリには以下ページからzipファイルをダウンロードしたものを解凍してアップする。

http://www.opauth.org/

ファイルの編集と設定

loginディレクトリのopauth.conf.phpを編集する。

• security_saltは適当な英数字
• Strategyは利用したいSNSのAppKey等
• pathは今回だと'path' => '/user/login/',

loginディレクトリのindex.phpを編集する。

define('OPAUTH_LIB_DIR', dirname(dirname(__FILE__)).'/lib/Opauth/');
↓↓
define('OPAUTH_LIB_DIR', dirname(__FILE__).'/lib/Opauth/');

loginディレクトリのcallback.phpを編集する。

define('OPAUTH_LIB_DIR', dirname(dirname(__FILE__)).'/lib/Opauth/');
↓↓
define('OPAUTH_LIB_DIR', dirname(__FILE__).'/lib/Opauth/');

Noticeエラーが出たが原因が分からないので/lib/Opauth/Opauth.phpの124行目をコメントアウト。

trigger_error('No strategy is requested. Try going to '.$this->env['complete_path'].$sampleStrategy['strategy_url_name'].' to authenticate with '.$sampleStrategy['strategy_name'], E_USER_NOTICE);

Twitter設定

https://apps.twitter.com/

上記ページからログインし、「Create New App」をクリックし次の画面で各項目を入力する。

WebsiteとCallback URLsは今回だと「http://test.com/user/login」を入れておけばよい。

作成成功するとページ遷移するのでConsumer Key(API Key)の右にある「manage keys and access tokens」リンクをクリックするとAPI KeyとAPI Secretが取得できる。

これをopauth.conf.phpに追記する。

'Strategy' => array(
    'Twitter' => array(
        'key' => 'API Key',
        'secret' => 'API Secret',
    ),
),

またtwitterのSettingタブ内にある下部の「Enable Callback Locking (It is recommended to enable callback locking to ensure apps cannot overwrite the callback url)」のチェックを外して「Update Settings」で上書きしておく。

loginディレクトリのindex.phpを編集する。

<a href="./twitter">twitter</a>

クリックするとTwitterのソーシャルログインができるようになっているはず。

Google設定

https://console.developers.google.com/apis/library

上記ページよりログインし、プロジェクトを新規作成する。

プロジェクト名を入れ、組織名部分はそのままで作成をクリックする。

ダッシュボードの選択をクリックし、先ほど作成したプロジェクトを選択する。

認証情報→OAuth同意画面に進み、各項目を入力する。サービス名だけで他は省略可能。

認証情報タブで認証情報を作成ボタンをクリック、OAuth クライアント IDを選択する。

アプリケーションの種類は「ウェブアプリケーション」、名前は適宜入力、承認済みのリダイレクトURIは今回の場合だと「http://test.com/user/login/google/oauth2callback」で入力し、作成する。

完了するとクライアントIDとクライアントシークレットが発行されるのでopauth.conf.phpに追記する。

'Strategy' => array(
    'Google' => array(
        'client_id' => 'クライアントID',
        'client_secret' => 'クライアントシークレット'
    ),
),

loginディレクトリのindex.phpを編集する。

<a href="./google">google</a>

クリックするとGoogleのソーシャルログインができるようになっているはず。

Facebook設定

https://developers.facebook.com

上記ページよりログインし、マイアプリ→新しいアプリを追加に進む。

表示名を入力してアプリを作成する。

ダッシュボードからFacebookログインで設定をクリックする。

Facebookログイン→設定に進み、有効なOAuthリダイレクトURIを入れる。今回の場合だと「http://test.com/user/login/facebook/int_callback」になる。他はそのままで保存する。

設定→ベーシックに進みアプリドメイン、プライバシーポリシーのURL、利用規約のURL、カテゴリを選択して保存する。

ページ上部のステータスをオンに変更する。

設定→ベーシックに進みアプリIDとapp secretをopauth.conf.phpに追記する。

'Strategy' => array(
    'Facebook' => array(
        'app_id' => 'アプリID',
        'app_secret' => 'app secret',
    ),
),

loginディレクトリのindex.phpを編集する。

<a href="./facebook">facebook</a>

クリックするとfacebookのソーシャルログインができるようになっているはず。