本記事は、めんどい太郎の Advent Calendar 2023 1日目の記事です。

はじめに

この記事は初心者が書いています。

皆さんは普段、様々なサービスにどのようにしてログイン・登録していますか？

今話題のPass Keyを使っている方や、登録したIDとパスワードを使用する人など様々だと思います。

そんなログイン・登録であると非常に便利なのがSNSログインです。

今回はそんなSNSログインの一つである「Googleでログイン」の実装方法をご紹介いたします。

正直、Googleのドキュメントはめちゃくちゃわかりやすいので公式ドキュメントを読んで見ることをおすすめします。

案外仕様変更が行われていたりします。

2023年にGoogleログインが非推奨になり、廃止されました。
この記事は2023/11時点でサポートされている新しいGoogleでログインの記事です。

Googleでログインについて

皆さんは画像のような画面、見たことありませんか？

(スクリーンショット撮影ページ¹)

これはQiitaのログインページなのですが、QiitaにもGoogleでログインする機能が実装されています。

Googleは使用しているユーザーが多いので、SNSログインで一番使われやすい方法だと思います。

ユーザーもGoogleアカウントにログインするだけで、登録・ログインすることができるため手間がかからず便利です。

GoogleはOne Tapというメニューからログイン済みのアカウントを選択するだけでログイン可能というその名の通りワンタップでログインできる機能を提供しています。

ユーザーはログイン・登録の手間が非常に少なくなるため、Googleでログインの実装は新規ユーザー獲得のためにも非常に有効だと思われます。

実装

環境

PHP 8.2

GoogleCloudPlatformの設定

Googleでログインはfirebaseというサービスを利用するとお手軽に実装できるという記事がたくさん出てきますが、PHPは公式にサポートされていません。(サードパーティのライブラリはある)

今回は、APIを利用した方法で実装していきます。

APIを利用するために、GoogleCloudPlatformを使用します。

プロジェクトの作成

GoogleCloudPlatformのコンソールにアクセスし、プロジェクトを作成します。

同意画面の作成

プロジェクトのトップ画面に向かい、「APIとサービスページ」に移動します

(大抵下にあります)

メニューから「OAuth consent screen」を選択します

ユーザータイプを選択します。

大抵の場合は外部です。

アプリの詳細情報を入力します。

スコープを追加します。

画像の3つのスコープを追加しておけば大丈夫だと思います。

テストユーザーとして自分を追加します。

完了です。

本番環境に持っていくときに、GoogleCloudPlatform上でアプリを公開するのを忘れないでください。

OAuthクライアントIDを作成する

メニューから「認証情報」を選択します

「認証情報を作成」から「OAuth クライアント ID」を選択します。

アプリケーションの種類を「ウェブアプリケーション」にし、わかりやすい名前をつけます。(テスト環境など)

ドメインとリダイレクトURIを登録します。

表示されたクライアントIDをメモしておきます。

ライブラリのインストール

composerのインストール

共用のレンタルサーバーなどでも、composerは利用可能です。

composerの公式サイトを参考にインストールをします。

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'e21205b207c3ff031906575712edab6f13eb0b361f2085f1f1237b7126d785e826a450292b6cfd1d64d92e6563bbde02') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

参考記事²を参考にし、ユーザーディレクトリ内にインストールを行います。

mkdir ~/bin
mv composer.phar ~/bin/composer

最後に、composerのバージョンを確認しインストールできているかを確認します。

composer --version

バージョンが表示されれば、インストール完了です。

ライブラリのインストール・設定

public_htmlの中など、googleログインを扱うファイルの存在するディレクトリに移動します。

composerを使用して、ライブラリをインストールします。

composer require google/apiclient

ログインページを作成する

Googleのツールを用いてログインボタンを作る

まずはクライアントライブラリを読み込みます。

<script src="https://accounts.google.com/gsi/client" async></script>

body内のログインボタンのコードの直前で構いません。

Googleが公開しているツールを用いて、お好みでボタンを作成します。

「JavaScript コールバックに切り替え」をクリックせずに、ログイン後はリダイレクト処理を行わせてください。
ログインURIにphpまでのURIを入力してください。

HTML コードを生成

生成したコードを自身のサービスのログインページに貼り付けます。

以下は例です。

<html>
  <head>
    <meta charset="UTF-8">
    <title>TEST_GOOGLE_LOGIN</title>
  </head>
  <body>
    <h1>Googleでログイン</h1><br>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <div id="g_id_onload"
     data-client_id="{Your_Client_ID}"
     data-context="signin"
     data-ux_mode="popup"
     data-login_uri="{Your_Login_Redirect_URI}"
     data-nonce=""
     data-itp_support="true">
    </div>
    <div class="g_id_signin"
     data-type="standard"
     data-shape="rectangular"
     data-theme="outline"
     data-text="signin_with"
     data-size="large"
     data-logo_alignment="left">
    </div>
  </body>
</html>

PHPでデータを受け取る

PHP側はこちらの記事³を参考にしました。

新しいGoogleでログインはJWTが返ってくるので、それを受け取ります。

そのため、少しだけコードが変わります。

以下は例です。

<?php 
require_once 'vendor/autoload.php';

$id_token = $_POST['credential'];
define('CLIENT_ID', '{Your_Client_ID}');

$client = new Google_Client(['client_id' => CLIENT_ID]); 
$payload = $client->verifyIdToken($id_token);
if ($payload) {
  $userid = $payload['sub'];
}
?>

これでGoogleでログインの実装は完了です。

思ったより簡単ですね！

あとは、if ($payload)の中身に自分で処理を書けばOKです。

おわりに

Googleでログインを適切に実装できれば、それだけでかなり便利になると思います。

Googleさん、ありがとうございます。

バグなども多いかもしれません。ご指摘いただけるとありがたいです。