From 3477e54e23dcc25af0945b6671b840bdf12069bd Mon Sep 17 00:00:00 2001 From: ChenWei Date: Thu, 24 Oct 2024 16:48:22 +0800 Subject: [PATCH] feat: auth + wallet MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. auth 所有页面增加alertConfig 2. auth 打开页面,新开标签 3. 所有服务+重定向地址端口改成3001 4. auth补充遗漏配置hide_header 5. auth sso授权登录逻辑优化 --- examples/example-auth-react/package.json | 2 +- examples/example-auth-react/src/App.css | 7 ++ examples/example-auth-react/src/App.tsx | 78 +++++++++++++++++++++- examples/example-auth-react/src/main.tsx | 4 +- examples/example-auth-vanillajs/js/main.js | 4 +- examples/example-auth-vue/package.json | 2 +- examples/example-auth-vue/src/App.vue | 76 ++++++++++++++++++++- examples/example-auth-vue/src/main.ts | 2 +- examples/example-auth-vue/src/style.css | 7 ++ examples/example-auth/index.html | 56 +++++++++++++++- examples/example-auth/package.json | 2 +- examples/example-auth/src/index.js | 36 +++++++++- examples/example-wallet-js/src/index.js | 2 +- examples/example-wallet-js/src/test.js | 2 +- examples/example-wallet-react/package.json | 2 +- examples/example-wallet-react/src/main.tsx | 4 +- examples/tg-mini-app/src/main.tsx | 4 +- xterio-auth/README.md | 15 ++++- xterio-auth/index.html | 56 +++++++++++++++- xterio-auth/package.json | 2 +- xterio-auth/src/__test__/index.test.ts | 2 +- xterio-auth/src/index.ts | 2 +- xterio-auth/src/interfaces/loginInfo.ts | 16 +++-- xterio-auth/src/main.ts | 38 ++++++++++- xterio-auth/src/modules/XterAuth.ts | 45 ++++++++----- xterio-auth/src/modules/XterPage.ts | 9 ++- xterio-wallet/package.json | 2 +- xterio-wallet/src/main.tsx | 2 +- 28 files changed, 419 insertions(+), 60 deletions(-) diff --git a/examples/example-auth-react/package.json b/examples/example-auth-react/package.json index 7d1e13b..01360e5 100644 --- a/examples/example-auth-react/package.json +++ b/examples/example-auth-react/package.json @@ -4,7 +4,7 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite --port 3000", + "dev": "vite --port 3001", "build": "tsc && vite build", "lint": "eslint .", "preview": "vite preview" diff --git a/examples/example-auth-react/src/App.css b/examples/example-auth-react/src/App.css index c8a2067..3552831 100644 --- a/examples/example-auth-react/src/App.css +++ b/examples/example-auth-react/src/App.css @@ -40,9 +40,16 @@ display: flex; flex-direction: row; } +.col{ + display: flex; + flex-direction: column; +} .justify-center{ justify-content: center; } +.items-center{ + align-items: center; +} .read-the-docs { color: #888; diff --git a/examples/example-auth-react/src/App.tsx b/examples/example-auth-react/src/App.tsx index ae33309..b2fdec3 100644 --- a/examples/example-auth-react/src/App.tsx +++ b/examples/example-auth-react/src/App.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react' +import { useEffect, useMemo, useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' @@ -7,6 +7,7 @@ import { IUserInfo, LoginType, OpenPageMode, + PageAlertConfig, PageOptionParam, PageType, XterEventEmiter, @@ -24,6 +25,11 @@ const getRadioValue = (name: string) => { const tab: HTMLInputElement | null = document.querySelector(`input[name="${name}"]:checked`) return tab?.value } +const getInputValue = (cls: string, tag: string = 'input') => { + const ele = document.getElementsByClassName(cls)?.[0] + const input = ele.getElementsByTagName(tag)?.[0] as HTMLInputElement + return input?.value +} function App() { const [userinfo, setUserinfo] = useState('') @@ -59,7 +65,11 @@ function App() { XterioAuth.logout() } const openPage = async (_t: OpenPageMode) => { - const res = await XterioAuth.openPage(currentPage, _t, getPageParam()) + let param = getPageParam() + if (_t === OpenPageMode.alert) { + param = { ...param, alertConfig: getAlertConfig() } + } + const res = await XterioAuth.openPage(currentPage, _t, param) if (_t === OpenPageMode.iframeDom) { console.log('dom=', res) alert(res) @@ -97,6 +107,9 @@ function App() { if (isChecked('hide_sign_out')) { dic = { ...dic, hide_sign_out: true } } + if (isChecked('hide_header')) { + dic = { ...dic, hide_header: true } + } if (isChecked('hide_footer')) { dic = { ...dic, hide_footer: true } } @@ -116,6 +129,25 @@ function App() { console.log('dic=', dic) return dic } + const getAlertConfig = () => { + const placement = (getRadioValue('alert_active_place_option') || 'right') as PageAlertConfig['placement'] + let dic: Partial = { placement } + if (isChecked('alert_showCloseIcon')) { + dic = { ...dic, showCloseIcon: false } + } + let _sty = { width: getInputValue('alert_width'), height: getInputValue('alert_height') } + + const _customsty = getInputValue('alert_style', 'textarea') || '{}' + try { + _sty = { ..._sty, ...JSON.parse(_customsty) } + } catch (err: unknown) { + console.error('自定义样式输入不合法', _customsty, err) + } + dic.style = _sty + + console.log('alertConfig=', dic) + return dic + } const getOtac = async () => { const _otac = await XterioAuth.getOtac() console.log('_otac=', _otac) @@ -126,6 +158,12 @@ function App() { console.log('_idToken=', _idToken) alert(_idToken) } + const defaultStyle = useMemo(() => { + return JSON.stringify({ + marginTop: '20px', + backgroundColor: 'red' + }) + }, []) return ( <> @@ -169,12 +207,16 @@ function App() {
- 隐藏顶部导航栏(仅H5生效) + 隐藏菜单入口(仅H5生效)
隐藏登出按钮
+
+ + 隐藏顶部导航 +
隐藏页脚 @@ -238,6 +280,36 @@ function App() {
tip: features 参考文档，collection必传(示例为写死的值)
)}
+
+

弹框样式控制:

+
+
位置:
+
+ + + + + + +
+
+
+ + 是否隐藏关闭按钮 +
+
+ + +
+
+ + +
+
+ + +
+

打开页面的方式如下：

diff --git a/examples/example-auth-react/src/main.tsx b/examples/example-auth-react/src/main.tsx index 00a83d4..5dd6766 100644 --- a/examples/example-auth-react/src/main.tsx +++ b/examples/example-auth-react/src/main.tsx @@ -25,7 +25,7 @@ const GET_QUERY_STRING = (key: string) => { import '@xterio-sdk/auth/style/main.css' import { Env, XterioAuth } from '@xterio-sdk/auth' const devConfig = { - redirect_uri: 'http://localhost:3000/', + redirect_uri: location.href.replace(/[?&]code=[^&]+/, ''), client_id: '4gsmgur6gkp8u9ps8dlco3k7eo', client_secret: 'ABC23', app_id: 'apiautotest' @@ -35,7 +35,7 @@ const stageConfig = { redirect_uri: location.href.replace(/[?&]code=[^&]+/, ''), client_id: '3094298453404953', client_secret: 'mzmhYqcqDGdymblv5gb7s9OWcnYpH1ha', - app_id: '6c684e202700' + app_id: '6f5d74164311' } let _env: Env = __EXAMPLE_ENV__ || Env.Dev const variable = GET_QUERY_STRING('env') diff --git a/examples/example-auth-vanillajs/js/main.js b/examples/example-auth-vanillajs/js/main.js index c722bba..0671bbe 100644 --- a/examples/example-auth-vanillajs/js/main.js +++ b/examples/example-auth-vanillajs/js/main.js @@ -21,11 +21,11 @@ document.addEventListener('DOMContentLoaded', function () { } // init auth sdk - const redirect_uri = 'http://localhost:3000/' + const redirect_uri = 'http://localhost:3001/' const client_id = '4gsmgur6gkp8u9ps8dlco3k7eo' const client_secret = 'ABC23' const app_id = '' - XterioAuth.XterioAuth.init({app_id, client_id, client_secret, redirect_uri }, 'Dev') //ENV:'Dev','Staging','Production' + XterioAuth.XterioAuth.init({ app_id, client_id, client_secret, redirect_uri }, 'Dev') //ENV:'Dev','Staging','Production' // call useLoginModal const { open, logout } = XterioAuth.useXterLoginModal({ diff --git a/examples/example-auth-vue/package.json b/examples/example-auth-vue/package.json index 05ee032..9709542 100644 --- a/examples/example-auth-vue/package.json +++ b/examples/example-auth-vue/package.json @@ -4,7 +4,7 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite --port 3000", + "dev": "vite --port 3001", "build": "vue-tsc -b && vite build", "preview": "vite preview" }, diff --git a/examples/example-auth-vue/src/App.vue b/examples/example-auth-vue/src/App.vue index 819e684..2a1d624 100644 --- a/examples/example-auth-vue/src/App.vue +++ b/examples/example-auth-vue/src/App.vue @@ -12,6 +12,11 @@ const getRadioValue = (name: string) => { const tab: HTMLInputElement | null = document.querySelector(`input[name="${name}"]:checked`) return tab?.value } +const getInputValue = (cls: string, tag: string = 'input') => { + const ele = document.getElementsByClassName(cls)?.[0] + const input = ele.getElementsByTagName(tag)?.[0] as HTMLInputElement + return input?.value +} defineProps<{ msg: string }>() @@ -47,7 +52,11 @@ const logout = () => { XterioAuth.logout() } const openPage = async (_t: OpenPageMode) => { - const res = await XterioAuth.openPage(currentPage.value, _t, getPageParam()) + let param = getPageParam() + if (_t === OpenPageMode.alert) { + param = { ...param, alertConfig: getAlertConfig() } + } + const res = await XterioAuth.openPage(currentPage.value, _t, param) if (_t === OpenPageMode.iframeDom) { console.log('dom=', res) alert(res) @@ -85,6 +94,9 @@ const getPageParam = () => { if (isChecked('hide_sign_out')) { dic = { ...dic, hide_sign_out: true } } + if (isChecked('hide_header')) { + dic = { ...dic, hide_header: true } + } if (isChecked('hide_footer')) { dic = { ...dic, hide_footer: true } } @@ -104,6 +116,25 @@ const getPageParam = () => { console.log('dic=', dic) return dic } +const getAlertConfig = () => { + const placement = (getRadioValue('alert_active_place_option') || 'right') as PageAlertConfig['placement'] + let dic: Partial = { placement } + if (isChecked('alert_showCloseIcon')) { + dic = { ...dic, showCloseIcon: false } + } + let _sty = { width: getInputValue('alert_width'), height: getInputValue('alert_height') } + + const _customsty = getInputValue('alert_style', 'textarea') || '{}' + try { + _sty = { ..._sty, ...JSON.parse(_customsty) } + } catch (err: unknown) { + console.error('自定义样式输入不合法', _customsty, err) + } + dic.style = _sty + + console.log('alertConfig=', dic) + return dic +} const getOtac = async () => { const _otac = await XterioAuth.getOtac() console.log('_otac=', _otac) @@ -114,6 +145,11 @@ const getIdToken = async () => { console.log('_idToken=', _idToken) alert(_idToken) } +const defaultStyle = JSON.stringify({ + marginTop: '20px', + backgroundColor: 'red' +}) +