OAuth認可を行う

アプリとiAPを連携させるには何よりも先にまずアクセストークンを取得しなければなりません。
このセクションでは、IMOAuthを使ってOAuth認可を行う方法について学びます。

Providerの配置

まずSmartlime Providerを配置します。
これはあなたが連携を行うiAP毎に配置を行う必要があります。
例えばアプリ内で複数のiAPと同時に連携を行う場合、通常その数だけSmartlime Providerを配置する必要があります。

import { Smartlime } from "@intra-mart/smartlime";

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

認可画面を呼び出す。

初回描画時に自動的に認可画面を呼び出すコンポーネントを提供しています。
DefaultAuthScreenは初回レンダー時にSmartlime Providerに渡された設定を元に自動的にiAPの認可画面を呼び出しアクセストークンを取得します。
認可が完了すると認可画面が閉じられDefaultAuthScreenにネストされたコンポーネントのレンダーを開始します。

import { Smartlime } from "@intra-mart/smartlime";
import { DefaultAuthScreen } from "@intra-mart/smartlime-ui";
import { Text } from 'react-native';

const ChildComponent = () => {
  // This child component is automatically rendered after OAuth authorization is completed.
  return <Text>Hello World</Text>
}

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

AuthScreenを実装する

DefaultAuthScreenを利用せずに独自のAuthScreenを実装することも可能です。

まずuseAuthStateで現在の認可の状態を取得します。
認可の状態に合わせてあなたが描画するコンテンツを制御できます。

次にuseStartAuthを使ってstartAuthを取得します。
startAuthを呼び出すと認可画面がモーダルで表示されユーザに認可を求めます。
認可が完了するとstateが変化します。またresultから認可に失敗した場合などの情報を得ることもできます。

import { Smartlime, useAuthState, useStartAuth } from "@intra-mart/smartlime";
import { Button } from 'react-native';

const AuthScreen = ({ children }: { children: JSX.Element }) => {
  // The state changes according to the result of startAuth.
  const state = useAuthState();
  const startAuth = useStartAuth();

  const onPress = async () => {
    const result = await startAuth();
  };

  return state === 'authorized' ? (
    children
  ) : (
    <Button onPress={onPress} title={'Auth'} />
  );
};


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

認可が完了した後にuseIMTokenを呼び出すことでアクセストークンを取得することができます。

import { Smartlime, useIMToken } from "@intra-mart/smartlime";
import { Text } from 'react-native';

const ChildComponent = () => {
  const token = useIMToken();
  return <Text>{token}</Text>
}

備考

この取得したアクセストークンは自動的にSecureStoreに保存されます。
保存されたアクセストークンはアプリの再起動後などIMOAuthを再び利用する場合に使用されます。
保存されたアクセストークンが存在する場合、IMOAuthは認可が完了している物としてuseAuthStateはauthorizedを返すようになります。

認可の状態を操作する

useIMOAuthを利用する事で認可の状態を操作する事ができます。

アクセストークンの更新

アクセストークンの更新を行いたい場合はこのようにrefreshを呼び出す事ができます。
更新が完了するとtokenの値が変更されていることが分かります。

import { Smartlime, useIMToken, useIMOAuth } from "@intra-mart/smartlime";
import { View, Button, Text } from 'react-native';

const ChildComponent = () => {
  const token = useIMToken();
  const { refresh } = useIMOAuth();

  const onPress = () => {
    refresh();
  };

  return (
    <View>
      <Text>{token}</Text>
      <Button title={'refresh'} onPress={onPress} />;
    </View>
  );
}

アクセストークンを破棄する

アクセストークンを破棄したい場合はこのようにdestroyを呼び出す事ができます。
destroyを呼び出すとアクセストークンが破棄され、useAuthStateはunauthorizedを返すようになります。

備考

SecureStoreに保存されたアクセストークンも破棄されます。

import { Smartlime, useIMToken, useIMOAuth } from "@intra-mart/smartlime";
import { View, Button, Text } from 'react-native';

const ChildComponent = () => {
  const token = useIMToken();
  const { destroy } = useIMOAuth();

  const onPress = () => {
    destroy();
  };

  return (
    <View>
      <Text>{token}</Text>
      <Button title={'refresh'} onPress={onPress} />;
    </View>
  )
}