React / Next.js 웹뷰에서 네이티브 앱으로 메세지 보내기/토큰받기

메세지 보내기

global.d.ts에서 Window 의 타입에 webkit과 메세지핸들러를 미리 정의해줘야 오류가 나지 않는다.

웹킷은 네이티브 앱에서 웹뷰로 페이지를 호출할 때 생기는 것이라 기본 window에는 존재하지 않는다.

// global.d.ts
export {}

declare global {
  interface Window {
    webkit: {
      messageHandlers: {
        MESSAGE_HANDLER_NAME: {
          postMessage: (param: string) => void;
        };
      };
    };
  }
}

위의 MESSAGE_HANDLER_NAME 은 앱 개발자와 상의해서 이름을 정해주면 된다. 이 때, param으로 넘겨주는 메세지도 개발자 간 상의하여 정하면 된다! 물론 그냥 던지고 파싱해서 알도록할순있지만 효율을 위해 미리 정해두도록하자..

tsconfig.json파일에서 global.d.ts를 읽도록 설정해준다.

// tsconfig.json

include:["./src/*.tsx", "./src/*.ts", "./src/**/*.tsx", "./src/**/*.ts", "next-env.d.ts", "global.d.ts",],

그 후 웹뷰에서 앱에 메세지를 보내야 하는 곳에 아래 로직을 넣어주면 된다. 안의 내용은 꼭 { message: string } 형태가 아니더라도 상황에 맞게 수정할 수 있다.

const 대충웹뷰에메세지보낼함수이름 = () => {
    if (window.webkit) {
      window.webkit.messageHandlers.MESSAGE_HANDLER_NAME.postMessage(
        JSON.stringify({ message: "success" })
      );
    }
  };

토큰 받기

현재 Next를 사용하고 있는데, App Router가 아닌 Page Router를 사용하고 있어서, getServerSideProps를 사용하여 네이티브 앱에서 웹뷰 url을 호출할 때, 헤더에 토큰을 넣어 보내주면 그것을 뽑아서 써야했다.

export const getServerSideProps = (async (context) => {
  console.log(context.req.headers);
  const token = context.req.headers.authorization;
  return {
    props: { token: String(token) },
  };
}) satisfies GetServerSideProps<{}>;

export default function Page({ token }: { token: string }) {
  return (
    <>
      <SomeComponent token={token} />
    </>
  );
}

처음에 context의 내용을 뜯어보다가, rawHeaders라는게 있길래 거기서 뽑아 써야하는 줄 알고 그렇게 처리했었는데, 어떻게 해도 그 값이 넘어오지 않길래 시간을 좀 낭비했다.

rawHeaders가 아니라 headers로 접근해서 뽑아와야 정상적으로 값을 넘겨줄 수 있다!!