GoogleからGoogle Sign-In for Websitesを利用していたサイト宛にSign In With Googleへの変更の連絡があったので対応しました。
SOY ShopのGoogle Sign-In for Websitesプラグインでボタンの拡張設定を追加しました
Google Identity Platform | Google Developers
ページのテンプレートに挿入するタグやスクリプトに大きな変更がありますので、当プラグインを使用している方はSOY Shopのバージョンアップ後にプラグインの詳細画面を開き、ボタンのカスタマイズのHTMLの変更を行ってください。
今回対応分を含んだパッケージは下記のサイトからダウンロード出来ます。
https://saitodev.co/soycms/soyshop/
余談ですが、Google Sign-In WebsitesからSign In With Googleに変更する際に苦戦した箇所を載せておきます。
例えば、サイトにGoogleログインのボタンを設置し、ボタンを押したらGoogleへのログインフォームのページがポップアップし、ログインの手続きが終了したら、サイトの方でログインしたアカウントのメールアドレスを取得するという場合、
Google Sign-In Websitesであれば、
<html>
<head>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</body>
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
var email = profile.getEmail();
}
</script>
上記のスクリプトの箇所の太線の箇所の二行でログインしたアカウントのメールアドレスを取得できたが、この操作はSign In With Googleでは廃止された。
代わりにGoogleからBase64でエンコードされたJWT（Json Web Token）が返ってくるようになったので、レスポンスをデコードするといった処理が必要になる。
上記の内容を踏まえて、変更内容は下記の通り
※ライブラリを使用せずにJavaScriptでjwtトークンをデコードする方法は？ - FIXES.PUBを参考
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
data-client_id="YOUR_CLIENT_ID"
data-callback="handleCredentialResponse">
</div>
<div class="g_id_signin" data-type="standard"></div>
</body>
<script>
function handleCredentialResponse(resp){
var json = parseJwt(resp.credential);
var email = json.email;
}
function parseJwt(tk) {
var base64Url = tk.split('.')[1];
var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
};
</script>
parseJwtという関数を用意して、Googleから返ってきた値のうちcredentialの値をbase64デコードした後に得られたJsonのデータからメールアドレスを取得するという手続きが必要になる。
