webページをいかに簡単に構築するかシリーズで、システム対応のwebサイトを構築する時に便利な機能を習得しました。
誰もが持っているgmailでのログインを簡単に実現できる、「googleOAuth認証」です。
この機能を使えば、htmlだけでサックリと認証が担保できて、ユーザーIDとしてのメールアドレスを取得することができます。
ていうか、こんなこと、数年前からもてはやされているんですが、何で今回こんなブログを書いたのかというと、
Googleが2023年に大幅なシステム移行をして旧システムが利用できなくなるので、いろんなページで書かれているやり方ではいま現在設置ができなかったので、
Googleのドキュメントを読みながら自分で構築したので。分かったこと備忘録をブログに残しておきます。
このブログを読んでほしい人
・webページにGoogle認証機能をカンタンに導入したいと思っている人
・他のエンジニアブログで書いてあるログインAPIを使ってもうまく実装が出来ない人
・ユゲタのPodcastラジオを聴いている人
こんなエラー出ました
ちなみに、ググった結果で普通に設置してみたところ、
details : "You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. New clients must use the new libraries instead; existing clients must also migrate before these libraries are deprecated. See the [Migration Guide](https://developers.google.com/identity/gsi/web/guides/gis-migration) for more information."
error : "idpiframe_initialization_failed"
このエラー、翻訳してみると
「ユーザー認証または承認にライブラリを使用する新しいクライアント アプリケーションを作成しましたが、これはまもなく非推奨になります。新しいクライアントは、代わりに新しいライブラリを使用する必要があります。これらのライブラリが非推奨になる前に、既存のクライアントも移行する必要があります。[移行ガイド](https詳細については、://developers.google.com/identity/gsi/web/guides/gis-migration) を参照してください。
こりゃあ、重い腰を上げないといけませんよね。
参考
Google Athentification 「ウェブ向けGoogleでログイン」
HTML API
Javascript API
事前準備
Google認証を自分のwebサイトに実装する場合には、まず、GoogleCloudのAPI設定をしないといけません。
Google OAuth ウェブクライアントIDを作成する
このページの通りに行って、まずはクライアントIDを取得する必要があります。
GoogleアカウントでログインをWEBページに実装 – Google Cloud API
ちなみに、このページが絵付きで分かりやすかったです。
とにかく、「認証情報のOAuth2.0クライアントID」と「OAuth同意画面」という箇所の設定が完了すればOKです。
（他の設定は不要です）
分かりづらかったのが、「承認済みの JavaScript 生成元」という箇所に、本番サイトのURLと、開発環境用のURLを登録しておくことが重要でした。
開発環境のポートが複数ある場合は、その全てと,localhostのみを登録しておく必要があったので、結構時間取られてしまいました。
結果、ユゲタの場合は、上記のようなセットをしておきました。
HTMLの書き方
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
data-client_id="YOUR_CLIENT_ID"
data-callback="logined_callback"></div>
<script>
function logined_callback(e){
const data = jwt_decode(e.credential)
console.log(`ID: ${data.sub}`);
console.log(`Full Name: ${data.name}`);
console.log(`Given Name: ${data.given_name}`);
console.log(`Family Name: ${data.family_name}`);
console.log(`Image URL: ${data.picture}`);
console.log(`Email: ${data.email}`);
}
function jwt_decode(jwt){
const base64Url = jwt.split('.')[1]
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
const str1 = atob(base64)
const str2 = escape(str1)
const str3 = decodeURIComponent(str2)
return JSON.parse(str3)
}
</script>
(*YOUR_CLIENT_IDは上記で取得したクライアントIDに書き換えてください）
これだけで、Googleログインが画面に表示されます。
実際にボタンを押してログインすると、Googleに登録されている情報がブラウザコンソールに表示するようにしています。
いや〜簡単簡単。
ページ内のJavascriptで対応
単なるHTMLで使う場合は、上記のcallbackを受け取った後で、独自にcookie保存をして、セッション管理をすれば、ログインシステムが作ることができるんですが、
このままだと、htmlを読み込んだ直後のタイミングでしかログインができません。
ユーザーがログインしたいタイミングでログインダイアログを表示させたい場合など、ボタンやリンククリックのタイミングで自由にログインモーダルを出し入れしたい場合は、次のように書くことで実現できます。
<script src="https://accounts.google.com/gsi/client" async defer></script>
<button id='google_login'>login</button>
<script>
document.getElementById('google_login').onclick = ()=>{
google.accounts.id.initialize({
client_id : 'YOUR_CLIENT_ID',
prompt_parent_id : 'google_login',
style : 'position:static;',
auto_prompt : true,
auto_select : true,
cancel_on_tap_outside : false,
callback : logined_callback,
})
google.accounts.id.prompt();
}
function logined_callback(e){
const data = jwt_decode(e.credential)
console.log(`ID: ${data.sub}`);
console.log(`Full Name: ${data.name}`);
console.log(`Given Name: ${data.given_name}`);
console.log(`Family Name: ${data.family_name}`);
console.log(`Image URL: ${data.picture}`);
console.log(`Email: ${data.email}`);
}
function jwt_decode(jwt){
const base64Url = jwt.split('.')[1]
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
const str1 = atob(base64)
const str2 = escape(str1)
const str3 = decodeURIComponent(str2)
return JSON.parse(str3)
}
</script>
HTMLの記述と重複してますが、違っている箇所をみてもらうと、わかりやすいと思います。
"google.accounts.id.initialize(...)"で必要な情報をセットして、"google.accounts.id.prompt()"で起動するという手順です。
callbackと、表示するエリア"prompt_parent_id"を好きに書き換えてお使いください。
あとがき
今回はcallbackを使いましたが、responseを任意のurlで受け取ることもでき、PHPやRubyなどでサーバー処理することもできます。
そうすると、もっとセキュアな環境が作れますが、javascriptだけでもかなり安心な構造を作れます。
以前に書いたブログを参考にしてもらうと、なんとサーバー処理を一切せずにログイン認証できるwebサービスサイトが作れてしまいます。
PHPのSession管理をやめて、javascriptのSessionStorageを採用した技術的な話
これを使って、ユゲタはとんでもなく、面白いサイトが作れるイメージが湧いてきました。
いや〜、webページだけの技術で、もはやパソコンのアプリケーションを凌ぐサービスを作ることも可能になった時代ですね。
