Merge pull request #39 from line/add-apis

Provide a UI where the API for the MINI can be tried out

Author: kazuma0129

.env

@@ -1,4 +1,3 @@
-VITE_LIFF_ID=1656508316-k7jNojXm
-
-# TODO
-VITE_LIFF_ID_MINI=
+VITE_LIFF_ID=2006142821-boxjqY7m
+VITE_LIFF_ID_MINI=2006593963-DPoAqdzG
+VITE_LIFF_ID_MINI_PREVIEW=2006593962-KMmZJVxl

package.json

@@ -15,7 +15,8 @@
     "lint": "eslint \"src/**/*.{ts,tsx}\""
   },
   "dependencies": {
-    "@line/liff": "2.23.1",
+    "@line/liff": "2.25.1",
+    "@line/liff-common-profile-plugin": "0.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

src/App.tsx

@@ -7,12 +7,14 @@ import Input from './components/Input'
 import { FilterContext, FilterType } from './Context'
 import qrCode from './qr-code.png'
 import { SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST } from './constants'
+import { FilterTypes } from './FilterTypes'
 
 type Props = {
-  filter: FilterType;
-};
+  appUrl: string
+  filter: FilterType
+}
 
-function App({ filter }: Props) {
+function App({ appUrl, filter }: Props) {
   let isLoggedIn = false
   try {
     isLoggedIn = liff.isLoggedIn()
@@ -24,10 +26,7 @@ function App({ filter }: Props) {
       <Header />
       <div className={styles.container}>
         <div className={styles.liffIdBox}>
-          <Input
-            readonly
-            value={`LIFF URL: https://liff.line.me/${import.meta.env.VITE_LIFF_ID.toString()}`}
-          />
+          <Input readonly value={`URL: ${appUrl}`} />
           <img src={qrCode} className={styles.qrCode} />
         </div>
         <h1>Client APIs</h1>
@@ -292,22 +291,70 @@ function App({ filter }: Props) {
             return await liff.permanentLink.createUrlBy(url)
           }}
         />
-        <Snippet
-          apiName="liff.i18n.setLang"
-          version="2.21.0"
-          docUrl="https://developers.line.biz/ja/reference/liff/#i18n-set-lang"
-          needRequestPayload={true}
-          skipAutoRun={true}
-          hideResponse={true}
-          defaultRequestPayload={'en'}
-          runner={async (lang) => {
-            return await liff.i18n.setLang(lang)
-          }}
-        />
+        {(filter === FilterTypes.MINI ||
+          filter === FilterTypes.MINI_PREVIEW) && (
+          <>
+            <Snippet
+              apiName="liff.createShortcutOnHomeScreen"
+              version="2.23.0"
+              docUrl="https://developers.line.biz/en/reference/liff/#create-shortcut-on-home-screen"
+              needRequestPayload={true}
+              defaultRequestPayload={JSON.stringify(
+                {
+                  url: appUrl,
+                },
+                null,
+                4
+              )}
+              runner={async (payload) => {
+                const parsed = JSON.parse(payload)
+                await liff.createShortcutOnHomeScreen(parsed);
+              }}
+              skipAutoRun={true}
+              isInLIFF={false}
+            />
+            <Snippet
+              apiName="liff.$commonProfile.getDummy"
+              version="2.19.0"
+              docUrl="https://developers.line.biz/en/docs/partner-docs/quick-fill/overview/"
+              needRequestPayload={true}
+              defaultRequestPayload={JSON.stringify(
+                [
+                  [
+                    'family-name',
+                    'given-name',
+                    'family-name-kana',
+                    'given-name-kana',
+                    'sex-enum',
+                    'bday-year',
+                    'bday-month',
+                    'bday-day',
+                    'tel',
+                    'email',
+                    'postal-code',
+                    'address-level1',
+                    'address-level2',
+                    'address-level3',
+                    'address-level4',
+                  ],
+                  1,
+                ],
+                null,
+                4
+              )}
+              runner={async (p) => {
+                const payload = JSON.parse(p)
+                return await liff.$commonProfile.getDummy(...payload)
+              }}
+              inClientOnly={true}
+              skipAutoRun={true}
+              isInLIFF={false}
+            />
+          </>
+        )}
       </div>
     </FilterContext.Provider>
   )
 }
 
-
 export default App

src/FilterTypes.ts

@@ -1,4 +1,5 @@
 export const FilterTypes = {
   LIFF: 'LIFF',
-  MINI: 'MINI'
+  MINI: 'MINI',
+  MINI_PREVIEW: 'MINI_PREVIEW'
 } as const

src/main.tsx

@@ -1,20 +1,45 @@
 import liff from '@line/liff'
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { LiffCommonProfilePlugin } from '@line/liff-common-profile-plugin'
 import './main.css'
 import App from './App'
 import { FilterTypes } from './FilterTypes'
 
 const isMINI = new URLSearchParams(location.search).has('mini')
-const filter = isMINI ? FilterTypes.MINI : FilterTypes.LIFF
-const liffId = isMINI ? import.meta.env.VITE_LIFF_ID_MINI : import.meta.env.VITE_LIFF_ID
+const isPreviewMINI = new URLSearchParams(location.search).has('mini_preview')
+
+const filter = isPreviewMINI
+  ? FilterTypes.MINI_PREVIEW
+  : isMINI
+  ? FilterTypes.MINI
+  : FilterTypes.LIFF
+
+const appId = {
+  [FilterTypes.LIFF]: import.meta.env.VITE_LIFF_ID,
+  [FilterTypes.MINI]: import.meta.env.VITE_LIFF_ID_MINI,
+  [FilterTypes.MINI_PREVIEW]: import.meta.env.VITE_LIFF_ID_MINI_PREVIEW
+}[filter]
+
+const appUrl =
+  filter === FilterTypes.LIFF
+    ? `https://liff.line.me/${appId}`
+    : `https://miniapp.line.me/${appId}`
+
+const injectPlugins = () => {
+  liff.use(new LiffCommonProfilePlugin())
+}
+
+if (filter === FilterTypes.MINI || filter === FilterTypes.MINI_PREVIEW) {
+  injectPlugins()
+}
 
 liff
-  .init({ liffId })
+  .init({ liffId: appId })
   .then(() => {
     ReactDOM.render(
       <React.StrictMode>
-        <App filter={filter} />
+        <App appUrl={appUrl} filter={filter} />
       </React.StrictMode>,
       document.getElementById('root')
     )

src/vite-env.d.ts

@@ -3,6 +3,7 @@
 interface ImportMetaEnv {
   readonly VITE_LIFF_ID: string;
   readonly VITE_LIFF_ID_MINI: string;
+  readonly VITE_LIFF_ID_MINI_PREVIEW: string;
 }
 
 interface ImportMeta {