[ProPro]Googleログインライブラリの変更

12555 ワード
テキストリンク
サイトGoogle Sign-In Javascript Platform Libraryは中断されるため、新しいウェブサイトGoogle IDサービスSDKを利用する必要がある.
そこで、サービスの改善とともに、この機会に変更することにしました.

新添


パーソナライズされたログインボタン


Googleセッションにログインしたレコードが存在する場合、ユーザーのパーソナライズされたボタンが表示されます.(伝統的にはgoogleログインなどの文字にすぎません)

One tap


名前の通り、クリックするだけで新しいユーザーを登録したり登録したりする機能です.

しかし、私は新しい機能を追加する必要はありませんので、以前と同じようにそれを使用したいと思っています.

使用方法


クライアントライブラリのロード

<head>
  <!-- 생략... -->
  <script src="https://accounts.google.com/gsi/client" async defer></script>
  <title>pro-pro</title>
</head>

google.accounts.id.initialize


google.accounts.id.initializeメソッドを使用してGoogleログインを初期化します.
Client idフィールド:Google OAuthクライアントIDの指定
コールバックフィールド:ログインに成功した場合、JWTに戻り、関数を登録してその時点のハンドラとして指定します.
さらに、より多くの異なるフィールドがあり、IdConfigurationを参照することが望ましい.
<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    // google.accounts.id.prompt();
    // One Tap 기능을 사용하지 않기 때문에 주석처리하였다.
  };
</script>

google.accounts.id.renderButton


google.accounts.id.renderButtonメソッドを使用してGoogleログインボタンをブラウザでレンダリングすればよいが、以前のようにイベントハンドルをカスタムボタンにアタッチすることはできないので、提供された機能でカスタマイズするしかない.
ボタンは、最初のパラメータとして指定された要素にレンダリングされ、ボタンを2番目のパラメータとしてカスタマイズできます.
同様に、文書では、ボタンカスタマイズオプションに従って例を視覚的に示すために参照することができる.
<script>
  window.onload = function () {
	// 생략...
    google.accounts.id.renderButton(
      document.getElementById("buttonDiv"),
      { theme: "outline", size: "large" }  // customization attributes
    );
  }
</script>
<div id="buttonDiv"></div>

最終サンプルコード

<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" }
          );
          google.accounts.id.prompt();
        }
    </script>
    <div id="buttonDiv"></div> 
  </body>
</html>
既存のGoogleログインライブラリとは異なり、ボタンを自分の好みで自由に飾るのは制限があるのが残念...
カスタムボタンのように見えず、以前のようにボタンにテキストだけを表示したい場合は、カスタムボタンのオプションでボタンをtype:iconまたはsize:medium or sizeまたはwid:200 px以下に設定できます.

Reference

  • https://developers.google.com/identity/gsi/web/reference/js-reference
    • darknet——YOLOv 3テスト
    flexがwebserviceのカスタムクラスを呼び出す方法