JavascriptでGoogleAPI OAuth2.0を利用する方法

Google が提供している様々なサービスやAPIを利用するためにはGoogle に対してOAuth2承認を行う必要があります。
以下はJavaScriptを使ってOAuth2認証を行い、アクセストークンを取得する手順のメモです。
※ここではGoogle APIを利用するための初期設定については省略します。初期の設定については
脚注のリンクを参照ください。¹

#1.Google APIs Client Library for JavaScript (Beta)を利用する

下記ライブラリを利用して、認証情報を簡単に取得することができます。
Google APIs Client Library for JavaScript (Beta)
[公式ページ]
https://developers.google.com/api-client-library/javascript/start/start-js
[CDN]
https://apis.google.com/js/client.js

#2.ライブラリ読み込み完了時に実行する関数の指定
URLパラーメターに、[onload=hoge()]とすると、関数hogeが実行されます。
ここで指定可能な関数はwindowsオブジェクト直下の関数です。

例)

  <script src=https://apis.google.com/js/client.js?onload=hoge></script>
  <script>
  function hoge(){
    //この関数が実行されます。
  }
  </script>

#3.認証情報の送信
読み込みが完了すると、gapiオブジェクトが作成されます。このオブジェクトを介して、認証情報の送信とアクセストークンの取得を行います。
まず、登録したアプリケーションのClient_Secretをgapi.client.setApiKeyでセットします。次にgapi.auth.authorizeで認証情報をサーバーに送ります。
引数の最後 handleAuthResultの部分にはコールバック関数を指定します。
※引数scopeについては脚注リンク参照²

function hoge(){
    //Client_Secretをセット
    gapi.client.setApiKey(client_secret);
    //認証を行います。setTimoutしているのは認証中にブラウザが待ち状態になってしまうのを防ぐため。
    setTimeout(function(){
            gapi.auth.authorize({client_id: client_id, scope: scope, immediate: true}, handleAuthResult);
          },1);
}

#4.アクセストークンを取得する
指定したコールバック関数にアクセストークンを含む認証情報が返ります。

function handleAuthResult(authResult)
          if (authResult && !authResult.error) {
             //認証情報の処理
          }
}

authResultの中身は以下のようになっています。

 {
 _aa: "1"
 access_token: "ya29.UQEj7tIFMcU0-  DehRNWoAdGPdMjE1tCSdOeSemnzNwlSOEOK33qU7tXg1iAaKc1J4qVs9ukDUA"
  client_id: "113288400450-ns0c5tdneulj3bucti9gbltggfsl6mvr.apps.googleusercontent.com"
  cookie_policy: undefined,
  expires_at: "1428710672",
  expires_in: "3600",
  g_user_cookie_policy: undefined,
  issued_at: "1428707072",
  response_type: "token",
  scope: https://www.googleapis.com/auth/plus.me https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email 
  state: "",
  status:{
          google_logged_in: false,
          method: "AUTO",
          signed_in: true
  },
  token_type: "Bearer"
}

基本的な処理は以上です

#補足：任意のタイミングで認証したい
通常はページ読み込み時ではなく、任意のタイミングで認証させたいでしょう。
以下は任意のタイミングで認証を行う場合の一例です。(jqueryを使用しています）

$.getScript("https://apis.google.com/js/client.js?onload=hoge");

これだけです。※無論、関数hogeを実装しておく必要があります。
なお、$.getScriptの読み込み完了後に処理すればよいのでは？と思われるかもしれません。
下記のように

$.getScript("https://apis.google.com/js/client.js?onload=hoge").then(
      function(){
                gapi.client.setApiKey(your_client_secret);
                gapi.auth.authorize({client_id: client_id, scope: scope, immediate: true}, handleAuthResult);
      }
);

という方法もありますが、これだとタイミングによっては、変数gapiがundefindeの状態で処理が行われるため、エラーとなる場合があります。
setTimeoutで何秒か待って実行するという方法もあるかと思いますが、
onloadで指定したコールバック関数で処理するのが間違いないでしょう。

また、認証完了後に任意のクラスメソッドを実行させたい場合は、クラスメッソドへの参照を一時的に作成すればよいでしょう。

//タイムスタンプ等を使用し、任意のコールバック関数名を作成。
var callback="callback"+ +new Date();
//クラスメソッドHoge.hogeの参照をコピー
window[callback]=HOGE.hoge;

$.getScript("https://apis.google.com/js/client.js?onload="+callback);

//以下クラスHoge のメソッドhoge
hoge:function(authResult){
     //認証情報の処理後、callback関数への参照を削除
     delete window.callback;
}
のようにすればよいでしょう。

#脚注：

1. [承認の認証情報を取得する]※YouTubeAPIを使用する場合の例です。https://developers.google.com/youtube/registering_an_application?hl=ja ↩

2. scopeについて：https://developers.google.com/drive/training/drive-apps/auth/scopes?hl=ja ↩