전회의 투고( LINE 봇으로 게임북을 만든, 드디어 시나리오 에디터를 만들었으므로 완성 )의 계속입니다.

LINE 봇으로 게임북을 만들었는데, TyranoScript를 참고로 회상 장면을 붙여 보았습니다.
마음에 드는 이미지가 있는 페이지에서, 「기억」이라고 말하면, 그 때의 화상이나 음성을 기억해 주기 때문에, 언제라도 보상할 수 있게 됩니다.
이번에도 GitHub에 올리고 있습니다.

poruruba/LinebotGamebook
htps : // 기주 b. 코 m / 포루바 / 네보 t가 메보오 k

회상 장면을 기억하기 위해 LIFF 앱을 추가합니다.
이런 느낌의 화면이 LINE 앱 내에 표시됩니다.

LIFF 앱 등록

LIFF 앱은 스마트 폰의 LINE 앱에서 시작할 수있는 웹 페이지입니다.
사용자가 로그인을 신경 쓰지 않고 웹 페이지를 표시하는 것이 좋습니다.

LINE Developers에서 LINE 로그인 채널을 만들고 LIFF 탭을 선택하고 LIFF 앱의 '추가'버튼을 누르면 등록할 수 있습니다.



LIFF 앱 이름에는 적절한 이름을 입력하고 엔드포인트 URL에는 시작한 서버의 URL을 다음과 같이 입력합니다.

　https://【서버의 URL】/gamebook/liff/index.html

그러면 LIFF ID가 지불됩니다. 이것을 기억하십시오. 그런 다음이 채널의 채널 ID도 기억합니다.

※덧붙여서, 이전에는 Messaging API로 LIFF가 등록되어 있었습니다만, 최근에는 안된 것 같습니다. (그 영향으로, liff.sendMessages()가 호출할 수 없게 되는 것 같은...)

그리고는, 상기의 URL에 표시시키고 싶은 Web 페이지를 만들면 됩니다.
이 페이지에 사용자에게 날려 받으려면 채팅에서 ""htps : // / f. 네. 메/"+LIFF_ID"라는 느낌의 URL을 클릭하면 됩니다.

LIFF 앱과 서버 연동

LIFF 앱은 일반 SPA 웹 페이지입니다.
다음 javascript 라이브러리를 가져옵니다.

public/gamebook/liff/index.html

  <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>

LIFF 앱 자바스크립트는 웹페이지가 시작된 직후에 다음을 호출합니다.

public/gamebook/liff/js/start.js

                await liff.init({
                    liffId: LIFF_ID
                });
                this.id_token = liff.getIDToken();

LIFF_ID는 이전에 얻은 것입니다.
그런 다음 id_token을 시작한 서버로 전달합니다.

public/gamebook/liff/js/start.js

                var param = {
                    id_token: this.id_token,
                    cmd: 'get'
                };
                var json = await do_post(status_url, param );

(참고) liff.init(), liff.getIDToken()
ぇぺぺrs. 네. 비 · 자 / 레후 렌세 / ぃ f / # 안녕하세요 ぃ
ぇぺぺrs. 네. 비 · 자 / 레후 렌 세 / f f

서버 측에서는 ID 토큰을 검증하고 LINE 사용자 ID를 판별하여 시나리오의 상태를 꺼내 json으로 되돌려주는 서버 측을 구현했습니다.

서버측 처리

서버측에서는 ID 토큰을 LINE 서버에 전달하여 정확성을 확인하면 사용자의 정보를 얻을 수 있습니다. 브라우저에서 취득한 ID 토큰과 방금 메모해 둔 채널 ID를 사용합니다.

api/controllers/linebot/index.js

      var json = await do_post_urlencoded('https://api.line.me/oauth2/v2.1/verify', { id_token: body.id_token, client_id: LINE_CHANNEL_ID } );
      var userId = json.sub;

(참고) LIFF 앱 및 서버에서 사용자 정보 사용
ぇぺぺrs. 네. · · · · / cs / ぃ f / usin g-use rp 로후 ぇ /

userId를 알았으므로, DB 또는 파일로부터 상태를 취득해, 이후의 처리로 클라이언트에 돌려주고 있습니다.

그리고는, 소스 코드를 봐 주시면! !

보충

LIFF 앱은 Chrome이 아닌 LINE 앱에서 실행되므로 Javascript 디버깅이 어렵습니다.
이 경우 아래 부분의 주석 처리를 해제하십시오. 콘솔을 볼 수 있습니다.

public/gamebook/liff/js/start.js

//var vConsole = new VConsole();

Tencent/vConsole
htps : // 기주 b. 코 m / 텐센 t / v 안녕

이상