【LIFF v2】ユーザーIDを取得【LINE】| AWSやシステム・アプリ開発

今回はLIFFアプリで主にバックグラウンドで使うことになる機能を紹介します。

ユーザーを一意に特定する"userId"等、アプリを作る上でかなり重要になる情報を取得できます。

"liffId"は各自の物を用意してください。

"LIFF URL"の"line://app/"の後ろの部分が"liffId"になります。

環境やトークルームの情報を取得

<!DOCTYPE html>
<html lang="jp" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XP LIFF</title>
    <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", () => {
      liff
        .init({
          liffId: '<LIFF_ID>'
        })
        .then(() => {
          document.getElementById('go').addEventListener('click', () => {
            document.getElementById('log').value =
              '○言語設定\n' +
              'liff.getLanguage()=' + liff.getLanguage() + '\n' +
              '○LIFF SDKのバージョン\n' +
              'liff.getVersion()=' + liff.getVersion() + '\n' +
              '○LINE内ブラウザで動作させているかどうか\n' +
              'liff.isInClient()=' + liff.isInClient() + '\n' +
              '○ログインしているかどうか\n' +
              'liff.isLoggedIn()=' + liff.isLoggedIn() + '\n' +
              '○OS\n' +
              'liff.getOS()=' + liff.getOS() + '\n' +
              '○アクセストークン\n' +
              'liff.getAccessToken()=' + liff.getAccessToken() + '\n' +
              '○画面（1対1のチャット、グループ、またはトークルーム）を一意に識別する値\n' +
              'liff.getContext()=' + JSON.stringify(liff.getContext()) + '\n' +
              '○ユーザー名等\n' +
              'liff.getDecodedIDToken()=' + JSON.stringify(liff.getDecodedIDToken()) + '\n';
          });
        })
        .catch((err) => {
          document.getElementById('log').value = 'init ng\n' + err;
        });
    });
    </script>
  </head>
  <body>
    <div>
      <h3>環境やトークルームの情報を取得</h3>
      <input type="button" id="go" value="環境やトークルームの情報を取得"/>
      <textarea id="log" style="width:96%;height:350px;"></textarea>
    </div>
  </body>
</html>

イメージ

ボタンを押すと情報が表示されます。

動画はマスク処理をしてあるのでデータの内容は参考程度にしておいてください。

URLを開く

<!DOCTYPE html>
<html lang="jp" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XP LIFF</title>
    <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", () => {
      liff
        .init({
          liffId: '<LIFF_ID>'
        })
        .then(() => {
          document.getElementById('go').addEventListener('click', () => {
            liff.openWindow({
              url: document.getElementById('openWindowUrl').value,
              external: document.getElementById('openWindowExternal').checked
            });
          });
        })
        .catch((err) => {
          document.getElementById('log').value = 'init ng\n' + err;
        });
    });
    </script>
  </head>
  <body>
    <div>
      <h3>URLを開く</h3>
      <div>url<input type="text" id="openWindowUrl" value="https://www.google.co.jp"/></div>
      <div>external<input type="checkbox" id="openWindowExternal"/>ON：外部ブラウザで開きます。OFF：LINE内ブラウザで開きます。</div>
      <input type="button" id="go" value="実行"/>
      <textarea id="log" style="width:96%;height:120px;"></textarea>
    </div>
  </body>
</html>

URLを開く

プロフィールを取得する

<!DOCTYPE html>
<html lang=&quot;jp&quot; dir=&quot;ltr&quot;>
  <head>
    <meta charset=&quot;utf-8&quot;>
    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>
    <title>XP LIFF</title>
    <script src=&quot;https://static.line-scdn.net/liff/edge/2.1/sdk.js&quot;></script>
    <script type=&quot;text/javascript&quot;>
    document.addEventListener(&quot;DOMContentLoaded&quot;, () => {
      liff
        .init({
          liffId: '<LIFF_ID>'
        })
        .then(() => {
          document.getElementById('go').addEventListener('click', () => {
            liff.getProfile().then(function(profile) {
              document.getElementById('log').value += 'liff.getProfile()=' + JSON.stringify(profile) + '\n';
            }).catch(function(error) {
              document.getElementById('log').value += 'getProfile ng\n';
            });
          });
        })
        .catch((err) => {
          document.getElementById('log').value = 'init ng\n' + err;
        });
    });
    </script>
  </head>
  <body>
    <div>
      <h3>プロフィールを取得する</h3>
      <input type=&quot;button&quot; id=&quot;go&quot; value=&quot;実行&quot;/>
      <textarea id=&quot;log&quot; style=&quot;width:96%;height:100px;&quot;></textarea>
    </div>
  </body>
</html>

プロフィールを取得する

ユーザーを一意に特定できる"userId"から名前"displayName"までかなり重要な情報が取得できます。

LIFFのリンクを踏ませるだけでID、名前、アイコンが取得できるので、なかなか危険なAPIです。

LINE公式アカウントの友だち関係を取得する

<!DOCTYPE html>
<html lang="jp" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XP LIFF</title>
    <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", () => {
      liff
        .init({
          liffId: '<LIFF_ID>'
        })
        .then(() => {
          document.getElementById('go').addEventListener('click', () => {
            liff.getFriendship().then(function(data) {
              document.getElementById('log').value += 'liff.getFriendship()=' + JSON.stringify(data) + '\n';
            }).catch(function(error) {
              document.getElementById('log').value += 'getFriendship ng\n';
            });
          });
        })
        .catch((err) => {
          document.getElementById('log').value = 'init ng\n' + err;
        });
    });
    </script>
  </head>
  <body>
    <div>
      <h3>LINE公式アカウントの友だち関係を取得する</h3>
      <input type="button" id="go" value="実行"/>
      <textarea id="log" style="width:96%;height:100px;"></textarea>
    </div>
  </body>
</html>