@cloudbase/oauth 2.23.3 → 2.24.0

package/src/captcha/captcha-dom.ts

@@ -0,0 +1,178 @@
+import { CaptchaToken } from '@cloudbase/adapter-interface'
+import { CloudbaseEventEmitter } from '@cloudbase/utilities/dist/cjs/libs/events'
+import { parseCaptcha } from '@cloudbase/utilities/dist/cjs/libs/util'
+import { Auth } from '../auth/apis'
+
+// 防抖函数实现
+const debounce = (func: Function, delay: number) => {
+  let timeoutId: NodeJS.Timeout
+  return (...args: any[]) => {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => func.apply(null, args), delay)
+  }
+}
+
+const eventBus = new CloudbaseEventEmitter()
+
+const CAPTCHA_EVENT = {
+  CAPTCHA_DATA_CHANGE: 'captchaDataChange',
+  RESOLVE_CAPTCHA_DATA: 'resolveCaptchaData',
+}
+
+// 图形验证码弹窗样式类
+const CAPTCHA_STYLES = {
+  overlay: 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:999',
+  modal:
+    'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:320px;padding:20px;background:#fff;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,0.2);z-index:1000',
+  prompt: 'margin-bottom:15px',
+  captchaWrap: 'display:flex;align-items:center;justify-content:space-between;margin-bottom:15px',
+  captchaImg: 'width:100%;height:auto;border:1px solid #eee',
+  refreshBtn:
+    'padding:10px 8px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;flex:1;white-space:nowrap;margin-left:10px',
+  input:
+    'width:100%;padding:14px 16px;margin-bottom:15px;box-sizing:border-box;border:2px solid #e8ecf4;border-radius:10px;font-size:15px',
+  confirmBtn: 'width:100%;padding:10px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer',
+  loading: 'background:#6c757d;cursor:not-allowed',
+}
+
+/**
+ * 显示图形图形验证码
+ * @param param0
+ */
+const genCaptchaDom = ({ oauthInstance, captchaState }) => {
+  const CAPTCHA_IMG_ID = 'captcha-image'
+
+  // 刷新图形验证码函数
+  const refreshCaptcha = async () => {
+    try {
+      const result = await oauthInstance.createCaptchaData({ state: captchaState.state })
+      captchaState = { ...captchaState, captchaData: result.data, token: result.token }
+      ;(document.getElementById(CAPTCHA_IMG_ID) as HTMLImageElement).src = result.data
+    } catch (error) {
+      console.error('刷新图形验证码失败', error)
+    }
+  }
+
+  // 创建元素并设置样式
+  const createElement = (tag: string, styles?: string, text?: string) => {
+    const el = document.createElement(tag)
+    if (styles) el.style.cssText = styles
+    if (text) el.textContent = text
+    return el
+  }
+
+  // 创建遮罩层和弹窗
+  const overlay = createElement('div', CAPTCHA_STYLES.overlay)
+  const modal = createElement('div', CAPTCHA_STYLES.modal)
+
+  // 添加提示文字
+  modal.appendChild(createElement('p', CAPTCHA_STYLES.prompt, '请输入你看到的字符：'))
+
+  // 图形验证码区域
+  const captchaWrap = createElement('div', CAPTCHA_STYLES.captchaWrap)
+  const captchaImg = createElement('img', CAPTCHA_STYLES.captchaImg) as HTMLImageElement
+  captchaImg.id = CAPTCHA_IMG_ID
+  captchaImg.src = captchaState.captchaData
+  captchaWrap.appendChild(captchaImg)
+
+  // 刷新按钮
+  const refreshBtn = createElement('button', CAPTCHA_STYLES.refreshBtn, '刷新') as HTMLButtonElement
+  refreshBtn.onclick = debounce(async () => {
+    refreshBtn.textContent = '加载中...'
+    refreshBtn.disabled = true
+    refreshBtn.style.cssText = `${CAPTCHA_STYLES.refreshBtn};${CAPTCHA_STYLES.loading}`
+
+    try {
+      await refreshCaptcha()
+    } finally {
+      refreshBtn.textContent = '刷新'
+      refreshBtn.disabled = false
+      refreshBtn.style.cssText = CAPTCHA_STYLES.refreshBtn
+    }
+  }, 500)
+  captchaWrap.appendChild(refreshBtn)
+  modal.appendChild(captchaWrap)
+
+  // 输入框
+  const input = createElement('input', CAPTCHA_STYLES.input) as HTMLInputElement
+  input.type = 'text'
+  input.placeholder = '输入字符'
+  input.maxLength = 4
+  modal.appendChild(input)
+
+  // 错误提示元素
+  const errorMsg = createElement(
+    'div',
+    'color:#dc3545;font-size:12px;margin-bottom:10px;display:none;padding:8px;background:#f8d7da;border:1px solid #f5c6cb;border-radius:4px',
+  )
+  modal.appendChild(errorMsg)
+
+  // 显示错误提示
+  const showError = (message: string) => {
+    errorMsg.textContent = message
+    errorMsg.style.display = 'block'
+  }
+
+  // 确定按钮
+  const confirmBtn = createElement('button', CAPTCHA_STYLES.confirmBtn, '确定') as HTMLButtonElement
+  confirmBtn.onclick = debounce(async () => {
+    const inputValue = input.value.trim()
+    if (!inputValue) {
+      showError('请输入字符')
+      return
+    }
+
+    // 隐藏之前的错误提示
+    errorMsg.style.display = 'none'
+
+    confirmBtn.textContent = '验证中...'
+    confirmBtn.disabled = true
+    confirmBtn.style.cssText = `${CAPTCHA_STYLES.confirmBtn};${CAPTCHA_STYLES.loading}`
+
+    try {
+      const verifyResult = await oauthInstance.verifyCaptchaData({
+        token: captchaState.token,
+        key: inputValue,
+      })
+      eventBus.fire(CAPTCHA_EVENT.RESOLVE_CAPTCHA_DATA, verifyResult)
+      console.log('图形验证码校验成功')
+      document.body.removeChild(overlay)
+      document.body.removeChild(modal)
+    } catch (error) {
+      console.error('图形验证码校验失败', error)
+      // 根据错误类型显示不同的错误提示
+      const errorMessage = error.error_description || '图形验证码校验失败'
+      showError(errorMessage)
+
+      // 清空输入框并刷新图形验证码
+      input.value = ''
+      input.focus()
+      await refreshCaptcha()
+    } finally {
+      confirmBtn.textContent = '确定'
+      confirmBtn.disabled = false
+      confirmBtn.style.cssText = CAPTCHA_STYLES.confirmBtn
+    }
+  }, 500)
+  modal.appendChild(confirmBtn)
+
+  // 插入页面
+  document.body.appendChild(overlay)
+  document.body.appendChild(modal)
+}
+
+export const openURIWithCallback = async (url: string, oauthInstance?: Auth): Promise<CaptchaToken> => {
+  // 解析URL中的图形验证码参数
+  const { captchaData, state, token } = parseCaptcha(url)
+
+  genCaptchaDom({ oauthInstance, captchaState: { captchaData, state, token } })
+
+  // 监听图形验证码校验结果
+  return new Promise((resolve) => {
+    console.log('等待图形验证码校验结果...')
+    eventBus.on(CAPTCHA_EVENT.RESOLVE_CAPTCHA_DATA, (res) => {
+      // auth.verifyCaptchaData的校验结果
+      resolve(res?.data)
+    })
+  })
+}

package/src/captcha/captcha.ts

@@ -2,17 +2,20 @@ import { ApiUrls, ErrorType } from '../auth/consts'
 import { SimpleStorage, RequestFunction } from '../oauth2client/interface'
 import { AuthClientRequestOptions } from '../oauth2client/models'
 import { defaultStorage } from '../oauth2client/oauth2client'
-import { isInMpWebView, isMp } from '../utils/mp'
-import MyURLSearchParams from '../utils/urlSearchParams'
+import { isMp } from '../utils/mp'
 import { SDKAdapterInterface } from '@cloudbase/adapter-interface'
+import { openURIWithCallback } from './captcha-dom'
+import { Auth } from '../auth/apis'
 
 export interface CaptchaOptions {
+  env: string;
   clientId: string
   request: RequestFunction
   storage: SimpleStorage
   // 打开网页并通过URL回调获取 CaptchaToken，针对不通的平台，该函数可以自定义实现, 默认集成浏览器端认证
   openURIWithCallback?: OpenURIWithCallbackFuction
   adapter?: SDKAdapterInterface & { isMatch?: () => boolean }
+  oauthInstance?: Auth
 }
 
 type OpenURIWithCallbackFuction = (url: string) => Promise<CaptchaToken>
@@ -50,7 +53,7 @@ export class Captcha {
     }
 
     this.config = opts
-    this.tokenSectionName = `captcha_${opts.clientId}`
+    this.tokenSectionName = `captcha_${opts.clientId || opts.env}`
   }
 
   public isMatch() {
@@ -89,75 +92,9 @@ export class Captcha {
   }
 
   private getDefaultOpenURIWithCallback(): OpenURIWithCallbackFuction {
-    if (!this.isMatch() && !isInMpWebView()) {
-      if (window.location.search.indexOf('__captcha') > 0) {
-        document.body.style.display = 'none'
-      }
-      if (document.getElementById('captcha_panel_wrap') === null) {
-        const elementDiv = document.createElement('div')
-        elementDiv.style.cssText =          'background-color: rgba(0, 0, 0, 0.7);position: fixed;left: 0px;right: 0px;top: 0px;bottom: 0px;padding: 9vw 0 0 0;display: none;z-index:100;'
-        elementDiv.setAttribute('id', 'captcha_panel_wrap')
-        setTimeout(() => {
-          document.body.appendChild(elementDiv)
-        }, 0)
-      }
-    }
-    return this.defaultOpenURIWithCallback
+    return (url: string) => openURIWithCallback(url, this.config.oauthInstance)
   }
 
-  /**
-   * 默认通过浏览器打开网页并获取回调
-   */
-  private async defaultOpenURIWithCallback(
-    url: string,
-    opts?: { width?: string; height?: string },
-  ): Promise<CaptchaToken> {
-    const { width = '355px', height = '355px' } = opts || {}
-
-    const matched = url.match(/^(data:.*)$/)
-    if (matched) {
-      return Promise.reject({
-        error: ErrorType.UNIMPLEMENTED,
-        error_description: 'need to impl captcha data',
-      })
-    }
-
-    const target = document.getElementById('captcha_panel_wrap')
-    const iframe = document.createElement('iframe')
-    target.innerHTML = ''
-
-    iframe.setAttribute('src', url)
-    iframe.setAttribute('id', 'review-panel-iframe')
-    iframe.style.cssText = `min-width:${width};display:block;height:${height};margin:0 auto;background-color: rgb(255, 255, 255);border: none;`
-    target.appendChild(iframe)
-    target.style.display = 'block'
-    return new Promise<CaptchaToken>((resolve, reject) => {
-      iframe.onload = function () {
-        try {
-          const windowLocation = window.location
-          const iframeLocation = iframe.contentWindow.location
-          if (iframeLocation.host + iframeLocation.pathname === windowLocation.host + windowLocation.pathname) {
-            target.style.display = 'none'
-            const iframeUrlParams = new MyURLSearchParams(iframeLocation.search)
-            const captchToken = iframeUrlParams.get('captcha_token')
-            if (captchToken) {
-              return resolve({
-                captcha_token: captchToken,
-                expires_in: Number(iframeUrlParams.get('expires_in')),
-              })
-            }
-            return reject({
-              error: iframeUrlParams.get('error'),
-              error_description: iframeUrlParams.get('error_description'),
-            })
-          }
-          target.style.display = 'block'
-        } catch (error) {
-          target.style.display = 'block'
-        }
-      }
-    })
-  }
   /**
    * getCaptchaToken 获取captchaToken
    */
@@ -169,53 +106,26 @@ export class Captcha {
         return captchaToken
       }
     }
-    let captchaTokenResp: {
-      url?: string
-      captcha_token?: string
-      expires_in?: number
-    }
-    if (!this.isMatch() && !isInMpWebView()) {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      const redirect_uri = `${window.location.origin + window.location.pathname}?__captcha=on`
-      captchaTokenResp = await this.config.request<GetCaptchaResponse>(ApiUrls.GET_CAPTCHA_URL, {
-        method: 'POST',
-        body: {
-          client_id: this.config.clientId,
-          redirect_uri,
-          state,
-        },
-        withCredentials: false,
-      })
-      if (captchaTokenResp.captcha_token) {
-        const captchaToken = {
-          captcha_token: captchaTokenResp.captcha_token,
-          expires_in: captchaTokenResp.expires_in,
-        }
-        this.saveCaptchaToken(captchaToken)
-        return captchaTokenResp.captcha_token
-      }
-    } else {
-      /**
+
+    /**
        * https://iwiki.woa.com/p/4010699417
        */
-      const captchaDataResp = await this.config.request<{
-        data: string
-        type: 'image'
-        token: string
-        expires_in: number
-      }>(ApiUrls.CAPTCHA_DATA_URL, {
-        method: 'POST',
-        body: {
-          state,
-          redirect_uri: '',
-        },
-        withCredentials: false,
-      })
-      captchaTokenResp = {
-        url: `${captchaDataResp.data}?state=${encodeURIComponent(state)}&token=${encodeURIComponent(captchaDataResp.token,)}`,
-      }
-    }
-    const captchaToken = await this.config.openURIWithCallback(captchaTokenResp.url)
+    const captchaDataResp = await this.config.request<{
+      data: string
+      type: 'image'
+      token: string
+      expires_in: number
+    }>(ApiUrls.CAPTCHA_DATA_URL, {
+      method: 'POST',
+      body: {
+        state,
+        redirect_uri: '',
+      },
+      withCredentials: false,
+    })
+    const captchaTokenUrl = `${captchaDataResp.data}?state=${encodeURIComponent(state)}&token=${encodeURIComponent(captchaDataResp.token,)}`
+
+    const captchaToken = await this.config.openURIWithCallback(captchaTokenUrl)
     this.saveCaptchaToken(captchaToken)
     return captchaToken.captcha_token
   }

package/src/index.ts

@@ -1,20 +1,44 @@
 import { OAuth2Client } from './oauth2client/oauth2client'
 import { AuthOptions, Auth } from './auth/apis'
 import { AUTH_API_PREFIX } from './auth/consts'
+import { Credentials } from './oauth2client/models'
 export { Auth } from './auth/apis'
-export { AUTH_API_PREFIX } from './auth/consts'
+export { AUTH_API_PREFIX, OAUTH_TYPE } from './auth/consts'
+export { AuthError } from './auth/auth-error'
 export * as authModels from './auth/models'
-export type { ProviderProfile } from './auth/models'
+export type { ProviderProfile, UserInfo, ModifyUserBasicInfoRequest } from './auth/models'
 export type { Credentials, OAuth2ClientOptions, ResponseError, AuthClientRequestOptions } from './oauth2client/models'
 export type { AuthOptions } from './auth/apis'
+export { weappJwtDecodeAll } from './utils/base64'
+export { LOGIN_STATE_CHANGED_TYPE, EVENTS, AUTH_STATE_CHANGED_TYPE } from './auth/consts'
 
 export class CloudbaseOAuth {
   public oauth2client: OAuth2Client
   public authApi: Auth
+  private detectSessionInUrl: boolean
 
   constructor(authOptions: AuthOptions) {
     // eslint-disable-next-line max-len
-    const { apiOrigin, apiPath = AUTH_API_PREFIX, clientId, env, storage, request, baseRequest, anonymousSignInFunc, wxCloud, adapter, onCredentialsError, headers, i18n, useWxCloud } = authOptions
+    const {
+      apiOrigin,
+      apiPath = AUTH_API_PREFIX,
+      clientId,
+      env,
+      storage,
+      request,
+      baseRequest,
+      anonymousSignInFunc,
+      wxCloud,
+      adapter,
+      onCredentialsError,
+      headers,
+      i18n,
+      useWxCloud,
+      eventBus,
+      detectSessionInUrl,
+      debug,
+    } = authOptions
+    this.detectSessionInUrl = detectSessionInUrl ?? false
     this.oauth2client = new OAuth2Client({
       apiOrigin,
       apiPath,
@@ -28,6 +52,8 @@ export class CloudbaseOAuth {
       headers: headers || {},
       i18n,
       useWxCloud,
+      eventBus,
+      debug,
     })
 
     this.authApi = new Auth({
@@ -37,5 +63,27 @@ export class CloudbaseOAuth {
       request: request ? this.oauth2client.request.bind(this.oauth2client) : undefined,
       adapter,
     })
+
+    // Set the getInitialSession callback after Auth is created
+    // This allows Auth.getInitialSession to handle URL detection and OAuth verification
+    if (detectSessionInUrl) {
+      this.oauth2client.setGetInitialSession(this.authApi.getInitialSession.bind(this.authApi))
+    }
+    // Note: Do NOT auto-call initialize() here.
+    // Upper layer (packages/auth) should call initializeSession() after setting up onInitialSessionObtained callback
+  }
+
+  /**
+   * Setup the onInitialSessionObtained callback and trigger initialization.
+   * This should be called by upper layer (packages/auth) after creating Auth instance.
+   * @param onUserObtained Callback to handle user info storage after session is obtained
+   */
+  public initializeSession(onUserObtained?: (data: { session: Credentials; user?: any }) => void | Promise<void>): void {
+    if (!this.detectSessionInUrl) {
+      return
+    }
+    this.oauth2client.setOnInitialSessionObtained(onUserObtained)
+    // Pass callback directly to initialize() to ensure it's set before initialization starts
+    this.oauth2client.initialize()
   }
 }

package/src/oauth2client/interface.ts

@@ -15,7 +15,7 @@ export abstract class AuthClient {
   /**
    * Sets the auth credentials.
    */
-  abstract setCredentials(credentials?: Credentials): void;
+  abstract setCredentials(credentials?: Credentials): Promise<void>;
 
   /**
    * get the current accessToken from AuthClient, you can use this to detect login status

package/src/oauth2client/models.ts

@@ -46,6 +46,12 @@ export interface AuthClientRequestOptions extends RequestOptions {
   withBasicAuth?: boolean;
   retry?: number;
   useWxCloud?: boolean;
+  /**
+   * Custom getCredentials function for this request.
+   * When provided, uses this function instead of the default getCredentials() call
+   * to avoid potential deadlocks during initialization.
+   */
+  getCredentials?: () => Credentials | Promise<Credentials | null> | null;
 
   [key: string]: any;
 }
@@ -72,4 +78,26 @@ export interface OAuth2ClientOptions {
   onCredentialsError?: AuthOptions['onCredentialsError']
   i18n?: ICloudbaseConfig['i18n']
   useWxCloud?: boolean
+  eventBus?: any
+  /**
+   * Enable debug logging
+   */
+  debug?: boolean
+  /**
+   * Callback function to get initial session (e.g., from OAuth callback in URL).
+   * Called by OAuth2Client.initialize() if set.
+   * The callback should handle URL detection, OAuth verification, and return credentials.
+   * Returns { data: { session: Credentials, user?: any }, error: null } on success,
+   * or { data: null, error: Error } on failure.
+   */
+  getInitialSession?: () => Promise<{
+    data: { session: Credentials; user?: any } | null
+    error: Error | null
+  }>
+  /**
+   * Callback invoked after initial session is obtained and stored.
+   * Used to let upper layer (e.g., packages/auth) handle user info storage.
+   * Called with session and user data.
+   */
+  onInitialSessionObtained?: (data: { session: Credentials; user?: any }) => void | Promise<void>
 }