質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

GASのウェブアプリケーションをjsのfetchで実行する方法

k.a_teratail
k.a_teratail

総合スコア496

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0評価

1クリップ

396閲覧

投稿2022/03/28 14:32

編集2022/04/21 12:31

前提

GASを使用
ウェブアプリケーションのデプロイ設定を下記で行いました。

・次のユーザーとして実行
ウェブアプリケーションにアクセスしているユーザ

・アクセスできるユーザ
組織 内の全員

実現したいこと

htmlファイルに記載したjavascriptから、デプロイを行なったGASの結果を取得したです。

また、実行・アクセスできるユーザは組織内のユーザのみに限定したいので、
GASデプロイ設定の「次のユーザーとして実行」と「アクセスできるユーザ」は上記の設定でお願いしたいです。

発生している問題・エラーメッセージ

上記の設定にすると処理結果を受け取れてません。

chromeのコンソールで確認するとこのような中身になってました。

console

Response {type: 'opaque', url: '', redirected: false, status: 0, ok: false, …} body: (...) bodyUsed: false headers: Headers {} ok: false redirected: false status: 0 statusText: "" type: "opaque" url: "" [[Prototype]]: Response 戻り値:

該当のソースコード

GASのコード

gs

function doGet(e) { let json = { 'text': 'aaaa' } let res = JSON.stringify(json) return ContentService.createTextOutput(res).setMimeType(ContentService.MimeType.TEXT) }

HTMLのコード

html

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> </body> <script> let url = 'https://script.google.com/macros/s/****/exec'; let option = { 'mode': 'no-cors' , 'method': 'GET' , 'Content-Type': 'text/plain' }; let text = ''; fetch(url, option) .then( function(res) { console.log(res); return res.text(); } ).then( function(json) { text = json; console.log("戻り値:" + json); } ).catch(function(exception) { console.log(exception); }); </script> </html>

試したこと

GASのデプロイ設定を下記のようにすると問題ないことは確認できました。

・次のユーザーとして実行
自分

・アクセスできるユーザ
全員

HTMLに記載のoption変数を下記に変更

js

let option = { 'method': 'GET' , 'Content-Type': 'text/plain' };

chromeのコンソール

Response {type: 'cors', url: 'https://script.googleusercontent.com/macros/echo?u…mZixddpbUVg&lib=Mv9wYkUhvGHhGDLT7HCgnKd1sAI6oo1Au', redirected: true, status: 200, ok: true, …} body: (...) bodyUsed: true headers: Headers {} ok: true redirected: true status: 200 statusText: "" type: "cors" url: "https://script.googleusercontent.com/macros/echo?user_content_key=t6AwjjspV1kU-_1qlO63Z70XrFMres0fI6ZSpURhXch6TbNOgrYKmA3bFlVl5B6MYfaE8wqe2DRC_OgKWl0SejQeQtPVB4Pgm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnPBIAyb9Xw1qqs9Rjqalb0gct2gCt1kEk1G9y721k1e5r_xTxoPnJWNKJQ7J6HlSX7MjKYTMKDczKxY3e265L2RmZixddpbUVg&lib=Mv9wYkUhvGHhGDLT7HCgnKd1sAI6oo1Au" [[Prototype]]: Response 戻り値:{"text":"aaaa"}

しかし、この設定だと
Urlを知っていると誰でも実行可能で危険
なのでこの設定は避けたいです。

画像

credentials: 'include'credentials: 'same-origin'credentials: 'omit'
イメージ説明イメージ説明イメージ説明

ScriptApp.getOAuthToken() で値を取得し
HTMLファイルに反映させましたが、結果は変わらずでした。

ScriptApp.getOAuthToken()の値を取得し、設定した方法

  1. ダミー関数をGASのエディタから実行して、コンソールに表示された値をコピー
  2. 1 でコピーした値をHTMLファイルの oAuthToken の値にセット

gs

// ダミー関数 function myFunction() { console.log(ScriptApp.getOAuthToken()) }

GASでのスコープ設定

json

"oauthScopes": [ "https://www.googleapis.com/auth/script.external_request", "https://www.googleapis.com/auth/userinfo.email", "https://www.googleapis.com/auth/drive.file", "https://www.googleapis.com/auth/drive", "https://www.googleapis.com/auth/drive.apps.readonly", "https://www.googleapis.com/auth/drive.readonly", "https://www.googleapis.com/auth/drive.appfolder", "https://www.googleapis.com/auth/drive.scripts" ]

html

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> </body> <script> let url = 'https://script.google.com/macros/s/***/exec'; let oAuthToken = 'ya29.A0ARrdaM-b4Qkdt970ib90xUfoXIsCqkJYZWyg1KnJw04kIBlFvSZ1QwaP-u_ed5BbIamgpT6p-MWqYPoY5RtMWvXXt06DqmeIE6C2cromOec2WSlY4wQanAvAhLpoGAoZKf80377UACfIuoAGLqV8ks8X-MVpnKn5DO7icpB6KxSfhDI'; let option = { 'mode': 'no-cors' , 'method': 'GET' , 'Content-Type': 'text/plain' , 'headers': { "Authorization": "Bearer " + oAuthToken } }; let text = ''; fetch(url, option) .then( function(res) { console.log(res); return res.text(); } ).then( function(json) { text = json; console.log("戻り値:" + json); } ).catch(function(exception) { console.log(exception); }); </script> </html>

画像の説明をここに入力

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。