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

グーグルアカウントでログインする機能の実装方法なんかをまとめました
ウェブサイトのユーザログインページなんかでよく見るあれです
正確にいうと、「Google Sign in」の実装になります
今回の実装に使う言語はPHPです
参考にならないした公式ドキュメントはこちら
この記事は実装前の準備編になります
実装編はこちら
GCPの準備
1. アカウント&プロジェクトの作成
まずはGCP(Google Cloud Platform)でアカウントを作成します

続いて、「新しいプロジェクト」ボタンを押してプロジェクトを作成します
プロジェクト名は適当かつ、わかりやすい名前にしておきます
2. OAuth同意画面の作成
まずは認証情報を作成する前に、ログインするユーザに対する同意画面の設定を行います

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

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

そうすると、同意画面の詳細を入力するページが開きます
アプリケーションのロゴとかアップロードする箇所がありますが、正直このロゴがどこに使用されてるのかはわかりませんでした
なんか色々と書いてありますが、とりあえずここでは「アプリケーション名」と「ロゴ」を設定します
3. 認証情報の作成
同意画面の設定が終わったところで、やっとログイン認証の設定となります

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

アプリケーションの種類では自分の使用する媒体を選択します(僕の場合はウェブアプリケーション)
名前は適当なクライアント名を設定します
あとは「作成」ボタンを押せばいいんですが、あとで必要になるので他の項目も設定してしまいます
「承認済みの JavaScript 生成元」
「+URIを追加」ボタンを押下して、URLを追加します
ウェブ アプリケーションをホストする HTTP オリジン。この値にワイルドカードやパスを含めることはできません。80 以外のポートを使用する場合は、ポートを指定する必要あります。例: https://example.com:8080
というよくわからない説明がありますが、要は認証機能を実装するウェブサイトのドメインを設定しておけばいいみたいです
例:https://example.com
「承認済みのリダイレクト URI」
ユーザーは Google で認証されると、このパスにリダイレクトされます。パスには、アクセス用の認証コードが付加されます。またプロトコルを含める必要があります。パスには URL フラグメントや相対パスは使用できず、またパブリック IP アドレスは指定できません。
ここは入力不要です
というか、入力しても指定したURLへリダイレクトしてくれません(無視されます)
作成完了

「OAuthクライアントを作成しました」
というポップアップが表示されたら完了です
クライアントIDはあとで使います
ライブラリのインストール
Google SIgn inにはライブラリが必要です
GitHubからダウンロードするか、コンポーザーでインストールします
Composer
composer require google/apiclient
準備編はここまでです
次は実装編になります
ディスカッション
コメント一覧
リダイレクトURIが承認されていないと、基本的にリダイレクトURIミスマッチエラーで、GOOGLE側にはじかれませんか?
コメントありがとうございます。
この記事を書いたのが2020年6月ごろなので、今は挙動が変わってしまってるのかもしれません。
みんながLoadingしてる記事
新たにPostされた記事
: JS
Dropzone.jsで編集画面を作る(アップロード済みの画像を表示)
前回からの続きです Dropzone.jsを使って画像アップロードの編集画面を作 ...: Laravel
LaravelでDBテーブルをupdateした時に、同時に更新した値を取得する裏技[Laravel8]
通常Eloquentのsaveやupdateでは、実行時に更新した値の結果を返し ...: JS
忘れがちなJqueryのあれやこれ
Jqueryって何でこんなに忘れやすいのでしょうか 呪文にかかったくらい覚えられ ...: 資格
理系エンジニアの僕がTOEICで800点をとるためにした勉強
先日、TOEIC L&R テストで800点を超えました 今回は理系エンジ ...: Laravel
[Laravel8]npm run devが失敗する場合の解決法
Laravel8にJetstreamをインストールする際、npm run dev ...HashMap
Created by
はやぴ
Web/アプリ開発エンジニア
Sierにてお堅いB向けのソフトウェア開発を経て、現在はC向けのWebやアプリを中心に開発しています。
そのほか