React에서 LIFF (LINE Front-end Framework) v2 사용하기

react-liff 라는 npm package 를 만들어 보았으므로, 그 사용법의 소개입니다.
데모 앱은 여기에 게시되었습니다.

2020/07/10 추가

LIFF SDK가 (시험적으로) npm package로 공개되었습니다.
https://developers.line.biz/ko/docs/liff/release-notes/#liff-sdk%E3%82%92npm%E3%83%91%E3%83%83%E3%82%B1%E3 %83%BC%E3%82%B8%E3%81%A8%E3%81%97%E3%81%A6%E5%85%AC%E9%96%8B%E3%81%97%E3%81 %BE%E3%81%97%E3%81%9F

이에 따라 node_modules의 LIFF SDK 읽기에 해당하는 react-liff 버전 0.5.0을 출시했습니다.
사용법은 여기을 참조하십시오.

2020/06/15 추가

버전 0.4.0을 출시했습니다. 로그인 상태를 useState()에서 관리 할 수 ​​있으므로,
한층 더 편리함이 좋아졌다고 생각합니다.
샘플을 새로운 API를 사용한 것으로 바꿨습니다.

사용법

CRA로 React SPA 개발 환경 만들기

npx create-react-app react-liff-sample

react-liff를 종속성에 추가

cd react-liff-sample
yarn add react-liff

public/index.html에서 LIFF SDK 로드

     <title>React App</title>
+    <script defer charset="utf-8" src="https://static.line-scdn.net/liff/edge/versions/2.1.13/sdk.js">
   </head>

src/index.js에 LiffProvider 추가

 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';

+import { LiffProvider } from 'react-liff';
+
+const liffId = process.env.LINE_LIFF_ID ?? '';
+const stubEnabled = process.env.NODE_ENV !== 'production';
+
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <LiffProvider liffId={liffId} stubEnabled={stubEnabled}>
+      <App />
+    </LiffProvider>
   </React.StrictMode>,
   document.getElementById('root')
 );

src/App.js에 useLiff 추가

-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import logo from './logo.svg';
 import './App.css';

+import { useLiff } from 'react-liff';
+
 function App() {
+  const [displayName, setDisplayName] = useState('');
+  const { error, liff, loggedIn, ready } = useLiff();
+
+  useEffect(() => {
+    if (!loggedIn) return;
+
+    (async () => {
+      const profile = await liff.getProfile();
+      setDisplayName(profile.displayName);
+    })();
+  }, [liff, loggedIn]);
+
+  const showDisplayName = () => {
+    if (error) return <p>Something is wrong.</p>;
+    if (!ready) return <p>Loading...</p>;
+
+    if (!loggedIn) {
+      return <button className="App-button" onClick={liff.login}>Login</button>;
+    }
+    return (
+      <>
+        <p>Welcome to the react-liff demo app, {displayName}!</p>
+        <button className="App-button" onClick={liff.logout}>Logout</button>
+      </>
+    );
+  }
+
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
+        {showDisplayName()}
         <a
           className="App-link"
           href="https://reactjs.org"

LIFF 앱을 채널에 추가

실제로 움직여 보려면 LIFF ID가 필요하기 때문에,
LIFF 앱을 채널에 추가
참고로 LIFF 앱 추가

배포

HTTPS 사용 가능하고 게시된 서버라면 어디서나 좋습니다.
Firebase Hosting, GitHub Pages, AWS S3 근처가 쉽고 좋다고 생각합니다.
GitHub Pages에 배포하는 경우 htps : // 기주 b. 코 m / 페 아세이리 s / 아 c 치온 s gh 퍼게 s을 사용하면 유용합니다.

동작 확인

LINE에서 배포한 페이지에 액세스하면 자동 로그인 후 LINE 표시 이름이 표시됩니다.
(이하의 캡쳐는 로컬 환경에서 실행했을 때의 것이므로, stub 의 반환값이 표시되고 있습니다.)

마지막으로

npm package를 게시한 후 이런 트윗을 찾았습니다. .

LIFF를 React + TypeScript로 개발하기 위한 공식 npm 모듈이 나오는 것 같다. (From LINE Dev Day) #LINE_API #serverless #AWS #LINE_API_XTECH — 아키 @ 푸파오 (@maccostar) February 6, 2020

빨리 공개되면 좋네요! ;_;

이상

참고

• htps : //에서 ゔぇぺぺrs. 네. · · · / cs / ぃ f /
• htps : //에서 ゔぇぺぺrs. 네. 비 · 자 / 레후 렌세 / ぃ f /