Google関連

[Google Apps Script]OAuth認証(2.0)が必要なWeb APIを利用する。

前回の記事ではGoogle Apps Scriptを使ってWebアプリケーションを作成する手順を紹介しましたが、今回はWebアプリケーションからOAuth認証(2.0)が必要なWeb APIを利用する方法を紹介します(例:Google URL Shortener API)。

    ※ まずはアプリの準備を行います。

  1. Webアプリケーションとしてスクリプトを作成し、ウェブ アプリケーションのURL(ここではテスト用)を取得します(「[Google Apps Script]Webアプリケーションを作成する。」参照)。
  2. ウェブ アプリケーションのURLの末尾を「/usercallback」に書き換えたものをリダイレクト先のURLとして控えておきます。
  3. https://script.google.com/macros/s/EFGH/dev

    https://script.google.com/macros/s/EFGH/usercallback

    ※ Google APIの準備を行います。

  4. API コンソールにアクセスします。
  5. Services」から利用するAPIを「ON」にします(ここではURL Shortener API)。
  6. GoogleAppsScript_13_01

    GoogleAppsScript_13_02

    GoogleAppsScript_13_03

  7. API Access」から「Create an OAuth 2.0 client ID…」ボタンをクリックします。
  8. GoogleAppsScript_13_04

  9. Branding Information画面が表示されたら必要事項(ここではProduct name:のみ)を入力後、「Next」ボタンをクリックします。
  10. GoogleAppsScript_13_05

  11. Client ID Settings画面が表示されたら「Web application」を選択します。
  12. GoogleAppsScript_13_06

  13. (more options)」をクリックし、「Authorized Redirect URIs」欄に手順2.で用意したリダイレクト先のURLを入力します。
  14. GoogleAppsScript_13_07

  15. Authorized JavaScript Origins」欄には「https://script.google.com」と入力し、「Create client ID」ボタンをクリックします。
  16. GoogleAppsScript_13_08

  17. API Access画面に作成したClient IDClient secretが表示されるので、これらをメモ帳にでも控えておきます。
  18. GoogleAppsScript_13_09

    ※ 再びスクリプト エディタでの作業に戻ります。

  19. コード.gsに下記コードを貼り付け、Client IDClient secretリダイレクト先のURLを設定します。
  20. var client_id = ''; //クライアントID(Client ID)
    var client_secret = ''; //クライアントシークレット(Client secret)
    var redirect_uri = ''; //リダイレクト先のURL
    var scope = 'https://www.googleapis.com/auth/urlshortener'; //APIによって要変更
    
    function doGet(){
        var url = 'https://accounts.google.com/o/oauth2/auth?client_id=' + client_id;
        url += '&redirect_uri=' + encodeURIComponent(redirect_uri);
        url += '&scope=' + encodeURIComponent(scope);
        url += '&state=' + ScriptApp.newStateToken().withMethod('callback').withArgument('name', 'value').withTimeout(2000).createToken();
        url += '&response_type=code';
        url += '&access_type=offline';
        
        return HtmlService.createHtmlOutput('<a href="' + url + '">認証</a>');
    }
    
    function callback(e){
        //---------- Access Token取得ここから ----------
        var opt = {
            "method" : "POST",
            "payload" : {
                "code" : e.parameter.code,
                "client_id" : client_id,
                "client_secret" : client_secret,
                "redirect_uri" :redirect_uri,
                "grant_type" : "authorization_code"
            },
            "muteHttpExceptions" : true
        };
        var res = UrlFetchApp.fetch('https://accounts.google.com/o/oauth2/token', opt);
        var dat = JSON.parse(res.getContentText());
        var access_token = dat.access_token;
        //---------- Access Token取得ここまで ----------
        
        //---------- API使用例ここから ----------
        opt = {
            "method" : "GET",
            "headers" : {
                "Authorization": "Bearer " + access_token
            }
        };
        res = UrlFetchApp.fetch('https://www.googleapis.com/urlshortener/v1/url/history', opt);
        //---------- API使用例ここまで ----------
        
        return HtmlService.createHtmlOutput('<pre>' + res.getContentText() + '</pre>');
    }
  21. doGet」関数を実行します。
  22. GoogleAppsScript_13_10

  23. 承認が必要です」とのメッセージが表示されたら「続行」ボタンをクリックします。
  24. GoogleAppsScript_13_11

  25. このアプリが次の許可をリクエストしています。」とのメッセージが表示されたら「承認する」ボタンをクリックします。
  26. GoogleAppsScript_13_12

  27. 手順1.で取得したアプリケーションのURLにアクセスして動作確認を行います。
  28. GoogleAppsScript_13_13

  29. 認証」リンクをクリックすると「このアプリが次の許可をリクエストしています。」とのメッセージが表示されるので(OAuth認証画面)、「承認する」ボタンをクリックします。
  30. GoogleAppsScript_13_14

  31. 問題無く認証が行われれば、アクセストークン(Access Token)を取得することができ、OAuth認証が必要なAPIを利用することができます。
  32. GoogleAppsScript_13_15

doGet関数で認証画面へのリンク作成。

認証画面で認証を行い、ページがリダイレクトされるとcallback関数が実行される。

callback関数の中でアクセストークンを取得し、Web APIを利用した処理を実行する。

といった処理の流れになっています。
要するに、ScriptApp.newStateToken()を使って/usercallbackにstateパラメータを渡すとコールバック処理でいろいろできる、ということのようです。

今回のコードをテストするにあたって、下記Webページ、特に「GoogleAppsScript – Google Apps Script DE OAuth2 ~ GASで直接触れない Google APIを叩いてみるお~」がとても参考になりました。

■ 参考Webページ

・GoogleAppsScript – Google Apps Script DE OAuth2 ~ GASで直接触れない Google APIを叩いてみるお~ – Qiita
http://qiita.com/soundTricker/items/b4df3072088fcbd0e36d
・天使やカイザーと呼ばれて ≫ OAuth2.0によるGoogle+ APIのアクセス方法
http://www.eisbahn.jp/yoichiro/2011/10/oauth2-0_google-api.html
・Using OAuth 2.0 for Web Server Applications – Google Accounts Authentication and Authorization – Google Developers
https://developers.google.com/accounts/docs/OAuth2WebServer?hl=ja
・Getting Started – URL Shortener API – Google Developers
https://developers.google.com/url-shortener/v1/getting_started?hl=ja
・newStateToken()
https://developers.google.com/apps-script/reference/script/script-app?hl=ja#newStateToken%28%29
・Class StateTokenBuilder
https://developers.google.com/apps-script/reference/script/state-token-builder?hl=ja

【編集後記】

今回のコード、実はテスト時にまったく上手く行きませんでした。
authorization codeをPOSTするときにredirect_uriをURLエンコードしてしまったことが原因だったのですが、これに気付くまで大分時間が掛かりました。
コードはよく見ないとダメですね・・・。

[Google Apps Script]Webアプリケーションを作成する。前のページ

[Google Apps Script]UrlFetchApp.fetchからのアクセス情報次のページ

関連記事

  1. Google関連

    [Google Apps Script]サイドバーを表示する

    Google Apps Scriptでサイドバーを表示します。…

  2. Google関連

    [Google Apps Script]マクロの記録のショートカット情報の保存先

    Google スプレッドシートには、Web版ExcelのOffice …

  3. Google関連

    「GAS Station #2」に参加してきました。

    昨日(2015/10/9)行われたGAS(Google Apps Sc…

  4. Office関連

    Google スライドで新規プレゼンテーションを作成するVBAマクロ

    ここ数日PowerPointのマクロに加え、Google Apps S…

  5. Google関連

    Google Docs用アドオンを作成する。

    「Google Docs用アドオンストアがオープン、表計算や文書作成に…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

PAGE TOP