あるサイトでよくみかける、Googleのワンタップログインについて調べた
右上にでるこんなやつ
Google アカウントにログインしている場合は、ワンタップでログインできるので便利
セットアップは以下
セットアップしたら以下のスクリプトをサイトに埋め込む
<script src="https://accounts.google.com/gsi/client" async defer></script>
ログインボタンを配置する
上の準備ができたらログインボタンを配置する
JavaScriptでやる場合は以下のようになる
<html> <body> <script src="https://accounts.google.com/gsi/client" async defer></script> <script> function handleCredentialResponse(response) { console.log("Encoded JWT ID token: " + response.credential); } window.onload = function () { google.accounts.id.initialize({ client_id: "YOUR_GOOGLE_CLIENT_ID", callback: handleCredentialResponse }); google.accounts.id.renderButton( document.getElementById("buttonDiv"), { theme: "outline", size: "large" } // customization attributes ); google.accounts.id.prompt(); // also display the One Tap dialog } </script> <div id="buttonDiv"></div> </body> </html>
Firebase Authとの連携
Firebase Auth を使っているため、そこと連携させたい
詳しくは実際に実装するときに考えるが、以下のようにsignInWithCredentialにJWT IDを渡してあげるとよさそう
firebase.auth() .signInWithCredential(fb.auth.GoogleAuthProvider.credential(id_token)) .catch(function (error) { console.error("bruno says", error) })
この辺を参考にした
他参考
https://developers.google.com/identity/sign-in/case-studies/pinterest
https://developers.google.com/identity
https://github.com/BurakGur/google-one-tap/blob/master/index.js
https://github.com/brunocrosier/google-one-tap/blob/master/useGoogleOneTap.ts
