Webサイトにグーグルアカウントでログインする機能を実装する[準備編]

2020年6月3日グーグル

グーグルアカウントでログインする機能の実装方法なんかをまとめました

ウェブサイトのユーザログインページなんかでよく見るあれです

正確にいうと、「Google Sign in」の実装になります

今回の実装に使う言語はPHPです

参考にならないした公式ドキュメントはこちら

この記事は実装前の準備編になります

実装編はこちら

GCPの準備

1. アカウント＆プロジェクトの作成

まずはGCP(Google Cloud Platform)でアカウントを作成します

続いて、「新しいプロジェクト」ボタンを押してプロジェクトを作成します

プロジェクト名は適当かつ、わかりやすい名前にしておきます

2. OAuth同意画面の作成

まずは認証情報を作成する前に、ログインするユーザに対する同意画面の設定を行います

左のメニューから「APIとサービス」->「OAuth 同意画面」を選択します

今回、外部のユーザにも使ってもらいたいので「外部」を選択し「作成」ボタンを押下しました

そうすると、同意画面の詳細を入力するページが開きます

アプリケーションのロゴとかアップロードする箇所がありますが、正直このロゴがどこに使用されてるのかはわかりませんでした

なんか色々と書いてありますが、とりあえずここでは「アプリケーション名」と「ロゴ」を設定します

3. 認証情報の作成

同意画面の設定が終わったところで、やっとログイン認証の設定となります

左メニューの「認証情報」を選択し、「+　認証情報を作成」->「OAuthクライアントID」と選択していきます

OAuthクライアント IDの作成

アプリケーションの種類では自分の使用する媒体を選択します（僕の場合はウェブアプリケーション）

名前は適当なクライアント名を設定します

あとは「作成」ボタンを押せばいいんですが、あとで必要になるので他の項目も設定してしまいます

「承認済みの JavaScript 生成元」

「+URIを追加」ボタンを押下して、URLを追加します

というよくわからない説明がありますが、要は認証機能を実装するウェブサイトのドメインを設定しておけばいいみたいです

例：https://example.com

「承認済みのリダイレクト URI」

ここは入力不要です

というか、入力しても指定したURLへリダイレクトしてくれません（無視されます）

作成完了

「OAuthクライアントを作成しました」

というポップアップが表示されたら完了です

クライアントIDはあとで使います

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

Google SIgn inにはライブラリが必要です

GitHubからダウンロードするか、コンポーザーでインストールします

Composer

composer require google/apiclient

準備編はここまでです

次は実装編になります