liff-starter.js
/**
 * Register event handlers for the buttons displayed in the app
 */
Register event handlers for the buttons displayed in the app
Register event handlers for the buttons displayed in the app
function registerButtonHandlers() {
  document
    .getElementById("openWindowButton")
    .addEventListener("click", function() {
      liff.openWindow({
        url: "https://line.me",
        external: true
      });
    });
  document
    .getElementById("closeWindowButton")
    .addEventListener("click", function() {
      if (!liff.isInClient()) {
        sendAlertIfNotInClient();
      } else {
        liff.closeWindow();
      }
    });
  document
    .getElementById("sendMessageButton")
    .addEventListener("click", function() {
      if (!liff.isInClient()) {
        sendAlertIfNotInClient();
      } else {
        liff
          .sendMessages([
            {
              type: "text",
              text: "You've successfully sent a message! Hooray!"
            }
          ])
          .then(function() {
            window.alert("Message sent");
          })
          .catch(function(error) {
            window.alert("Error sending message: " + error);
          });
      }
    });
  document
    .getElementById("scanQrCodeButton")
    .addEventListener("click", function() {
      if (!liff.isInClient()) {
        sendAlertIfNotInClient();
      } else {
        liff
          .scanCode()
          .then(result => {
            const stringifiedResult = JSON.stringify(result);
            document.getElementById(
              "scanQrField"
            ).textContent = stringifiedResult;
            toggleQrCodeReader();
          })
          .catch(err => {
            document.getElementById("scanQrField").textContent =
              "scanCode failed!";
          });
      }
    });
  document
    .getElementById("getAccessToken")
    .addEventListener("click", function() {
      if (!liff.isLoggedIn() && !liff.isInClient()) {
        alert(
          'To get an access token, you need to be logged in. Please tap the "login" button below and try again.'
        );
      } else {
        const accessToken = liff.getAccessToken();
        document.getElementById("accessTokenField").textContent = accessToken;
        toggleAccessToken();
      }
    });
  document
    .getElementById("getProfileButton")
    .addEventListener("click", function() {
      liff
        .getProfile()
        .then(function(profile) {
          document.getElementById("userIdProfileField").textContent =
            profile.userId;
          document.getElementById("displayNameField").textContent =
            profile.displayName;
          const profilePictureDiv = document.getElementById(
            "profilePictureDiv"
          );
          if (profilePictureDiv.firstElementChild) {
            profilePictureDiv.removeChild(profilePictureDiv.firstElementChild);
          }
          const img = document.createElement("img");
          img.src = profile.pictureUrl;
          img.alt = "Profile Picture";
          profilePictureDiv.appendChild(img);
          document.getElementById("statusMessageField").textContent =
            profile.statusMessage;
          toggleProfileData();
        })
        .catch(function(error) {
          window.alert("Error getting profile: " + error);
        });
    });
  document
    .getElementById("liffLoginButton")
    .addEventListener("click", function() {
      if (!liff.isLoggedIn()) {
        liff.login();
      }
    });
  document
    .getElementById("liffLogoutButton")
    .addEventListener("click", function() {
      if (liff.isLoggedIn()) {
        liff.logout();
        window.location.reload();
      }
    });
}
function registerButtonHandlers ( ) { document . getElementById ( "openWindowButton" ) . addEventListener ( "click" , function ( ) { liff . openWindow ( { url : "https://line.me" , external : true } ) ; } ) ; document . getElementById ( "closeWindowButton" ) . addEventListener ( "click" , function ( ) { if ( ! liff . isInClient ( ) ) { sendAlertIfNotInClient ( ) ; } else { liff . closeWindow ( ) ; } } ) ; document . getElementById ( "sendMessageButton" ) . addEventListener ( "click" , function ( ) { if ( ! liff . isInClient ( ) ) { sendAlertIfNotInClient ( ) ; } else { liff . sendMessages ( [ { type : "text" , text : "You've successfully sent a message! Hooray!" } ] ) . then ( function ( ) { window . alert ( "Message sent" ) ; } ) . catch ( function ( error ) { window . alert ( "Error sending message: " + error ) ; } ) ; } } ) ; document . getElementById ( "scanQrCodeButton" ) . addEventListener ( "click" , function ( ) { if ( ! liff . isInClient ( ) ) { sendAlertIfNotInClient ( ) ; } else { liff . scanCode ( ) . then ( result => { const stringifiedResult = JSON . stringify ( result ) ; document . getElementById ( "scanQrField" ) . textContent = stringifiedResult ; toggleQrCodeReader ( ) ; } ) . catch ( err => { document . getElementById ( "scanQrField" ) . textContent = "scanCode failed!" ; } ) ; } } ) ; document . getElementById ( "getAccessToken" ) . addEventListener ( "click" , function ( ) { if ( ! liff . isLoggedIn ( ) && ! liff . isInClient ( ) ) { alert ( 'To get an access token, you need to be logged in. Please tap the "login" button below and try again.' ) ; } else { const accessToken = liff . getAccessToken ( ) ; document . getElementById ( "accessTokenField" ) . textContent = accessToken ; toggleAccessToken ( ) ; } } ) ; document . getElementById ( "getProfileButton" ) . addEventListener ( "click" , function ( ) { liff . getProfile ( ) . then ( function ( profile ) { document . getElementById ( "userIdProfileField" ) . textContent = profile . userId ; document . getElementById ( "displayNameField" ) . textContent = profile . displayName ; const profilePictureDiv = document . getElementById ( "profilePictureDiv" ) ; if ( profilePictureDiv . firstElementChild ) { profilePictureDiv . removeChild ( profilePictureDiv . firstElementChild ) ; } const img = document . createElement ( "img" ) ; img . src = profile . pictureUrl ; img . alt = "Profile Picture" ; profilePictureDiv . appendChild ( img ) ; document . getElementById ( "statusMessageField" ) . textContent = profile . statusMessage ; toggleProfileData ( ) ; } ) . catch ( function ( error ) { window . alert ( "Error getting profile: " + error ) ; } ) ; } ) ; document . getElementById ( "liffLoginButton" ) . addEventListener ( "click" , function ( ) { if ( ! liff . isLoggedIn ( ) ) { liff . login ( ) ; } } ) ; document . getElementById ( "liffLogoutButton" ) . addEventListener ( "click" , function ( ) { if ( liff . isLoggedIn ( ) ) { liff . logout ( ) ; window . location . reload ( ) ; } } ) ; }
Register event handlers for the buttons displayed in the app
Register event handlers for the buttons displayed in the app
// openWindow call // closeWindow call // sendMessages call // scanCode call // e.g. result = { value: "Hello LIFF app!" } // get access token // get profile call // login call, only when external browser is used // set `redirectUri` to redirect the user to a URL other than the front page of your LIFF app. // logout call only when external browse