google web サービスでアクセストークンの取得

google web サービスでアクセストークンの取得

#10 アクセストークンを取得しよう (1)
http://dotinstall.com/lessons/google_connect_php_v2/9910
を参考に
認証したユーザのアクセストークン取得処理を実装

アクセストークンの取得は
Handling the Response
をやっていく

リファレンスは
https://developers.google.com/accounts/docs/OAuth2WebServer?hl=ja#handlingtheresponse
を参考

code
client_id
client_secret
redirect_uri
grant_type
などのオプションをつかって

accounts.google.comのサイトの
/o/oauth2/token
へPOSTで投げかける

POSTで行うには
curl を使う

まず、パラメータを array() で作成する

$params = array(
	'client_id'=>CLIENT_ID,
	'client_secret'=>CLIENT_SECRET,
	'code'=>$_GET['code'],
	'redirect_url'=>SITE_URL.'redirect.php',
	'grant_type'=>'authorization_code'
);

とする

大文字の部分は、config.php で設定した定数

次に、アクセスするURLを変数へ格納

$url ='https://accounts.google.com/o/oauth2/token';

次に、curl を使っていくので
curl_init()

curl セッションを初期化し
新しい curl リソースを作成する

$url = curl_init();

curl_init() については
http://php.net/manual/ja/function.curl-init.php
を参照

googl 側でユーザ認証してもらう処理

googl 側でユーザ認証してもらう処理

#09 Googleで認証をしてみよう
http://dotinstall.com/lessons/google_connect_php_v2/9909
を参考に
Google側でユーザーを認証してもらうための処理を実装

まずは
scope の設定

scope は
スペースで区切って指定した情報をとってくる

動画で表示されている
Scopes for User Profile Permission がみあたらないので検索してみた

https://developers.google.com/accounts/docs/OAuth2LoginV1#formingtheurl

に掲載されている

ただ
Important: Google was an early adopter of OAuth 2.0 and created an early capability to perform authentication via OAuth 2.0. This document describes that initial implementation. Since creating this service, the OpenID Foundation has produced the OpenID Connect specification as a general way to authenticate users across identity providers using OAuth 2.0. Please see our updated OAuth 2.0 implementation which conforms to the OpenID Connect specification.
というメッセージがページ冒頭にもでているので
すでにバージョンが古いのかもしれない

とりあえず、これで進めてみる

https://www.googleapis.com/auth/userinfo.profile
でユーザのプロフィール取得

https://www.googleapis.com/auth/userinfo.email
でユーザのEメールを取得

scope を複数指定するには
スペース区切りでOKなので

'scope'=>
https://www.googleapis.com/auth/userinfo.profile 
https://www.googleapis.com/auth/userinfo.email';

とする

google にとばすには

$url ='https://accounts.google.com/o/oauth2/auth'

にパラメータをつけるので
web api でよく使うように
ベースURLになる
https://accounts.google.com/o/oauth2/auth
に?をつけてその後にパラメータをつけていく

このときに使っている便利な関数が
http_build_query()
これは
http://php.net/manual/ja/function.http-build-query.php
の解説にあるように
エンコードされたクエリ文字列を生成できる
というもの

今回は

http_buid_query($params)

としたので

$params = array(
'client_id'=>CLIENT_ID,
'redirect_url'=>SITE_URL.'redirect.php',
以下略
);

で指定した様々なパラメータが
client_id=CLIENT_ID&redirect_url=SITE_URL.’redirect.php’&
というような web api でよく見る
&でつなげたパラメータに変換される

これで

$url ='https://accounts.google.com/o/oauth2/auth?'.http_build_query($params);


$url へ google にとばすURLが格納されるので
header() で実際に飛ばす

header('Location: '.$url);
exit;

とする

次に、CSRF対策をしておく

if($_SESSION['state'] != $_GET['state']){
	echo '不正な処理です’;
	exit;
}

とすることで
state の値を検証して値が違うなら
エラーを表示して強制終了する

ここまでできたら、実働実験
仮想マシンをたちあげた状態で
http://dev.dotinstall.com/google_connect_php/

(ちなみに、ドメインは hostsファイルを 変更しているので、
このドメインでもローカルマシンにできる
自作やレンタルのサーバ
なら、自ドメインに変更する)

にアクセスして
Googleアカウントでログイン

クリックすると
Google の認証画面になり

アカウントの基本情報の表示
メール アドレスの表示

の許可をリクエストするので
承認する
をクリック

すると、画面は真っ白だけど
URLに
state

code
が返ってきているのがわかる

google webサービスでアクセストークンの取得

google webサービスでアクセストークンの取得

#10 アクセストークンを取得しよう (1)
http://dotinstall.com/lessons/google_connect_php_v2/9910
を参考に
認証したユーザのアクセストークンを取得するための処理を実装

アクセストークンを取得するには
Handling the Response
を使う

https://developers.google.com/accounts/docs/OAuth2WebServer?hl=ja#handlingtheresponse
のリファレンスも参照

google サービス認証ダイアログ作成

google サービス認証ダイアログ作成

#08 認証ダイアログを作ろう
http://dotinstall.com/lessons/google_connect_php_v2/9908
を参考に
CSRF対策実装
承認
を行う際の認証ダイアログの作成

認証ダイアログの作成は
https://accounts.google.com/o/oauth2/auth
にむけて
いろいろなオプションをつけて作成する

オプションに関しては
https://developers.google.com/accounts/docs/OAuth2WebServer?hl=ja#formingtheurl
のリファレンスを参考に

認証ダイアログ作成の前にCSRFを行う

これは
セッションのstate に推測しにくい文字列を入れ
googleにとばすときのURLにも
組み込んでおき
認証から返ってきたときの処理で
この値が正しいかチェックをするというもの
これにより
認証後にちゃんとgoogle から返ってきたことを確認できる

$_SESSION['state'] = sha1(uniqid(mt_rand(),true));

で、ハッシュにより値を作成
sha1() でハッシュを生成している
ハッシュについては
http://php.net/manual/ja/function.sha1.php
を参照

uniqid(mt_rand()

でランダムな値を生成して

オプションで true 指定なので
20 バイト長のバイナリ形式で返ってくる

値はできたので、次に認証ダイアログの
パラメータを作成

$params = array(
	'client_id'=>CLIENT_ID,
	'redirect_uri'=>SITE_URL.'redirect.php',
	'status'=>$_SESSION['state'],
	'approval_prompt'=>'force'.
	'scope'=>'',
	'response_type'='code',
);

クライアントIDは

'client_id'=>CLIENT_ID

リダイレクトURIは

'redirect_uri'=>SITE_URL.'redirect.php'

認証の値となる state は

'status'=>$_SESSION['state']

毎回認証ダイアログをひらくオプションとして

'approval_prompt'=>'force'

どのデータを引っ張ってくるか指定するのは

'scope'=>''

の部分で指定

レスポンスのタイプを

'response_type'='code'

とする

google サービス認証処理作成

google サービス認証処理作成

#07 認証処理の流れを確認しよう
http://dotinstall.com/lessons/google_connect_php_v2/9907
を参考に
redirect.php を作成し認証処理を実装

まず設定ファイルを読み込むため

require_once('config.php');
require_once('functions.php');

で読み込む

セッションを使うため

session_start();

も追記

処理としてはまず google にリダイレクトして
返ってきたら
ユーザ情報をゲットしていろいろと行う
という流れ

google に認証して GETで code がなければ
認証前ということになるので

if(empty($_GET['code'])){

と判別

この条件式が真なら、認証前になる

まず、認証前の場合
認証ダイアログを作成

認証のためのURLができるので
これで google にとばす

google にとばすと GETつきのダイアログになるので
ここから先は認証後の処理になる

認証後の処理は
アクセストークンを取得し
ユーザ情報を取得する

このユーザ情報をDBに格納して
ログイン処理

これらが終了したら
ホーム画面の index.php にとばす
という流れ

この詳しい流れについては
https://developers.google.com/accounts/docs/OAuth2WebServer?hl=ja
に掲載されている

google サービスログイン画面作成

google サービスログイン画面作成

#06 ログイン画面を作ろう
http://dotinstall.com/lessons/google_connect_php_v2/9906
を参考に
ホーム画面でのログインチェック実装と
ログイン画面の作成

まずはログイン画面の確認

しかし、なにも表示されない
原因はいくつか考えられるけど
よくよく考えたら
vagrant 環境のほうには
mysql-devel をインストールしていなかった

しかも今回はremi レポジトリを使っているので
sudo yum install mysql-devel では
バージョンが古く、インストールでエラーがでる

このため

 sudo yum install -y --enablerepo=remi mysql-devel

でインストール

sudo vim  /etc/php.ini

でファイルを開いて
876行めに

extension=pdo.so
extension=pdo_mysql.so

を追記

変更を保存して

sudo service httpd restart

で apache 再起動

これでもダメなので確認してみたら
PDO

POD
になっていたり

h() の中で、return が書いていないなど
簡単なミスが多かった

わからなかったときの対処として
ドットインストールのようにソースがあるなら
コピペして新しいファイルをつくり
diff -w ソースのファイル コピペファイル
として
差分を表示すると
わかりやすくなる

これで、ようやく準備ができたのでログインチェック

これにはセッションを使うので

session_start();
を追記

ログイン判定には
if(empty($_SESSION['me'])){

で判定

これは、$_SESSION[‘me’]
の値が空なのかを
empty() で判定している

もし、空だったら
header() を使ってログインページに飛ばす

header('Location: '.SITE_URL.'login.php');
exit;

これで、ログイン画面にとばせるので
次にログイン画面になる
login.php を作成

ソースはHTMLがほとんどなので
cp base.html login.php でカスタマイズしたほうが楽

ここにはログインするリンクを作成する

<p>
<a href="redirect.php">Googleアカウントで Login</a></p>

関数の登録とホーム画面作成

関数の登録とホーム画面作成

#05 よく使う関数を登録しておこう
http://dotinstall.com/lessons/google_connect_php_v2/9905
を参考に
よくつかう関数を登録しておく

functions.php を作成して
ここに書いておく

まず、DBに接続するユーザ関数

function connectDb(){
try{
	return new PPO(DBN, DB_USER, DB_PASSWORD);
}catch(PODException $e){
	echo $e->getMessage();
	exit;
}
}

接続などは try catch で接続失敗したときの処理を書く

	echo $e->getMessage();
	exit;

はエラーがあったときに表示して終了する処理

接続成功のときの処理は

	return new PPO(DBN, DB_USER, DB_PASSWORD);

でDBへ接続することでPOD
オブジェクトをかえしてもらう

また htmlspecialchars() が長いので
h()
で使えるようにする

function h($s){
return htmlspecialchars($s,ENT_QUOTES,"UTF-8");
}

htmlspecialchars() に関しては
http://php.net/manual/ja/function.htmlspecialchars.php
を参照

ENT_QUOTES を指定すると
””の取扱いが変わる

$s は変換される文字列

ここまでできたら、
index.php を作成してホーム画面を作成

一番上のPHPソースで

require_once('config.php');
require_once('functions.php');

で設定ファイルを読み込む

その下のHTML部分は
base.html というファイルを以前作成したので
それをコピペでOK

HTMLソースは

<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
        <title>ホーム画面</title>
</head>
<body>



</body>
</html>

 google web service 共有設定

 google web service 共有設定

#04 アプリ共通の設定をしよう
http://dotinstall.com/lessons/google_connect_php_v2/9904
を参考に
アプリ全体に共通する項目をconfig.php にまとめる

DB、クライアントID、google にもらったコードなどの設定を

definoglee(‘DSN’,’mysql:host=localhost;dbname=dotinstall_google_connect_php’);
これでDB接続設定

define(‘DB_USER’,”dbuser’);
これでDBユーザを指定

define(‘DB_PASSWORD’,a8sdfnc’);’
というようにDBパスワードを指定

define(‘CLIENT_ID’,’クライアントID’);
define(‘CLIENT_SECRET’,’クライアント secret’);
というように
google から提供された
CLient ID
Client secret
を指定する

define(‘SITE_URL’,’http://dev.dotinstall.com/google_connect_php’);
として、サイトURLを登録
これでサイトドメインが変更したときには
ここだけ変えればよくなる

そしてエラーの出力の種類も指定
error_reporting(E_ALL & -E_NOTICE);
としておくことで
NOTICE以外すべて

session_set_cookie_params(0,/google_connect_php’);
これで、セッション範囲を指定

google web service DB設定

google web service DB設定

#03 データベースの設定をしよう
http://dotinstall.com/lessons/google_connect_php_v2/9903
を参考に
vagrant で作成した開発環境に
DBを作成し、設定する

以下はSQL文になる

create databasel dotinstall_google_connect_php;

これで、DBuserを作成
create database でDB作成
DB名は、もっと短くてもOK

次に、このDBへアクセスするユーザを作成

grant all on dotinstall_google_connect_php.* to dbusert@localhost ideintified by 'a8sdnfc';

これで、
dbusert@localhost
というユーザ
a8sdnfcというパスワードを設定

use dotinstall_google_connect_php;


使用するDBを指定
構文は
use 使用するDB名;

これで、使うDBに移動できているので

create table users(
it int not null auto_increment primary key,
google_user_id varchar(30) unique,
google_email varchar(255),
google_name varchar(255),
google_picture varchar(255),
google_access_token varchar(255),
created datetime,
modified datetime
);

でテーブル作成

it int not null auto_increment primary key

で自動連番と主キーの設定

取得するものとして

google_user_id varchar(30) unique

で一意、つまりかぶらない値として
IDを取得

google_email varchar(255),

でメールアドレス

google_name varchar(255),

で名前

google_picture varchar(255),

で画像

google_access_token varchar(255),

でアクセストークンを取得する

created datetime,
modified datetime

この2つは時間関連であとで
使うことになる

動画では、ログインして sql コマンドをうっているけど
開発環境から実際に動かす環境に
簡単に移植したいので
sql ファイルをつくり、そこから読み込む

まず、vagrant で作成したマシンを起動する
cd /media/bdec1869-7820-4557-a76e-a8b130293019/localdev
で仮想マシンディレクトリに移動

vagrant up
でマシン起動

vagrant ssh
でログインして

vim google.sql
で sql ファイルを作成
拡張子が .sql となる

内容は上記のコマンドを列挙しただけ

create database dotinstall_google_connect_php;
grant all on dotinstall_google_connect_php.* to dbuser@localhost identified by 'a8sdnfc';
 
use dotinstall_google_connect_php
 
create table users (
id int not null auto_increment primary key,
google_user_id varchar(30) unique,
google_email varchar(255),
google_name varchar(255),
google_picture varchar(255),
google_access_token varchar(255),
created datetime,
modified datetime
);

保存して

mysql -u root -p < google.sql で実行 mysql の root パスワードを聞かれるので これを入力 成功すると、DBが作成される 実際に成功しているか確認するには[sql] mysql -u root -p use dotinstall_google_connect_php; desc users; [/sql] で作成したDBのテーブル users の中身をみることができる

google のアプリ登録

google のアプリ登録

#02 Googleでアプリを登録しよう
http://dotinstall.com/lessons/google_connect_php_v2/9902
を参考にアプリを登録する

OAuth 関連は
facebook
twitter
と同様に、アプリ登録する必要がある

アプリ登録は
https://code.google.com/apis/console/
から行う

項目の中から
API Access を選んで

Create an OAuth 2.0 client ID …

クリック

次に
Product name に
プロジェクト名を入力
今回は Dotinstall

Project logo は省略可能

次の画面で
Application Type を聞かれるので
Web application
を選択

オプション設定をするので
more option をクリックし

Authorized Redirect URIsのところへ

http://dev.dotinstall.com/google_connect_php/redirect.php
とする

URLが
かぶるとダメという場合
dev.dotinstall.com
の部分を自ドメインに変更する

Authorized JavaScript Origins には
http://dev.dotinstall.com
とする

こちらもかぶるとダメなら自ドメインにする

これで
Create client ID
をクリックすると
登録される

登録情報で使うのは
Client ID
Client secret
の文字列