この記事はCakePHP Advent Calendar 2017の18日目の記事です。

CakePHPでソーシャルログインするためのプラグインCakePHP SocialAuth Pluginについてその使い方を紹介します。

CakePHP HybridAuth Plugin というものが元々ありまして、 そのCakePHP 3.4+. に対応したプラグインとなります。

PHPでTwitterやFacebookログインをするためのライブラリ SocialConnect AuthをCakePHPから使いやすくしたプラグインという位置づけのようです。

そのため、scopeの設定値などについては

https://github.com/SocialConnect/auth/blob/master/example/config.php.dist

が参考になります。

動作環境

動作環境は以下のとおりです。

  • PHP:7.1.10
  • CakePHP:3.5.8
  • CakePHP SocialAuth Plugin:0.3.2

使用例

src/Application.php に以下のように定義をします。

// Be sure to add SocialAuthMiddleware after RoutingMiddleware
$middlewareQueue->add(new \ADmad\SocialAuth\Middleware\SocialAuthMiddleware([
    // Request method type use to initiate authentication.
    'requestMethod' => 'POST',
    // Login page URL. In case of auth failure user is redirected to login
    // page with "error" query string var.
    'loginUrl' => '/users/login',
    // URL string or array to redirect to after authentication.
    'loginRedirect' => '/',
    // Boolean indicating whether user identity should be returned as entity.
    'userEntity' => false,
    // User model.
    'userModel' => 'Users',
    // Finder type.
    'finder' => 'all',
    // Fields.
    'fields' => [
        'password' => 'password',
    ],
    // Session key to which to write identity record to.
    'sessionKey' => 'Auth.User',
    // The methods in user model which should be called in case of new user.
    // It should return a User entity.
    'getUserCallback' => 'getUser',
    // SocialConnect Auth service's providers config. https://github.com/SocialConnect/auth/blob/master/README.md
    'serviceConfig' => [
        'provider' => [
             //ここのところにTwitter,Facebookなどそれぞれの設定を定義する
        ],
    ],
    // Whether social connect errors should be logged. Default `true`.
    'logErrors' => true,
]));

とりあえず基本的なところで押さえておきたいのは以下の4つになるかなと思います。

  • Twitter
  • Google
  • Facebook(動作できておらず・・・)
  • GitHub(動作できておらず・・・)

ここで残念なお知らせです。FacebookおよびGitHubでのログインについてまだうまく動作していません。。。

Twitter

Twitter側の設定

https://apps.twitter.com/

からアプリの設定をします。

アプリ側の設定

'twitter' => [
    'applicationId' =>  //Application Settings の Consumer Key (API Key) の値をを設定,
    'applicationSecret' =>  //Application Settings の Consumer Secret (API Secret) の値をを設定,
],

Google

https://console.developers.google.com/iam-admin/projects?pli=1

からアプリの設定をします。

「認証情報」で「OAuth 2.0 クライアント ID」を設定します。

アプリ側の設定

'google' => [
    'applicationId' => //クライアント ID の値を設定,
    'applicationSecret' => //クライアント シークレット の値を設定,
    'scope' => [
        'https://www.googleapis.com/auth/userinfo.email',
        'https://www.googleapis.com/auth/userinfo.profile',
    ],
],

Facebook

https://developers.facebook.com/apps/

からアプリの設定をします。

  • アプリドメイン:localhost
  • サイトURL:https://localhost/
  • クライアントOAuthログイン:いいえ
  • ウェブOAuthログイン:はい
  • リダイレクトURIに制限モードを使用:いいえ(localhostだといいえにしないとうまくいかない感じでした)

アプリ側の設定

'facebook' => [
    'applicationId' => //アプリID の値を設定,
    'applicationSecret' =>  //app secret の値を設定,
    'scope' => [
        'email'
    ],
    'fields' => [
        'email','first_name','last_name','name','birthday','gender','profile_pic','verified'
        // To get a full list of all posible values, refer to
        // https://developers.facebook.com/docs/graph-api/reference/user
    ],
],

provider_failureのエラーがでてうまく動かない・・・。

https://github.com/ADmad/cakephp-social-auth/blob/585b39daec7712e011270859aede955a1272d245/src/Middleware/SocialAuthMiddleware.php#L217-L222

あたりでエラーになってしまっているようです。

invalid_request

API calls from the server require an appsecret_proof argument

Facebookのアプリ側の設定で

「App Secretをオンにする」が有効になっているとだめっぽいです

https://developers.facebook.com/docs/graph-api/securing-requests?locale=ja_JP

insufficient_scope
(#210) This call requires a Page access token.

https://smashballoon.com/custom-facebook-feed/reviews-token/

「リダイレクトURIに制限モードを使用」をOFF

GitHub

https://github.com/settings/developers

からアプリの設定をします。

アプリ側の設定

'github' => [
    'applicationId' => Client ID の値を設定,
    'applicationSecret' => Client Secret の値を設定,
    'scope' => [
        'read:user',
        'user:email',
    ],
],

上記のように設定してみても、何故かメールアドレスが取得できません。。。。

// src/Model/Table/UsersTable.php

以下の箇所でエラーが出ていました。どうやらメールアドレスがGitHubから取得できていない模様。。。

if (empty($profile->email)) {
        throw new \RuntimeException('Could not find email in social profile.');
    }

GitHubの各スコープ

https://developer.github.com/apps/building-oauth-apps/scopes-for-oauth-apps/

ということで、FacebookとGitHubログインは試行錯誤中です。

それぞれエラーの内容が異なっているようなので、別々の原因と考えられます。

上記で紹介したプラグイン以外で、ソーシャルログインするんだったらこのプラグインがおすすめ、などありましたらぜひ教えていただきたいです。

2017/12/26 追記

GitHubはpublicly visible email addressに設定されているメールアドレスを取得するため、未設定の場合にはメールアドレスが取得できません。

参考

https://developer.github.com/v3/users/#response

https://stackoverflow.com/questions/35373995/github-user-email-is-null-despite-useremail-scope

関連記事