Google OAuth 2.0

▶

編集

ページの作成

テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例：親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例：親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

テンプレート

本稿はGoogle OAuth 2.0を使用した認証(ログイン)方法について説明します。

前提

・Googleアカウントを所有している。

・本稿ではPHPを用いて実装例を記載します。

同意画面の入力

Google APIsにてプロジェクトを作成してください。

続けて、以下の画像を参考に「認証情報」→「OAuth同意画面」を選択して、必要な情報を入力して下さい。

OAuthクライアントIDの取得

以下の画像を参考に「認証情報」→「認証情報を作成」→「OAuthクライアントID」を指定します。

１．アカウント情報入力画面の呼び出し

PHPでの実装に入ります。

まずは大まかな流れを説明します。

１．「Googleアカウントでログイン」といったボタンを作り、「https://accounts.google.com/o/oauth2/auth」でアカウント情報入力画面を呼び出す。

２．アカウント情報を入力する。

３．リダイレクト先にcodeパラメータが渡されるので、それを基に「https://accounts.google.com/o/oauth2/token」を呼び出して、アクセストークンを取得する。

４．アクセストークを基に「https://www.googleapis.com/oauth2/v1/userinfo」を呼び出して、IDや名前、メールアドレスといったユーザー情報を取得する。

５．ユーザー情報をテーブルやせｓ格納して、ログイン情報を管理する。（ここはアプリケーションの運用方法によって異なるので、詳細は省略）

では、上から順に説明します。

１．アカウント情報入力画面を呼び出す。

適当なボタンを作成して、「https://accounts.google.com/o/oauth2/auth」を呼び出しましょう。

text.php

Googleアカウントでログイン

</a>

auth.php

<?php
const GOOGLE_AUTH_URL = 'https://accounts.google.com/o/oauth2/auth';
const GOOGLE_CLIENT_ID = '省略';
$redirectUri = 'redirect.php';

/*
* 認証ページにリダイレクト
*/
$params = array(
   'client_id' => GOOGLE_CLIENT_ID,
   'redirect_uri' => $redirectUri,
   'scope' => 'openid profile email',
   'response_type' => 'code',
);
header("Location: " . GOOGLE_AUTH_URL . '?' . http_build_query($params));

２．アカウント情報

アカウント認証画面が開かれます。

こちらはGoogleで用意された画面なのでアカウント情報を入力するだけです。

３．アクセストークンの取得　および　４．ユーザー情報の取得

リダイレクト先に渡されるcodeパラメータを基にアクセストークンを取得し、更にアクセストークンを基にユーザー情報を取得します。

アクセストークンを取得する際に指定するリダイレクト先は、自身のphpファイルを指定すればよいです。

redirect.php

<?php
const GOOGLE_TOKEN_URL = 'https://accounts.google.com/o/oauth2/token';
const GOOGLE_USERINFO_URL = 'https://www.googleapis.com/oauth2/v1/userinfo';
const GOOGLE_CLIENT_ID = '省略';
const GOOGLE_CLIENT_SECRET = '省略';
$redirectUri = 'redirect.php';

//パラメータ
$code = $_GET['code'];

/*
* アクセストークン取得
*/
$params = array(
   'code' => $code,
   'grant_type' => 'authorization_code',
   'redirect_uri' => $redirectUri,
   'client_id' => GOOGLE_CLIENT_ID,
   'client_secret' => GOOGLE_CLIENT_SECRET,
);

//POST送信
$options = array('http' => array(
'method' => 'POST',
'content' => http_build_query($params)
));
$res = file_get_contents(GOOGLE_TOKEN_URL, false, stream_context_create($options));

//レスポンス取得
$token = json_decode($res, true);
if(isset($token['error'])){
echo 'エラー: ' . $token['error'];
exit;
}
$access_token = $token['access_token'];

/*
* ユーザー情報取得
*/
$params = array('access_token' => $access_token);
$res = file_get_contents(GOOGLE_USERINFO_URL . '?' . http_build_query($params));
echo "<pre>" . print_r(json_decode($res, true), true) . "</pre>";

以下の様なレスポンスが表示されるので、テーブルやセッションに突っ込んで管理しましょう。

Array
(
[id] => 省略
[email] => ...@gmail.com
[verified_email] => 1
[name] => 田中太郎
[given_name] => 太郎
[family_name] => 田中
[picture] => https://lh4.googleusercontent.com/... .jpg
[locale] => ja
)