입문

이 보도는 본사Advent Calender 2019의 첫날 보도입니다.올해 Advent Calender의 깃발 흔드는 역할은 저, @ufoo68가 맡았습니다!
가끔은 본사에 맞는 글도 써보고 싶은데 전에 참가한 LINE DEVELOPER DAY 에 LIFFV2 관련 기사를 써보고 싶어서 LINE 기사를 또 썼어요.

LIFF v2의 새로운 기능

새로운 기능에 대한 상세한 자료는 공식적 있으니, 주로 저쪽을 보십시오.새로운 기능으로 다음과 같은 내용을 소개했다.

scanQR

QR 인코더

login/logout

사용 가능isLoggedin 로그인 상태

shareTargetPicker

특정 사용자에게 메시지를 보내는 기능

이후 자세한 설명은 없었지만 이런 것도 추가된 것 같다.

getFriendship

getDecodedIDToken

getLanguage

isInClient

그럼에도 불구하고 아직 공개되지 않은 API도 있고 용도가 불분명한 것도 있다.이번에 우리는 굵은 글씨로 쓴login과 QR코드를 시도했다.네.
이 API는 생각보다 간단하기 때문에 이후 내용의 음량이 상당히 적어진다...

설치를 시도해 보았다

시도해 본 일은 다음과 같다.

로그인 버튼 만들기

QR 스캔은 LINE 로그인 시에만 시작됩니다

React에서 환경 구축에 대한 자세한 내용은 API에 대한 자세한 내용 을 참조하십시오.
실현된 코드는 다음과 같다.
App.tsx

import React, { FC, useState, useEffect } from 'react';
import Button from '@material-ui/core/Button';
import './App.scss';

const liff = window.liff

const App: FC = () => {
  const [value, setValue] = useState<string>('')
  const [isLogin, setIsLogin] = useState<boolean>(false)

  useEffect(() => {
    liff.init({ liffId: process.env.REACT_APP_LIFF_ID as string }).then(() => {
      setIsLogin(liff.isLoggedIn())
    })
  }, [])

  const login = () => {
    liff.init({ liffId: process.env.REACT_APP_LIFF_ID as string }).then(() => {
      liff.login()
      setIsLogin(liff.isLoggedIn())
    })
  }

  const openQR = () => {
    liff.init({ liffId: process.env.REACT_APP_LIFF_ID as string }).then(() => {
      try {
        liff.scanCode()
          .then(result => setValue(result.value!))
          .catch(() => alert('cannot read QR'))
      } catch {
        alert('cannot open QR camera')
      }
    })
  }

  return (
    <div className="App">
      <div className="qrValue">{value}</div>
      <div className="loginButton">
        <Button variant="contained" color="primary" onClick={() => login()} disabled={isLogin}>
          Login
        </Button>
      </div>
      <div className="qrButton">
        <Button variant="contained" color="secondary" onClick={() => openQR()} disabled={!isLogin}>
          Open QR camera
      </Button>
      </div>
    </div>
  );
}

export default App;

소스 코드는 과거 보도 에서 공개됩니다.

결과

너무 실패했어.설치는 괜찮지만 LIFF URL(line://app시작 URL)은 원래 처음부터 로그인한 상태이기 때문에 로그인 버튼은 의미가 없습니다.
또한 이 LIFF V2에서 외부 브라우저에서 LIFF 응용 프로그램을 열 수 있지만 이 QR코드 스캔과 같은 특수 API는 사용할 수 없을 것 같아서 LINE 로그인은 기능을 발휘하더라도 QR카메라를 시작하지 않습니다.
참고로 URL은 다음과 같습니다. LINE이 있는 사람은 LINE 응용 프로그램을 사용할 수 있고, 없는 사람은 적당한 브라우저를 사용할 수 있습니다.

https://liff.line.me/{liffid}

이것{liffid}에 line://app/ 아래에 적힌 것을 넣으세요.
그 다음에 결과를 읽습니다. 아래의 QR을 보십시오. ("test"라고 적힌string)
여기
이렇게 결과가 표시됩니다.

대체로 잘 읽었다.그러나 이 scanQR은 liff-type의 정의가 잘못되어 스스로 수정했습니다.일단 작가님께 PR을 보냈지만 아직 반영되지 않았다면 이쪽yarn add에서 해 보세요.← 이(가) 병합된 것 같습니다.

yarn add -D https://github.com/ufoo68/liff-type.git

마지막

사실 이 LIFF는 앞으로 LINE 로그인 채널만 지원하고, Messaging API에서는 지원하지 않을 생각입니다.에는'앞으로 Messaging API에 LIFF를 추가하지 마세요'라는 말이 적혀 있다.
이에 대해 앞서 LINE DEVELOPER DAY에서도 논의했지만 앞으로는 LIFF를 LINE bot의 하위 응용 프로그램의 입장에서 LINE 로그인 기능 등을 지원하는 인터넷 응용 프로그램으로 독립시키려는 것 같다(억측일 수도 있다).
한편 이번에는 여기라는 비공식적인 npm 패키지로 개발됐으며, 라인 공식에서도 LIFF의 Type용 npm 패키지를 공개할 예정이다.앞으로도 TypeScript 개발을 공식 지원할 예정이라 기대가 큽니다.
하지만 완전히 ACCESS와 무관한 LINE API의 기사가 됐지만 이 Advent Calender의 기사 투고 문턱을 낮추는 의미에서 깃발을 휘두르는 역할을 하지 않았나 생각합니다.
그래서 첫날 투고는 이렇게 끝내고 싶어요.다음은 liff-type 선생의 투고입니다.기대해주세요!