WIP: fast login

Author: Boelroy

packages/console-utils/fastlogin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-fastlogin",
-  "version": "2.3.0",
+  "version": "2.0.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "license": "MIT",
@@ -19,9 +19,12 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "prepublish": "npm run clean && npm run build && npm run babel && npm run babel:esm",
-    "babel": "breezr build --engine babel",
+    "babel": "breezr build --engine babel && tsc --emitDeclarationOnly -d true --declarationDir ./lib",
     "babel:esm": "breezr build --engine babel --es-module",
     "build": "breezr build --engine webpack",
     "storybook": "breezr start-storybook",

packages/console-utils/fastlogin/src/index.ts

@@ -51,8 +51,10 @@ const open = async (options: IFastLoginOptions) => {
 
 const render = async (options: IFastLoginOptions) => {
   const fastLogin = await loadFastLoginScripts(options);
+  const { height = 700, width = 500 } = options
   return new Promise<ILoginCallbackProps>((resolve, reject) => {
     fastLogin('render', [{
+      target: options.target,
       // @ts-ignore
       type: "one_login", // one_login, password, qr
       loginCallback: (result) => {
@@ -62,7 +64,7 @@ const render = async (options: IFastLoginOptions) => {
           reject(result)
         }
       }
-    }])
+    }, { height, width }])
   })
 }
 

packages/console-utils/fastlogin/src/type.ts

@@ -1,6 +1,8 @@
 export interface IFastLoginOptions {
   env?: 'prod' | 'prepub';
   target?: HTMLElement;
+  height?:  number;
+  width?:  number;
 }
 
 export interface ILoginCallbackProps {
@@ -11,6 +13,7 @@ export interface ILoginCallbackProps {
 
 export interface IFastLoginProps {
   targetId?: string;
+  target?: HTMLElement;
   loginCallback?: (data: ILoginCallbackProps) => void;
 }
 

packages/console-utils/xconsole-service/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/xconsole-service",
-  "version": "2.3.43",
+  "version": "2.4.0-alpha.11",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "lib/index.d.ts",

packages/console-utils/xconsole-service/src/interceptors/fastloginInterceptor/index.ts

@@ -1,32 +1,24 @@
-import fastLogin from '@alicloud/console-fastlogin';
-import { IResponse, IResponseData } from '../../types';
 import { ApiType } from '../../const/index';
+import { IResponse, IResponseData } from '../../types';
+import { login } from './login';
 
-async function consoleRiskInterceptor(
-  response: IResponse<IResponseData>
-): Promise<IResponse<IResponseData>> {
-  const {
-    data: responseData,
-    config: { apiType, throwDoubleConfirmError },
-  } = response;
+
+async function fastLoginInterceptor(response: IResponse<IResponseData> ): Promise<IResponse<IResponseData>> {
+  const { data: responseData, config } = response;
+  const { apiType } = config;
 
   if (apiType === ApiType.custom) return response;
 
-  switch (responseData.code) {
-    case 'CONSOLE_NEED_LOGIN':
-      try {
-        const newResponse = await fastLogin.open()
-        return newResponse;
-      } catch (e) {
-        if (throwDoubleConfirmError) {
-          e.response = response;
-          throw e;
-        }
-        return response;
-      }
-    default:
+  if (responseData.code === 'ConsoleNeedLogin') {
+    try {
+      const newResponse = await login(response); 
+      return newResponse;
+    } catch(e) {
       return response;
+    }
   }
+
+  return response;
 }
 
-export default consoleRiskInterceptor;
+export default fastLoginInterceptor;

packages/console-utils/xconsole-service/src/interceptors/fastloginInterceptor/login.tsx

@@ -1,5 +1,104 @@
-import fastLogin from '@alicloud/console-fastlogin';
+import axios, { AxiosResponse } from 'axios';
+import React, { useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom'
+import { render } from '@alicloud/console-fastlogin';
+import { Button, Dialog } from '@alicloud/console-components'
 
-const login = async () => {
+import searchParamsInterceptor from '../paramsInterceptor/index';
+import { getSecToken, getUmid, getCollina } from '../../utils/index';
 
-}
+const axiosInstance = axios.create();
+axiosInstance.interceptors.request.use(searchParamsInterceptor);
+
+export const refreshToken = async () => {
+  const reqData = {
+    'sec_token': getSecToken(),
+    umid: getUmid(),
+    collina: getCollina(),
+  };
+
+  try {
+    const res = await axiosInstance({
+      method: 'get',
+      url: '/tool/user/info.json',
+      // url: 'https://oneapi.alibaba-inc.com/mock/oneconsole/data/api.json?product=consoledemo&action=DescribeUserInfo',
+      data: reqData,
+      timeout: 15000,
+    });
+
+    const { data: { data: resData } } = res;
+    // @ts-ignore
+    window.ALIYUN_CONSOLE_CONFIG && (window.ALIYUN_CONSOLE_CONFIG.SEC_TOKEN = resData?.secToken);
+  } catch (e) {
+    console.log('xxxxxxx',e)
+    // TODO
+  }
+}
+
+export const LoginContent: React.FC<any> = (props) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    setTimeout(() => {
+      if (ref.current || document.querySelector('#loginContent')) {
+        (async () => {
+          try {
+            const result = await render({ env: 'prepub', target: ref.current || document.querySelector('#loginContent'), height: 560 });
+            console.log(result)
+            if (result.success) {
+              await refreshToken();
+            }
+            props.onSuccess()
+          } catch(e) {
+            console.log(e)
+            props.onError(e);
+          }
+        })()
+      }
+    }, 1000)
+  }, [ref.current]);
+
+  return (
+    <Dialog visible footer={<div/>} onClose={() => {props.onError()}}>
+      <div style={{height: 660, width: 500, paddingTop: 20}}>
+        <div ref={ref} id="loginContent" ></div>
+        <div style={{textAlign: 'center', width: 500, paddingTop: 20, fontSize: 13}}>
+          <span style={{verticalAlign: 'text-top'}}>快速登录有问题？直接去</span>
+          <Button text type="primary">登录页</Button>
+          <span style={{verticalAlign: 'text-top'}}>登录</span>
+        </div>
+      </div>
+    </Dialog>
+  )
+}
+
+export const login = (response: AxiosResponse) => {
+  return new window.Promise<AxiosResponse>((resolve, reject) => {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    ReactDOM.render(
+      <LoginContent
+        onSuccess={async () => {
+          try {
+            setTimeout(async() => {
+              const reqData = new URLSearchParams(response.config.data);
+              reqData.set('sec_token', getSecToken())
+              const newResponse = await axios.request({
+                method: 'post',
+                url: response.config.url,
+                baseURL: '/',
+                data: reqData.toString()
+              })
+              resolve(newResponse);
+              ReactDOM.unmountComponentAtNode(div);
+            }, 200)
+          } catch (e) {
+            reject(e);
+          }
+        }}
+        onError={() => {
+          ReactDOM.unmountComponentAtNode(div);
+          reject(response);
+        }}
+      />, div);
+  })
+}

packages/console-utils/xconsole-service/src/request.ts

@@ -1,6 +1,7 @@
 import axios, { AxiosInstance } from 'axios';
 import searchParamsInterceptor from './interceptors/paramsInterceptor/index';
 import consoleMockInterceptor from './interceptors/mockInterceptor/index';
+import fastLoginInterceptor from './interceptors/fastloginInterceptor';
 import {
   consoleRequestInterceptor,
   consoleResponseInterceptor,
@@ -37,6 +38,7 @@ export default function createRequest(
     instance.interceptors.request.use(armsRequestInterceptor);
 
     instance.interceptors.response.use(armsResponseInterceptor);
+    instance.interceptors.response.use(fastLoginInterceptor);
     instance.interceptors.response.use(consoleResponseInterceptor);
     instance.interceptors.response.use(consoleRiskInterceptor);
   }

packages/console-utils/xconsole-service/stories/fast-login.stories.tsx

@@ -0,0 +1,24 @@
+
+
+
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { withKnobs } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import { createService } from '../src/index'
+
+import '@alicloud/console-components/dist/xconsole.css'
+
+window.React = React;
+window.ReactDOM = ReactDOM
+storiesOf('XConsole FastLogin', module)
+  .addDecorator(withKnobs)
+  .add('FastLogin', () => {
+    React.useEffect(() => {
+      (async () => {
+        await createService('consoledemo', 'ConsoleNeedLogin')({ xxxx:1 })
+      })()
+    })
+    return <div/>
+  })

packages/console-utils/xconsole-service/stories/index.stories.tsx

@@ -11,10 +11,12 @@ import '@alicloud/console-components/dist/wind.css'
 defaultAxiosRequest.interceptors.request.handlers.unshift({
   fulfilled: (config) => {
     config.baseURL = 'https://oneapi.alibaba-inc.com/mock/oneconsole';
-    config.method = 'GET'
+    // config.method = 'GET'
     if(config.url.indexOf('multiApi.json')) {
       config.url = config.url.replace(/multiApi.json/, 'api.json')
       config.url = config.url.replace(/action=undefined/, 'action=DescribeMultiApi')
+      console.log(config.url, config.url.replace(/\/tool\/user\/info\.json/, '/data/api.json?action=DescribeUserInfo'))
+      config.url = config.url.replace(/\/tool\/user\/info\.json/, 'data/api.json?action=DescribeUserInfo')
     }
     return config;
   }