LINEのLIFF上で、GASを用いてLINEのユーザーIDを取得して表示させたい

実現したいこと

最終的にしたいこと

最終的には、LINEアプリ内で、LINE公式アカウントからLINE内部ブラウザでWEBアプリを開いて、名前を入力させて、今後再度LINEアクセスしたアプリ内からアクセスした際には同一ユーザーであれば既に回答済みですと表示したいです。

今回実現したいこと

今回はその前段階で、WEBアプリを開いたときにLINEのユーザーIDを取得して表示だけをするWEBアプリを作成したいです。

発生している問題・分からないこと

GASのコードとhtmlは作成して、実際に端末に表示はされるのですが、LINEのユーザー情報の取得がうまくできない状況です。
なぜ取得できないのかがわからず教えていただきたいです。

該当のソースコード

gas
1function doGet(e) {
2  // HTMLテンプレートを読み込む
3  return HtmlService.createTemplateFromFile('index.html')
4      .evaluate()
5      // HTML の head 内に GAS のウェブアプリ URL を埋め込む
6      .addMetaTag('gas-web-app-url', ScriptApp.getService().getUrl());
7}
8
9function doPost(e) {
10  // LIFFアプリから送信されたIDトークンを取得
11  const idToken = e.parameter.id_token;
12  const channelId = 'YOUR_LINE_LOGIN_CHANNEL_ID'; // 正しい LINE ログインチャネルのチャネル ID に置き換えてください
13
14  // IDトークンを検証し、ユーザーIDを取得
15  const userId = verifyIdToken(idToken, channelId);
16
17  // ユーザーIDをJSON形式で返す
18  return ContentService.createTextOutput(JSON.stringify({ userId: userId }))
19      .setMimeType(ContentService.MimeType.JSON);
20}
21
22function verifyIdToken(idToken, channelId) {
23  // LINEのAPIを使用してIDトークンを検証
24  const url = 'https://api.line.me/oauth2/v2.1/verify';
25  const options = {
26    'method': 'post',
27    'payload': {
28      'id_token': idToken,
29      'client_id': channelId
30    }
31  };
32
33  try {
34    const response = UrlFetchApp.fetch(url, options);
35    const verifiedData = JSON.parse(response.getContentText());
36
37 
38    // 検証結果からユーザーIDを返す
39    return verifiedData.sub;
40  } catch (error) {
41  }
42}

html
1<!DOCTYPE html>
2<html>
3<head>
4  <title>LIFF ユーザーID表示</title>
5  <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
6  <script>
7    window.onload = function() {
8      const liffId = 'YOUR_LIFF_ID'; // 正しい LIFF ID に置き換えてください
9
10      // GAS のウェブアプリ URL を meta タグから取得
11      const gasWebAppUrl = document.querySelector('meta[name="gas-web-app-url"]').content; 
12
13      liff.init({ liffId: liffId })
14        .then(() => {
15          console.log('LIFF SDK initialized');
16          if (liff.isLoggedIn()) {
17            getUserId(gasWebAppUrl); // GAS のウェブアプリ URL を渡す
18          } else {
19            liff.login();
20          }
21        })
22        .catch((err) => {
23          console.error('LIFF SDK initialization failed:', err);
24        });
25    };
26
27    function getUserId(gasWebAppUrl) { // GAS のウェブアプリ URL を受け取る
28      const idToken = liff.getIDToken();
29
30      // IDトークンをGASに送信
31      fetch(gasWebAppUrl, { // 取得した GAS のウェブアプリ URL を使用する
32        method: 'POST',
33        headers: {
34          'Content-Type': 'application/x-www-form-urlencoded'
35        },
36        body: 'id_token=' + idToken
37      })
38      .then(response => response.json())
39      .then(data => {
40        // GASから返されたユーザーIDを表示
41        document.getElementById('userId').textContent = data.userId;
42      })
43      .catch((err) => {
44        console.error('Error fetching user ID:', err);
45      });
46    }
47  </script>
48</head>
49<body>
50  <h1>あなたのLINEユーザーID</h1>
51  <p id="userId"></p>
52</body>
53</html>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

同様のことをしようとしている方がいましたが、この方も同じくユーザー情報の取得に失敗していたようです。
https://makimakimakino.hatenablog.com/entry/2019/04/20/125203

補足

特になし

行動規範の内容に同意します

回答1件

ベストアンサー

GAS側のセキュリティがガチガチな関係で、GASでデプロイしたindex.htmlに対しては、LIFFの認証は通りません。
index.htmlの部分は、VercelかFirebase等の融通の利く外部ホスティングサービスにデプロイするようにしてください。やり方は自分で調べてください。
参考：https://qiita.com/njn0te/items/b35a6eb6fa88372b4dc0

投稿2024/08/31 07:55