feature: retrieve access token (#68)

* feature: access token

* feat: display date valid

* style: prettify

* test: remove switch button

* refactor: NativeTokenData

Author: minh-rakuten

js-miniapp-bridge/src/common-bridge.ts

@@ -13,6 +13,7 @@ import {
 } from './types/custom-permissions';
 import { ShareInfoType } from './types/share-info';
 import { ScreenOrientation } from './types/screen';
+import { NativeTokenData, AccessTokenData } from './types/token-data';
 
 /** @internal */
 const mabMessageQueue: Callback[] = [];
@@ -263,6 +264,23 @@ export class MiniAppBridge {
     });
   }
 
+  /**
+   * Get access token from native hostapp.
+   */
+  getAccessToken() {
+    return new Promise<AccessTokenData>((resolve, reject) => {
+      return this.executor.exec(
+        'getAccessToken',
+        null,
+        tokenData => {
+          const nativeTokenData = JSON.parse(tokenData) as NativeTokenData;
+          resolve(new AccessTokenData(nativeTokenData));
+        },
+        error => reject(error)
+      );
+    });
+  }
+
   /**
    * This function does not return anything back on success.
    * @param {screenAction} The screen state that miniapp wants to set on device.

js-miniapp-bridge/src/index.ts

@@ -16,6 +16,7 @@ import {
 } from './types/custom-permissions';
 import { ShareInfoType } from './types/share-info';
 import { ScreenOrientation } from './types/screen';
+import { AccessTokenData } from './types/token-data';
 
 export {
   MiniAppBridge,
@@ -28,4 +29,5 @@ export {
   CustomPermissionResult,
   ShareInfoType,
   ScreenOrientation,
+  AccessTokenData,
 };

js-miniapp-bridge/src/types/token-data.ts

@@ -0,0 +1,16 @@
+/** @internal */
+export interface NativeTokenData {
+  token: string;
+  validUntil: number;
+}
+
+/** Token data type. */
+export class AccessTokenData {
+  readonly token: string;
+  readonly validUntil: Date;
+
+  constructor(baseToken: NativeTokenData) {
+    this.token = baseToken.token;
+    this.validUntil = new Date(baseToken.validUntil);
+  }
+}

js-miniapp-sample/src/js_sdk/index.js

@@ -4,3 +4,7 @@ export const isMobile = () => {
   const parser = Bowser.getParser(window.navigator.userAgent);
   return parser.getPlatform().type === 'mobile';
 };
+
+export const displayDate = (date: Date) => {
+  return date.toLocaleDateString(`ja-JP`);
+};

js-miniapp-sample/src/pages/auth-token.js

@@ -1,17 +1,16 @@
-import React, { useReducer, useState } from 'react';
+import React, { useReducer } from 'react';
+import MiniApp from 'js-miniapp-sdk';
+import { displayDate } from '../js_sdk';
 
 import {
   Button,
-  Switch,
   CircularProgress,
   FormGroup,
-  Grid,
   Typography,
   CardContent,
 } from '@material-ui/core';
 import { red, green } from '@material-ui/core/colors';
 import { makeStyles } from '@material-ui/core/styles';
-import axios from 'axios';
 import clsx from 'clsx';
 
 import GreyCard from '../components/GreyCard';
@@ -73,13 +72,14 @@ const dataFetchReducer = (state, action) => {
         ...state,
         isLoading: false,
         isError: false,
-        response: action.payload,
+        response: action.tokenData,
       };
     case 'FETCH_FAILURE':
       return {
         ...state,
         isLoading: false,
         isError: true,
+        errorMessage: action.errorMessage,
       };
     default:
       throw new Error();
@@ -95,20 +95,15 @@ function AuthToken() {
     [classes.buttonSuccess]: state.response,
   });
 
-  const [switchState, setSwitchState] = useState(true);
-
   function requestToken() {
-    // Hardcoded API values to test
-    const API = switchState
-      ? 'http://www.mocky.io/v2/5e9406873100006c005e2d00'
-      : 'http://www.mocky.io/v2/5e9806e43500006a00c47d6f';
-    axios
-      .get(API)
+    MiniApp.user
+      .getAccessToken()
       .then((response) => {
-        dispatch({ type: 'FETCH_SUCCESS', payload: response.data });
+        dispatch({ type: 'FETCH_SUCCESS', tokenData: response });
       })
       .catch((error) => {
-        dispatch({ type: 'FETCH_FAILURE' });
+        console.error(error);
+        dispatch({ type: 'FETCH_FAILURE', errorMessage: error });
       });
   }
 
@@ -120,26 +115,6 @@ function AuthToken() {
     }
   }
 
-  function SwitchToggle() {
-    return (
-      <Typography component="div">
-        <Grid component="label" container alignItems="center" spacing={1}>
-          <Grid item>Success</Grid>
-          <Grid item>
-            <Switch
-              color="primary"
-              checked={switchState}
-              onChange={() => setSwitchState(!switchState)}
-              name="switchState"
-              data-testid="authSwitch"
-            />
-          </Grid>
-          <Grid item>Failure</Grid>
-        </Grid>
-      </Typography>
-    );
-  }
-
   function ButtonWrapper() {
     return (
       <div className={classes.wrapper}>
@@ -164,28 +139,20 @@ function AuthToken() {
     <GreyCard height="auto">
       <CardContent>
         <FormGroup column="true" classes={{ root: classes.rootFormGroup }}>
-          <Typography variant="body2" align="center">
-            Please note that we use a <strong>mocked API</strong> in this
-            example (
-            <a href="http://www.mocky.io/v2/5e9806e43500006a00c47d6f">
-              Success
-            </a>{' '}
-            &{' '}
-            <a href="http://www.mocky.io/v2/5e9406873100006c005e2d00">
-              Failure
-            </a>
-            )
-          </Typography>
-          {SwitchToggle()}
           {ButtonWrapper()}
           {state.isError && (
             <Typography variant="body1" className={classes.error}>
-              Error fetching the Token
+              {state.errorMessage}
+            </Typography>
+          )}
+          {state.response && (
+            <Typography variant="body1" className={classes.success}>
+              Token: {state.response.token}
             </Typography>
           )}
           {state.response && (
             <Typography variant="body1" className={classes.success}>
-              {JSON.stringify(state.response.data)}
+              Valid until: {displayDate(state.response.validUntil)}
             </Typography>
           )}
         </FormGroup>

js-miniapp-sample/src/pages/tests/auth-token.test.js

@@ -15,8 +15,3 @@ test('Button is rendered', () => {
   const button = screen.getByTestId('authButton');
   expect(button).toBeInTheDocument();
 });
-
-test('Switch is rendered', () => {
-  const authSwitch = screen.getByTestId('authSwitch');
-  expect(authSwitch).toBeInTheDocument();
-});

js-miniapp-sample/src/pages/tests/fetch-credentials.test.js

@@ -14,12 +14,6 @@ test('Button is rendered', () => {
   expect(button).toBeInTheDocument();
 });
 
-test('Switch is rendered', () => {
-  const { getByTestId } = render(wrapTheme(<AuthToken />));
-  const authSwitch = getByTestId('authSwitch');
-  expect(authSwitch).toBeInTheDocument();
-});
-
 describe('Test Reducer', () => {
   test('The init action updates state properly', () => {
     expect(initialState.isLoading).toBe(false);

js-miniapp-sdk/src/index.ts

@@ -12,6 +12,7 @@ import {
   CustomPermissionResult,
   ShareInfoType,
   ScreenOrientation,
+  AccessTokenData,
 } from '../../js-miniapp-bridge/src';
 
 import { MiniApp } from './miniapp';
@@ -28,4 +29,5 @@ export {
   Reward,
   ShareInfoType,
   ScreenOrientation,
+  AccessTokenData,
 };

js-miniapp-sdk/src/miniapp.ts

@@ -6,6 +6,7 @@ import {
   CustomPermissionResult,
   ShareInfoType,
   ScreenOrientation,
+  AccessTokenData,
 } from '../../js-miniapp-bridge/src';
 
 /**
@@ -91,18 +92,23 @@ interface Platform {
 }
 
 /**
- * Interfaces to retrieve User profile related information
+ * Interfaces to retrieve User profile related information.
  */
 export interface UserInfoProvider {
   /**
-   * @returns Username saved in the host app user profile
+   * @returns Username saved in the host app user profile.
    */
   getUserName(): Promise<string>;
 
   /**
-   * @returns Profile photo saved in the host app user profile
+   * @returns Profile photo saved in the host app user profile.
    */
   getProfilePhoto(): Promise<string>;
+
+  /**
+   * @returns Access token from native hostapp.
+   */
+  getAccessToken(): Promise<AccessTokenData>;
 }
 
 /** @internal */
@@ -120,6 +126,10 @@ class UserInfo implements UserInfoProvider {
   getProfilePhoto(): Promise<string> {
     return this.bridge.getProfilePhoto();
   }
+
+  getAccessToken(): Promise<AccessTokenData> {
+    return this.bridge.getAccessToken();
+  }
 }
 
 /* tslint:disable:no-any */

js-miniapp-sdk/test/miniapp.spec.ts

@@ -8,6 +8,7 @@ import {
   CustomPermissionName,
   CustomPermissionStatus,
   ScreenOrientation,
+  AccessTokenData,
 } from '../../js-miniapp-bridge/src';
 import { MiniApp } from '../src/miniapp';
 
@@ -26,6 +27,7 @@ window.MiniAppBridge = {
   getPlatform: sinon.stub(),
   getUserName: sinon.stub(),
   getProfilePhoto: sinon.stub(),
+  getAccessToken: sinon.stub(),
   setScreenOrientation: sinon.stub(),
 };
 const miniApp = new MiniApp();
@@ -226,6 +228,18 @@ describe('getProfilePhoto', () => {
   });
 });
 
+describe('getAccessToken', () => {
+  it('should retrieve AccessTokenData from the MiniAppBridge when request is successful', () => {
+    const response = {
+      token: 'test_token',
+      validUntil: 0,
+    };
+
+    window.MiniAppBridge.getAccessToken.resolves(response);
+    return expect(miniApp.user.getAccessToken()).to.eventually.equal(response);
+  });
+});
+
 describe('requestScreenOrientation', () => {
   it('should retrieve success from the MiniAppBridge when request is successful', () => {
     const response = 'success';