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

前提

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()の値を取得し、設定した方法

ダミー関数をGASのエディタから実行して、コンソールに表示された値をコピー
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>