Google認証のログイン画面
WEBサイトでの「Googleでログイン」の画面。よく見かけますよね。
そのサイトのアカウントを持ってなくて新規会員登録をするとき、Googleアカウントを持っていればそれを使ってログイン認証が代用できるようなやつです。新規登録の手間が省けます。
こちらはニコニコ動画のログイン画面。
息子くん、こんなにいろいろなアカウントで認証できるサイトはniconico動画以外に見たことない！って言ってます。
たしかに何個方法があるの！って感じです。「ニンテンドーアカウントでログイン」とか、ニンテンドーサイト以外で見たことないですねえ。
とにかく今回はこういうやつの「Googleでログイン」の機能を自分で作ったサイトに適用してみた、っていうお話。
実装
Google認証には、OAuth2.0というのを使うそうです。
これに関してはぐぐるといろいろやり方がでてくるのですが、息子くん実装するにあたっていろいろ試してみたらしいです。
ほとんどの情報がGoogleが公開する認証用のライブラリをrequireして使用しているらしいんですが、結構容量が大きく「僕のディスク容量をひっ迫する！」との理由でそれ以外の実装方法について調査。
その結果、以下の方法が参考になったとのことでした。
2015年12月のブログですが、現在（2020年3月）も問題なくいけるとのことでした。
これは、ライブラリではなくWebAPIを使っているらしいです。へー。
できあがり
localhost環境でこんな画面が表示されるようになりました！
「続行するにあたり、Google はあなたの名前、メールアドレス、言語設定、プロフィール写真を Youtube LIVE Archive と共有します。」とあります。
「Youtube LIVE Archive」というのは、息子くんの現在開発中のサービス（プログラム）名です。今絶賛開発中のようなので出来上がりが楽しみです。
このあとパスワードを入力した後、取得できた情報（json）がこちら。
個人情報が入っているのでモザイクかけましたが、
・id
・name
・given_name
・family_name
・picture
・locale
の情報が取得できていることがわかります。
要は最初に画面に表示されてた「あなたの名前、メールアドレス、言語設定、プロフィール写真」の情報ですね。
「Googleでログイン」って、わりと簡単に組み込めるものなんですね！
さいごに
このブログもだんだん見てくださっている方が増えているようでうれしいです。
「中１息子くん」になる前に「小６息子くん」のブログをあと１つは書きたいな。書けるかな。
スター・はてブとても嬉しいです！
