liff

last update: 2020/12/19

Search :

: 0 results

document

https://developers.line.biz/ja/docs/liff/overview/

reference

https://developers.line.biz/ja/reference/liff/

console

https://developers.line.biz/console/

exsample

https://liff.line.me/1654048591-MrAreDpR

---

<!doctype html>
<title>title</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, viewport-fit=cover">
<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>

<style>
#getProfileImage img {
  width: 44px;
  height: 44px;
}
</style>

<div id="getOS"></div>
<div id="getLanguage"></div>
<div id="getVersion"></div>
<div id="isInClient"></div>
<div id="isLoggedIn"></div>
<div><button id="shareTargetPicker"></button></div>
<div><button id="login"></button></div>
<div id="getAccessToken"></div>
<div id="getContext"></div>
<div id="getProfile"></div>
<div id="getProfileImage"></div>
<div><button id="openWindowExternal">openWindowExternal</button></div>
<div><button id="openWindowInternal">openWindowInternal</button></div>
<div><button id="closeWindow">closeWindow</button></div>

<script>
const d = document;

const successCallback = () => {
  d.querySelector('#getOS').innerText = liff.getOS();
  d.querySelector('#getLanguage').innerText = liff.getLanguage();
  d.querySelector('#getVersion').innerText = liff.getVersion();
  const isInClient = liff.isInClient();
  const isLogin = liff.isLoggedIn();
  const shareButton = d.querySelector('#shareTargetPicker');
  if (isLogin) {
    shareButton.innerText = `send talk 'test'`;
    shareButton.addEventListener('click', () => {
      if (liff.isApiAvailable('shareTargetPicker')) {
        liff.shareTargetPicker([
          {
            type: "text",
            text: "test",
          },
        ])
        .then(
          alert("ShareTargetPicker was launched")
        ).catch((res) => {
          alert("Failed to launch ShareTargetPicker")
        });
      }
    });
  } else {
    shareButton.parentNode.removeChild(shareButton);
  }
  const login = d.querySelector('#login');
  const url = 'https://3300.me/sample/liff/sample.html';
  if (isLogin) {
    if (isInClient) {
      login.parentNode.removeChild(login);
    } else {
      login.innerText = 'logout';
      login.addEventListener('click', () => {
        liff.logout();
        location.href = url;
      });
    }
  } else {
    login.innerText = 'login';
    login.addEventListener('click', () => {
      liff.login({ redirectUri: url });
    });
  }
  d.querySelector('#getAccessToken').innerText = liff.getAccessToken();
  if (isLogin) {
    d.querySelector('#getContext').innerText = `${liff.getContext().type}
      ${liff.getContext().utouId}
      ${liff.getContext().userId}
      ${liff.getContext().viewType}
      ${liff.getContext().accessTokenHash}`;
  }
  if (isLogin) {
    liff.getProfile()
      .then(profile => {
        d.querySelector('#getProfile').innerText = `${profile.userId}
          ${profile.pictureUrl}
          ${profile.displayName}
          ${profile.statusMessage}`;
        const img = d.createElement('img');
        img.setAttribute('src', profile.pictureUrl);
        d.querySelector('#getProfileImage').appendChild(img);
      })
      .catch((err) => {
        console.log('error', err);
      });
  }
  d.querySelector('#openWindowExternal').addEventListener('click', () => {
    liff.openWindow({
      url: "https://line.me",
      external: true,
    });
  });
  d.querySelector('#openWindowInternal').addEventListener('click', () => {
    liff.openWindow({
      url: "https://line.me",
      external: false, 
    });
  });
  const closeButton = d.querySelector('#closeWindow');
  if (isInClient) {
    closeButton.addEventListener('click', () => {
      liff.closeWindow();
    });
  } else {
      closeButton.parentNode.removeChild(closeButton);
  }
}

const errorCallback = (err) => {
  alert(err.message);
}

liff.init({
  liffId: "1654048591-MrAreDpR"
},
successCallback,
errorCallback,
);
</script>

code_popup

---

sample02
https://liff.line.me/1654048591-pm0OJEPq