SNSのアカウントを使ってワンクリックでWebサイトにログインできる、ソーシャルログインを便利に使っているユーザーが増えています。
この記事で紹介するOAuth.ioはFacebook、Twitter、Google+など120を超えるSNSによるログインに対応したマルチプラットホームのSDKです。使い方は難しくはありませんが、使う要件を4ステップで説明します。
ステップ1：アカウントの取得
次のものを用意してください。
- FacebookとGoogle（もしくはサポートされているほかのSNS）に登録されているアプリケーションの開発者アカウント
- oauth.ioのアカウント（30日無料トライアルあり）
Facebookアプリケーションを開発するにはFacebookアプリのドキュメントを参照してください。Googleの場合はこちらです。
ステップ2：OAuth.ioのインストール
composer require oauth-io/oauth
ステップ3: OAuth.ioのAPI設定
OAuth.ioの設定とセットアップは、SNSのアプリケーションをダッシュボードに登録します。具体的にはClient IDとClient SecretをSNSのアプリケーションページからコピーするだけです。
GoogleとFacebookでの方法は次のGIFアニメーションを参照してください。ほかのSNSでもほぼ同じです。
ステップ4：コーディング
SNSを使ったログインロジックをコーディングします。SDKの使い方が分かるサンプルアプリケーションをOauth.ioが公開しています。
サンプルアプリケーションのプロジェクトのディレクトリ構造は次のようになっています。
|-Demo-OAuth-IO/
|--app/
|--public/
|--src/
|--vendor/
|--composer.json
|--composer.lock
srcとvendorディレクトリはプロジェクトと同時に作成され、appとpublicディレクトリは途中で作成されます。
例に挙げるアプリケーションはごく簡単なサンプルであり、実際のアプリ開発では多くの場合フレームワークが使われることに注意してください。
このサンプルを実装するために、まずComposerを使いOAuth.io PHP SDKを読み込んで新しいプロジェクトを作成します。
composer create-project oauth-io/oauth=0.3.2 Demo-OAuth-IO
続いてappディレクトリと関連ファイルを作成します。
|-app/
|--config.inc.php
|--OAuthIO.php
このディレクトリにはOAuthIOクラスが入っており、OAuthIOクラスはSDKを簡単に使うためのFacadeです。ソースコードを示します。
<?php
require_once '../vendor/autoload.php';
require_once 'config.inc.php';
use OAuth_io\OAuth;
class OAuthIO
{
protected $provider;
protected $oauth;
public function __construct($provider)
{
$this->provider = $provider;
$this->oauth = new OAuth();
}
/**
* init: Initialise the OAuth_io
*/
public function init()
{
$this->oauth->initialize(
PUBLIC_KEY, SECRET_KEY
);
}
/**
* auth: Make the authentication process
* @param: callback => uri to goto after authentication
* @throw: NotInitializedException
*/
public function auth($callback)
{
$this->oauth->redirect(
$this->provider,
$callback
);
}
/**
* getClient: Get a request_object from OAuth_io
* @param: opt => options passed to authenticate process
* @throw: NotAuthenticatedException
* @return: Request object on success
*/
public function getClient($opt = null)
{
if ($opt === null) {
$client = $this->oauth->auth(
$this->provider, [
'redirect' => true,
]
);
} else {
$opt['redirect'] = true;
$client = $this->oauth->auth($this->provider, $opt);
}
return $client;
}
}
OAuthIOクラスは必要な2つのファイルを読み込みます。OAuth.io SDKを自動的に読み込むautoload.phpファイルと、アプリケーションの実装と実行に必要なpublic keyとsecret keyの定義が書かれたconfig.inc.phpファイルです。
<?php
define('PUBLIC_KEY', 'TKqUBBONEo0em9k0VIXpckwL8Gg');
define('SECRET_KEY', 'FIcEJL5y6hGd3yor13yZCGrwcrE');
このkeyは、OAuth.ioダッシュボードページのApp Keysから取得できます。
このクラスで定義している関数は、コードを読めば理解できます。auth()が認証プロセス、getClient()がclientの作成を担っています。
- 認証プロセスでは、ユーザーをSNSのログインページにリダイレクトし、ログインに成功すると、Webアプリにリダイレクトして戻ってくる
- clientオブジェクトはSDKに入っているRequestObjectクラスのインスタンスにすぎず、Oauth.io APIにリクエストを出すために使っている。認証プロセスで取得したcredentialから簡単に作成でき、credentialにはRequestObjectインスタンスのgetCredentials()メソッドでアクセスする。再認証することなくclientを再利用するには、credentialをデータベースに保存しておき、再度読み込んでauth()を実行する方法をすすめる
$provider->auth(
[
'credentials' => $credentials,
]
);
appディレクトリが終わったら、次にpublicディレクトリを作成します。
|-public/
|--tmpl/
|----footer.php
|----header.php
|--index.php
|--login.php
予想した通りpublicディレクトリにはユーザーがブラウザーからアクセスして閲覧できるファイルが入ります。このファイルはSNSの認証プロセスの大部分を担います。
- login.php：SNSログインを含むページを実装しており、認証に成功したユーザーをindexページにリダイレクトし、失敗すれば停止してエラーメッセージを表示する
<?php session_start(); require '../app/OAuthIO.php'; if (isset($_SESSION['oauthio']['auth']) && count($_SESSION['oauthio']['auth']) > 0 ) {header('Location: /index.php'); exit(); } if (isset($_GET['p']) && empty($_GET['p']) == false ) { $provider_name = $_GET['p']; $provider = new OAuthIO($provider_name); $provider->init(); try { // Execute authentication process $provider->auth('/index.php'); } catch (Exception $e) { die($e->getMessage()); } } - index.php：ユーザーが認証済みか確認し、OAuthIOからgetClient()メソッドを使ってRequestObjectインスタンスの取得を試みる。失敗すればエラーメッセージとログインページのリンクを表示し、成功すればSNS名を認証成功のメッセージと連結して表示する
<?php session_start(); require '../app/OAuthIO.php'; $provider_name = ''; $errors = []; if (isset($_SESSION['oauthio']['auth']) && count($_SESSION['oauthio']['auth']) > 0 ) {reset($_SESSION['oauthio']['auth']); $provider_name = key($_SESSION['oauthio']['auth']); } $provider = new OAuthIO($provider_name); $provider->init(); try { $client = $provider->getClient(); } catch (\Exception $e) { $errors[] = $e->getMessage(); }
メッセージを表示する部分です。
if (count($errors) > 0) {
print '<div class="alert alert-danger" role="alert">' .
$errors[0] . '. Goto <a href="login.php">login page</a> to authenticate.</div>';
} else {
if ($client !== false) {
$me = $client->me();
print '<div class="alert alert-success" role="alert">' .
sprintf(
'Well done %s! You have authenticated using %s.',
$me['name'], ucfirst($provider_name)
) . '</div>';
}
}
publicディレクトリには別のディレクトリtmplが入っており、アプリケーションのメインテンプレートの静的なheaderとfooterが入っています。このファイルにロジックは含まれていないため、記事ではソースコードは取り上げませんが、安全にpublicフォルダーに取り込めます。
これで完成です。現時点でテストすると次のように表示されます。
最後に
この短い記事で、OAuth.ioを使ってSNSログイン機能を持つページを実装する方法を説明しました。
ユーザー名とパスワードの組み合わせでログインすることがすたれていく中で、記事で取り上げた方法やmagic linkの人気が高まっています。これから開発するアプリにSNSログイン機能を盛り込むなら、記事で説明したプロセスを使って無用のトラブルを回避してください。
SNSへのAPI呼び出しについてもっと知りたければドキュメントを参照してください。また、記事で作成したアプリのソースコードはGithubで入手できます。
※本記事は Wern Anchetaが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。
（原文：Social Logins with Oauth.io – Log in with Anything, Anywhere）
［翻訳：内藤夏樹／編集：Livit］
[Image：Miss Ty / Shutterstock.com]
