CakePHP SocialAuth Pluginプラグイン使用例

この記事は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/

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

• Website：https://127.0.0.1
• Callback URL：https://127.0.0.1/social-auth/callback/twitter
• Access：Read only
• Additional Permissions：「Request email addresses from users」にチェック

アプリ側の設定

'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」を設定します。

• 承認済みの JavaScript 生成元：https://localhost
• 承認済みのリダイレクト URI：https://localhost/social-auth/callback/google/

アプリ側の設定

'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

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

• Homepage URL：https://localhost
• Authorization callback URL：https://localhost/social-auth/callback/github

アプリ側の設定

'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