sign_in_with_google


前回のSOY ShopのGoogle Sign-In for WebsitesプラグインをSign In With Googleに変更しましたの記事で、Sign In With Googleに対応した旨を記載した。

Sign In With Googleでは、Googleがボタンを自由にカスタマイズ出来るGenerate HTML code  |  Sign In With Google  |  Google Developersというページを用意しているので、今回はジェネレータの使い方を見ることにする。


generate_html_code


ジェネレータのページを開いたら、Login URIの項目の下にあるSwap to JavaScript callbackのリンクをクリックした後、各項目を下記のようにする。

・Google client ID：Google Cloud Platformで取得したクライアントID（##YOUR_CLIENT_ID##も可）

・Data Context：Sign in

・ID token nonce：任意

※ID token nonceはリプレイ攻撃を防ぐためにIDトークンによって使用されるランダムな文字列出力の設定

https://developers.google.com/identity/gsi/web/reference/html-reference#data-nonce

・Callback function：onSignIn


上記の入力を終えたらNextボタンをクリックする。



generate_html_code_1


Select sign-in methodsが表示されたら、Enable Sign in with Google buttonにチェックを入れる。



generate_html_code_2


ボタンのデザインに関する設定が表示されたら、適宜設定をして、Get codeボタンを押す。


generate_html_code_3


表示されたHTMLをプラグイン詳細画面に貼り付けて更新すれば、ボタンのカスタマイズは終了となる。