Skip to main content

iAP上のコンテンツを表示する

このセクションではIMWebViewを使ってiAP上のコンテンツを表示する方法について学びます。
IMWebViewを利用するには認可が完了している必要があります。

iAPのコンテンツを表示する​

IMWebViewでiAPのコンテンツを表示します。
IMWebViewはいくつかの点を除いてreact-native-webviewと同じように利用できます。

react-native-webviewと異なる点​

  • iAPのコンテンツを表示する際に事前にSESSIONIDを取得してCookieに埋め込みます。
    • このメリットはコンテンツを表示する際にユーザがWebView内でiAPに都度ログインを行う必要がない事です。

コンテンツを表示する方法はとてもシンプルです。
source.uriに表示したいコンテンツのURIを渡すだけです。
この例ではHome画面を表示しています。

import { Smartlime, IMWebView } from "@intra-mart/smartlime";
import { DefaultAuthScreen } from "@intra-mart/smartlime-ui";

const ChildComponent = () => {
  return (
    <IMWebView
      source={{
        uri: 'https://example.org/imart/home',
      }}
    />
  );
}

const App = () => {
  return (
    <Smartlime
      baseUrl={'https://example.org/imart'}
      imoauth={{
        requestConfig: {
          clientId: 'exampleId',
          clientSecret: 'exampleSecret',
          scopes: ['account'],
          redirectUri: 'exp://example.org:19000',
        },
      }}
    >
      <DefaultAuthScreen>
        <ChildComponent />
      </DefaultAuthScreen>
    </Smartlime>;
  )
}

source.uriにはiAP以外のURIを渡すことも可能です。
SESSIONIDはiAPのコンテンツを表示する場合にのみ埋め込まれるためiAPとそれ以外のコンテンツを切り替える際にSESSIONIDの管理について気にする必要はありません。