JavaScirpt で Google の認証を行う方法【2020年版】

2020年10月12日月曜日

Google javascript

t f B! P L

GoogleでログインするOAuth認証や、Map・ Photo(フォト)などの各種APIは便利ですが…わりと頻繁にAPIの仕様が変わるため、いつも悩まされます。

この記事では、JavaScirptで Googleにログインする方法や、各種リソースAPIの2020年の動向について紹介したいと思います。

Google API Client Library for JavaScript

ネット記事を見る限りでは、2020年もGoogle JavaScirpt APIは、Google API Client Library for JavaScriptを使うのが主流になりそうだ。

認証(ログイン)が超楽

具体的なサンプルコードは後述するが、特に「Google API Client Library for JavaScript」を使えば、認証(ログイン)まわりの処理が、REST APIに比べてはるかに楽に実装できる。

各リソースへはREST APIを通じてアクセス

認証以外の、Google Map・ Photo(フォト)などの各リソースへのアクセスは、専用のライブラリーが提供されいる物もあるが、基本的にはREST APIで操作するのが一般的な感じです。

Google認証を実装してみる

では実際に、Google API Client Library for JavaScriptを使って、Googleにログインするサンプルコードを見ていきましょう。

事前準備

事前に、Google Cloud Platformへの登録と、API KEY、OAuthクライアントIDの作成をしておいてください。
あと、Googleアカウントのユーザー名も取得するため「People」APIも有効にしておいてください。

サンプルコード

公式のサンプルそのまま間がすごいですが、JavaScirptでGoogleにログインするサンプルコードです。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Say hello using the People API</title>
    <meta charset='utf-8' />
  </head>
  <body>
    <p>Say hello using the People API.</p>

    <!--認証ボタン-->
    <button id="authorize-button" style="display: none;">Googleでログイン</button>
    <!--サインアウトボタン(認証済みの場合のみ表示され
    <button id="signout-button" style="display: none;">サインアウト</button>

    <div id="content"></div>

    <script type="text/javascript">
      var apiKey = '<APIキー>';

      // Enter the API Discovery Docs that describes the APIs you want to
      // access. In this example, we are accessing the People API, so we load
      // Discovery Doc found here: https://developers.google.com/people/api/rest/
      var discoveryDocs = ["https://people.googleapis.com/$discovery/rest?version=v1"];

      // Enter a client ID for a web application from the Google API Console:
      //   https://console.developers.google.com/apis/credentials?project=_
      // In your API Console project, add a JavaScript origin that corresponds
      //   to the domain where you will be running the script.
      var clientId = '<OAuthクライアントID>';

      // Enter one or more authorization scopes. Refer to the documentation for
      // the API or https://developers.google.com/people/v1/how-tos/authorizing
      // for details.
      var scopes = 'profile';

      var authorizeButton = document.getElementById('authorize-button');
      var signoutButton = document.getElementById('signout-button');

      function handleClientLoad() {
        // Load the API client and auth2 library
        gapi.load('client:auth2', initClient);
      }

      function initClient() {
        gapi.client.init({
            apiKey: apiKey,
            discoveryDocs: discoveryDocs,
            clientId: clientId,
            scope: scopes
        }).then(function () {
          // Listen for sign-in state changes.
          gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

          // Handle the initial sign-in state.
          updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());

          authorizeButton.onclick = handleAuthClick;
          signoutButton.onclick = handleSignoutClick;
        });
      }

      function updateSigninStatus(isSignedIn) {
        if (isSignedIn) {
          authorizeButton.style.display = 'none';
          signoutButton.style.display = 'block';
          makeApiCall();
        } else {
          authorizeButton.style.display = 'block';
          signoutButton.style.display = 'none';
        }
      }

      function handleAuthClick(event) {
        gapi.auth2.getAuthInstance().signIn();
      }

      function handleSignoutClick(event) {
        gapi.auth2.getAuthInstance().signOut();
      }

      // Load the API and make an API call.  Display the results on the screen.
      function makeApiCall() {
        gapi.client.people.people.get({
          'resourceName': 'people/me',
          'requestMask.includeField': 'person.names'
        }).then(function(resp) {
          var p = document.createElement('p');
          var name = resp.result.names[0].givenName;
          p.appendChild(document.createTextNode('Hello, '+name+'!'));
          document.getElementById('content').appendChild(p);
        });
      }
    </script>
    <script async defer src="https://apis.google.com/js/api.js" 
      onload="this.onload=function(){};handleClientLoad()" 
      onreadystatechange="if (this.readyState === 'complete') this.onload()">
    </script>
  </body>
</html>

さいごに

JavaScirptでGoogleにログインする方法について、2020年版の最新情報を解説してきました。

スポンサーリンク

QooQ