LINE Mini Application의 "서비스 정보"④: Mini Application에서 LINF 액세스 토큰이 있는 액세스 사용

난 BULB 가토야.LINE 미니 응용 프로그램의 서비스 정보 개발 검증, 계속 진행!
①: 개요 확인https://zenn.dev/bulb/articles/b10f61b983a949
②: 개발환경준비https://zenn.dev/bulb/articles/8528cd7d830532
③: 서버 구축https://zenn.dev/bulb/articles/e369d3e41935ec
④: 미니 애플리케이션 개발https://zenn.dev/bulb/articles/7b576300730c42←
⑤: 디버그 API https://zenn.dev/bulb/articles/3b237d1fdc1183

미니어처를 먼저 설계해 놓을게요.

전제는 LIFF는 LINE 미니어처로 사용할 수 있다!아직 없는 경우는 이쪽을 참고해서 기다리세요.
https://zenn.dev/bulb/articles/fb0666bb027a79
https://developers.line.biz/ja/docs/line-mini-app/quickstart/

LIFF 액세스 토큰을 받아서 서버에 보내기

이번에 하고 싶은 것은 라인 미니어처 앱 내 동작을 통해 서비스 정보를 보내는 것이다.
리액트로 제작된 것이기 때문에 사전 준비로 axios를 설치합니다.

$ npm install axios

보기 코드 app를 쓰세요.js에서 import
app.js

import axios from 'axios';

LINE 로그인 처리

액세스 토큰을 받으려면 LIFF init를 사용하여 초기화하고 로그인 상태를 확인해야 합니다.
LINFF의 공식 문서에도 있습니다. 이렇게 하면 됩니다.
app.js

window.onload = function() {
  const defaultLiffId = "#########-########"; //LIFF IDを入れる
  initializeLiff(defaultLiffId);
};

function initializeLiff(myLiffId) {
  liff
  .init({
      liffId: "#########-########" //LIFF IDを入れる
  })
  .then(() => {
    if (liff.isLoggedIn()) {
      setuid()
    } else {
      window.alert('ログアウト')
      liff.login()
    }
  })
  .catch((err) => {
      window.alert('Something went wrong with LIFF initialization.');
  });
}

UI 설정

화면에서 서비스 정보를 보내는 데 사용할 텍스트 링크를 설정합니다.
Conponent의return 내 jsx에서 이런 내용을 간단하게 보충했다.보이는 곳은 어디든 좋습니다.
app.js

<a href="#" onClick={getServiveMessage(accessToken)}>サービスメッセージを送る</a>

클릭하면 함수 getServiveMessage를 통해 액세스 토큰이 전송됩니다.아직 getServiveMessage가 없으니까 해야죠.
내 개발화면.무관한 요소를 넣었지만 서비스 정보를 보내는 UI를 먼저 만들었다.

토큰 API 요청

다음 함수를 추가합니다.
app.js

function getServiveMessage(accessToken){
  axios.get(`https://#######.herokuapp.com/?access_token=` + accessToken) 
  .then(res => {
    window.alert('アクセストークンを送りました')
  })
}

https://#######.herokuapp..com/에 자신이 설정한 API의 URL을 미리 넣습니다.
그럼, 여기까지 사소한 일은 끝났어요.
그리고 Heroku에서 응용 프로그램과 API를 디자인하고 LINE에서 해보세요!