[Javascript] Googleログイン

Javascript

GoogleCloudにアクセス

1. サイトにアクセス（Googleログイン済みの状態）

GoogleCloud

利用規約などにチェックをして、同意して次に進む。

2. プロジェクトの選択をクリック

3. 新しいプロジェクトをクリック

4. プロジェクト名を入力

登録完了すると、下記のような表示になります。

5. OAuth同意情報をクリック

公開型のWEBページで使うので、「外部」を選択して、「作成」ボタンをクリック。アプリ名とサポートメールを入力

ディベロッパーのメールアドレスを入力（上記と同じものを入力しました。）

他のところは未記入で、保存して完了しましょう。

6. 認証情報をクリック

7. 認証情報を作成 - OAuthクライアントIDをクリック

8. アプリケーションの種類で「ウェブアプリケーション」を選択

9. 認証済みのJavascript生成元を登録

公開するURLと、開発環境のURLを登録しておきます。

開発環境が、"http://localhost:8888"のようにポート番号がある場合は、下記のように２種類の登録をしないと正常にアクセスできません。

http://localhost
http://localhost:8888

登録が完了したら、「作成」ボタンを押す。

10. 登録完了画面で、JSONデータをダウンロードしておく

"google_oauth.json"というファイル名で保存しておきました。

WEBページのJavascriptの記述方法

クライアントIDが書かれたJSONファイルが取得できたら、それを読み込んで、OAuth認証できるように、ホームページの設定を行います。汎用的に対応できるように、処理をライブラリ化して、htmlで読み込んで使えるようにしておきました。

index.html

<script src='google_oauth.js'></script>
<div id='google_oauth'></div>
<div id='user'></div>

google_oauth.js

(()=>{
  function Main(){
    this.load_json()
  }

  Main.prototype.load_json = function(){
    const xhr = new XMLHttpRequest()
    xhr.open('get' , 'google_oauth.json' , true)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = this.loaded_json.bind(this)
    xhr.send()
  }

  Main.prototype.loaded_json = function(e){
    this.json_data = JSON.parse(e.target.response)
    this.load_module()
  }

  Main.prototype.load_module = function(){
    const script = document.createElement('script')
    script.src = 'https://accounts.google.com/gsi/client'
    script.onload = (()=>{
      this.init_module()
      this.view_login_button()
    }).bind(this)
    document.querySelector('head').appendChild(script)
  }

  Main.prototype.init_module = function(){
    google.accounts.id.initialize({
      prompt_parent_id      : 'google_oauth',
      client_id             : this.json_data.web.client_id,
      prompt_close_button   : false,
      callback              : this.login_callback.bind(this),
    })
  }

  Main.prototype.view_login_button = function(){
    google.accounts.id.renderButton(document.getElementById('google_oauth') , {
      logo_alignment : 'center',
      size           : 'medium',
      type           : 'icon',
    })
  }

  Main.prototype.login_callback = function(e){
    const data = this.jwt_decode(e.credential)
    this.logined_icon_view(data)
  }

  Main.prototype.logined_icon_view = function(data){
    if(!data || !data.picture){return}
    const elm = document.getElementById('user')
    if(!elm){return}
    const img = new Image()
    img.src = data.picture
    elm.innerHTML = ''
    elm.appendChild(img)
  }

  Main.prototype.jwt_decode = function(jwt){
    const base64Url = jwt.split('.')[1]
    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
    const str1 = atob(base64)
    const str2 = escape(str1)
    const str3 = decodeURIComponent(str2)
    return JSON.parse(str3)
  }

  switch(document.readyState){
    case 'complete':
    case 'interactive':
      new Main()
      break
    default:
      window.addEventListener('DOMContentLoaded' , (()=>{new Main()}))
  }
})()

Howto

1. index.htmlをブラウザで開くと、Googleのログインアイコンが表示されるので、クリックして、Googleでログインをする。 2. ログイン後に、ページに戻ってきて、ログインで取得した、画像が表示されます。

ログインデータは、名前、メールアドレス、などが取得できるので、cookieやLocalStorageなどに格納して、ログイン状態を保持することで、簡易にログインシステムを構築することが可能です。

注意点

GoogleCloudの無料枠が、１月に100ユーザーまでの利用になっています。それ以上のユーザーになる場合は、有料課金するか、別のログイン方式にしてください。

エラー対応

うまく、ログインボタンが表示されなくて、ブラウザコンソールに、次のようなエラーが出る場合。

Failed to load resource: the server responded with a status of 403 ()
m=credential_button_library:44 [GSI_LOGGER]: The given origin is not allowed for the given client ID.

こんな場合は、GoogleCloudの設定に問題がある場合がほとんどです。そして、ほとんどが、「認証済みのJavascript生成元の登録」のURL登録が正常にできていない事が原因です。