LoginSignup
3
6

PHPでGoogleログインの実装をする方法(2023年11月時点動作)

Last updated at Posted at 2023-11-30

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

はじめに

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

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

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

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

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

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

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

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

Googleでログインについて

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

Qiita_login_01

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

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

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

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

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

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

実装

環境

  • PHP 8.2

GoogleCloudPlatformの設定

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

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

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

プロジェクトの作成

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

Create_Project.png

同意画面の作成

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

Project_Top.png

(大抵下にあります)

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

api_and_service_menu.png

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

大抵の場合は外部です。

select_user_type.png

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

input_application_info.png

スコープを追加します。

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

add_scope.png

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

add_test-user.png

完了です。

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

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

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

api_and_service_menu.png

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

info_create.png

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

info_application_type.png

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

input_domain_and_redirect_uri.png

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

Create_Client_ID_Info.png

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

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');"

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

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側はこちらの記事3を参考にしました。

新しい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さん、ありがとうございます。

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

注釈

  1. Google for Developer

  2. お名前.com レンタルサーバーで Laravel を動かす

  3. WEBページに「Googleアカウントでログイン」を実装する

3
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
6