polidog lab++

Blog
KnpUOAuth2ClientBundleでYahooログインを実装する

KnpUOAuth2ClientBundleでYahooログインを実装する

Dec 6, 2016 | tech | symfony

Symfony Advent Calendar 2016の6日目の記事です。

WebTestCaseでログインが必要なページのテストを行う方法(仮)ってネタで書こうと思ったんですが、ググったら@imunew先生のSymfony2 + PHPUnitではじめてのテスト(機能テスト編)の記事が良かったので、KnpUOAuth2ClientBundleでYahooログインを実装するという話をします。
直前の内容変更でごめんなさい・・・。

OAuth2ClientBundleとは?

KnpUOAuth2ClientBundle

KnpUOAuth2ClientBundleは、OAuth2ClientをSymfonyで使うためのBundleです。

なぜYahooログイン?

エンジニアな人はソーシャルログインといったらTwitter or Facebookだろうと思っていましたが、国内のソーシャルログイン事情を見てみるとYahooログイン多いようです。 https://www.feedforce.jp/release/9100/

KnpUOAuth2ClientBundleでYahooログインを実現するためにProviderを作った

OAuth2Clientでは、サービスごとProviderを用意する必要があります。 公式でGithubFacebookGoogleInstagramLinkedInがサポートはされています。

また、サードパーティとして様々なProviderが用意されています。 Third-Party Providers

ただし、残念な事にYahooID連携はサポートされていません。 自分でProviderの実装を実装する必要があります。

今回Yahooログインを実装するためにtavii/oauth2-yconnectを作りました。 これを利用すればSymfonyからKnpUOAuth2ClientBundleを使って簡単にYahooID連携を行う事が出来ます。

使い方

Symfony3 + KnpUOAuth2ClientBundleでYahooID連携を利用するための方法は以下の通りの手順で行えば出来ます。

  1. YahooID連携のトークンとかを取得する
  2. composer requireでOAuth2ClientBundleとoauth2-yconnectを導入する
  3. app/AppKernel.phpの修正
  4. config.ymlに設定を記述
  5. controllerを用意する
  6. ブラウザからアクセスしてみる。

YahooID連携のトークンとかを取得する

YahooJapan!デベロッパーネットワークのアプリケーションの管理にアクセスして「新しいアプリケーションを開発」より新しいアプリケーションを作成します。

「アプリケーションの種類」をサーバサイド、あとは必要に応じて「アプリケーション名」や「サイトURL」を設定します。 今回はOAuth2によるログインを想定しているので、「利用するスコープ」のチェックは何も入れていません。

スクリーンショット 2016-12-05 23.29.27.png (57.0 kB)  

スクリーンショット 2016-12-05 23.29.19.png (91.8 kB)

アプリケーションの作成が完了したら、アプリケーション一覧の編集よりコールバックURLを指定しましょう。 今回はローカルのビルトインサーバで動かすつもりなのでhttp://localhost:8000/yahoo/callbackを指定します。

スクリーンショット 2016-12-05 23.33.31.png (25.9 kB)

composer requireでOAuth2ClientBundleとtavii/oauth2-yconnectを導入する

次にComposerで必要なライブラリを入れていきます。
今回必要なライブラリは2つです。

  • OAuth2ClientBundle
  • tavii/oauth2-yconnect
$ composer require knpuniversity/oauth2-client-bundle
$ composer require tavii/oauth2-yconnect

app/AppKernel.phpの修正

お約束ですが、Bundleを入れたら、AppKernelは必須なので、AppKernel.phpを修正します。

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = [
        // ...
        new KnpU\OAuth2ClientBundle\KnpUOAuth2ClientBundle(),
        // ...
    ];
}

config.ymlに設定を記述

config.ymlに設定を記述します。 「デベロッパーネットワークトップ>アプリケーションの管理>アプリケーションの詳細」よりアプリケーションIDおよび、シークレットを確認してください。 client_idには「アプリケーションID」、client_secretには「シークレット」を入力します。 直接アプリケーションIDやシークレットを記載してもいいですが、parameters.ymlに書いたほうがよいかと思います。

今回はオリジナルのProviderを使っているためprovider_classでProviderTavii\OAuth2\Client\Provider\YConnectを指定します。

knpu_oauth2_client:
    clients:
        yconnect_client:
            type: generic
            provider_class: Tavii\OAuth2\Client\Provider\YConnect
            client_id: "%oauth_yconnect_client_id%"
            client_secret: "%oauth_yconnect_client_secret%"
            redirect_route: app_yahoo_callback

controllerを用意する

YahooID連携を使ってログインするために、コントローラを用意します。

// src/AppBundle/Controller/YahooController.php

<?php

namespace AppBundle\Controller;


use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Tavii\OAuth2\Client\Provider\YConnect;
use Tavii\OAuth2\Client\Provider\YConnectResourceOwner;

/**
 * @Route("/yahoo")
 * Class YahooController
 */
class YahooController extends Controller
{
    /**
     * @Route("/")
     */
    public function indexAction()
    {
        return $this->get('oauth2.registry')
            ->getClient('yconnect_client') // key used in config.yml
            ->redirect();
    }

    /**
     * @Route("/callback")
     *
     */
    public function callbackAction()
    {
        /** @var YConnect $client */
        $client = $this->get('oauth2.registry')
            ->getClient('yconnect_client');

        try {
            /** @var YConnectResourceOwner $user */
            $user = $client->fetchUser();
            var_dump($user->toArray());die;
            // ...
        } catch (IdentityProviderException $e) {
            var_dump($e->getMessage());die;
        }
    }

}

こんな感じに用意します。 今回はホント適当なサンプルなので、とりあえずログイン成功していたら、user_idが表示される感じになります。

ブラウザでアクセスしてみる。

まずはビルトインサーバを起動します。

$ bin/console server:start

その後ブラウザでhttp://localhost:8000/yahooにアクセスしましょう。 Yahooの同意画面が表示されます。

スクリーンショット 2016-12-06 0.54.09.png (69.1 kB)

同意してはじめるボタンを押せば、user_idが表示されるかと思います。

スコープについて

YahooID連携では、4つのスコープがあります。

  • openid
  • email
  • profile
  • address

tavii/oauth2-yconnectではデフォルトに指定しているスコープがopenidのみとなります。 このままでは、ユーザーの情報を取得する事はできません。

ユーザーのプロフィール情報を取得してみる。

ユーザーのプロフィール情報を取得するためにはprofileのスコープを指定する必要があります。 先程作成したControllerでprofileスコープを指定することで、プロフィール情報を取得できます。

// src/AppBundle/Controller/YahooController.php
<?php
   ...
    /**
     * @Route("/")
     */
    public function indexAction()
    {
        return $this->get('oauth2.registry')
            ->getClient('yconnect_client') // key used in config.yml
            ->redirect(['profile']);
    }

修正後ブラウザでhttp://localhost:8000/yahoo/にアクセスすると若干同意画面が変わります。

スクリーンショット 2016-12-06 1.54.19.png (70.2 kB)

状況に応じて必要なスコープを使い分けましょう。

最後に

HWIOAuthBundleでも良いのですが、OAuth2ClientBundleも気軽に実装できるのでおすすめです。
また、Guardコンポーネントを利用することにより、Symfonyの認証としてソーシャルログインを利用する事も可能です。

Guard
Authenticating With Guard

この辺はまた機会があれば、ブログを書きたいと思います。

また今回のソースコードをgithubに用意しました。
polidog/symfony-oauth2-sample
よかったら試してみてください。

comments powered by Disqus

© 2017 polidog lab++