@alfabit/keycloak 0.0.1

package/src/api/wallet/types-ext.ts

@@ -0,0 +1,59 @@
+import type { WalletsResponse } from "./swagger-types";
+
+export interface WalletExt {
+  total: string;
+  frozen: number;
+  broker_balance_raw: string;
+  brokerBalanceFormatted: string;
+  frozenFormatted: string;
+  totalFormatted: string;
+  rate: number;
+  priceUsdt: number | string;
+  is_deposit_active: boolean;
+  is_withdraw_active: boolean;
+  is_internal_transfer_active: boolean;
+  is_coin_api_deposit_allowed: boolean;
+  is_invoice_active: boolean;
+}
+
+export interface IWallet extends WalletExt, WalletsResponse {}
+
+export interface IResponseGetAssetsMetaDataPublic {
+  address: string;
+  bchCode: string;
+  bchFullName: string;
+  chainIcon: string;
+  chainId: number;
+  changePrice24Percent: number;
+  code: string;
+  decimals: number;
+  imgUrl: string;
+  isNative: boolean;
+  minDeposit: number;
+  name: string;
+  netFeeButch: number;
+  netFeeOne: number;
+  price: number;
+  regexp: RegExp;
+  symbol: string;
+  uniqueCurrencyCode: string;
+  uniqueCurrencyName: string;
+}
+
+export interface IResponseGetProfilePublicAvailableExchangeSymbols {
+  mainSymbol: string;
+  minValue: string;
+  minorSymbol: string;
+  price: string;
+  priceOut: string;
+  priceTo: string;
+  step: string;
+  symbol: string;
+  limit_price_step: string;
+  price_step: string;
+  base_asset_precision: string;
+  quote_asset_precision: string;
+  min_value_minor?: string;
+  maxValue?: string;
+  max_value_minor?: string;
+}

package/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './use-keycloak';

package/src/composables/use-keycloak.ts

@@ -0,0 +1,455 @@
+import Keycloak, { type KeycloakInitOptions } from 'keycloak-js';
+import { inject, reactive, readonly, type Ref, ref } from 'vue';
+import { postWebLogin } from '../api/wallet/endpoints';
+import { AppNameEnum, APP_NAME, IS_TELEGRAM_MINI_APP, KEYCLOAK_LOGIN_REQUIRED, OPENID_CLIENT_ID, OPENID_REALM, OPENID_URL } from '@alfabit/constants';
+
+export type TIdpHint = 'email' | 'google' | 'apple';
+
+export interface IUseKeycloak {
+  login(email?: string, redirectUri?: string): void;
+  loginWithGoogle(redirectUri?: string): void;
+  loginWithApple(redirectUri?: string): void;
+  loginWithTelegram(redirectUri?: string): void;
+  loginPopup(idpHint: TIdpHint, redirectUri?: string): void;
+  logout(redirectUri?: string): void;
+  register(email?: string, redirectUri?: string): void;
+  getToken(): string | undefined;
+  isAtExp(): boolean;
+  isRtExp(): boolean;
+
+  readonly isAuth: Ref<boolean>;
+  readonly checkAuth: Ref<boolean>;
+  readonly keycloak: Ref<Keycloak | null>;
+  readonly isInitialized: Ref<boolean>;
+  readonly keycloakUserData: Ref<Keycloak.KeycloakTokenParsed | null>;
+}
+
+export const TOKEN_NAME = 'token';
+export const REFRESH_TOKEN_NAME = 'refresh-token';
+export const ID_TOKEN_NAME = 'id-token';
+
+const keycloak = ref<Keycloak | null>(null);
+
+const isAuth = ref(false);
+const checkAuth = ref(false);
+const keycloakUserData = ref<Keycloak.KeycloakTokenParsed | null>(null);
+
+console.log({
+  location: window.location,
+});
+
+const isInitialized = ref(false);
+
+const getUrl = (dontChangeRedirectUri = false, keycloakRedirectUriIsLogout: string | undefined = undefined): string => {
+  const url = new URL(window.location.href);
+  const searchParams = new URLSearchParams(window.location.search);
+
+  console.log('getUrl', {
+    dontChangeRedirectUri,
+    keycloakRedirectUriIsLogout,
+    redirect_uri: searchParams.get('redirect_uri'),
+  });
+
+  if (searchParams.has('redirect_uri')) {
+    const redirectUri = searchParams.get('redirect_uri');
+    if (!!redirectUri) return redirectUri;
+  }
+
+  // если в роуте в meta есть параметр keycloakRedirectUriIsLogout - возвращаем его
+  if (!!keycloakRedirectUriIsLogout && typeof keycloakRedirectUriIsLogout === 'string') return keycloakRedirectUriIsLogout;
+
+  // если в $route.meta (который передаем из родительского приложения) есть параметр dontChangeRedirectUri - то из адреса ну нужно удалять или добавлять /user
+  // если нет - то ничего не делать
+
+  // if (!dontChangeRedirectUri) {
+
+  //   const path = url.pathname;
+  //   // Проверяем: путь начинается с /две латинские буквы/ и далее НЕ идёт user/
+  //   const match = path.match(/^\/([a-zA-Z]{2})(\/(?!user\/))/);
+  //   if (match) {
+
+  //     console.log('добавляем user')
+
+  //     // Вставляем 'user' после двухбуквенного сегмента
+  //     url.pathname = path.replace(/^\/([a-zA-Z]{2})\//, '/$1/user/');
+  //     // Если хочешь обновить текущую страницу:
+  //     // window.location.href = url.toString();
+  //   } else {
+
+  //     console.log('удаляем user')
+
+  //     url.pathname = path.replace(/^\/([a-zA-Z]{2})\/user\//, '/$1/');
+  //   }
+  // }
+  return url.toString();
+};
+
+interface IGetAuthMethodsParams {
+  dontChangeRedirectUri?: Ref<boolean>;
+  keycloakRedirectUriIsLogout?: Ref<string | undefined>;
+}
+
+function isMobile() {
+  return /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+}
+
+export const getAuthMethods = ({ dontChangeRedirectUri = ref(false), keycloakRedirectUriIsLogout = ref(undefined) }: IGetAuthMethodsParams) => {
+  const methods = reactive({
+    async loginPopup(idpHint: TIdpHint, redirectUri?: string) {
+      redirectUri = redirectUri ?? getUrl(dontChangeRedirectUri.value, keycloakRedirectUriIsLogout.value);
+
+      console.log({
+        isMobile: isMobile(),
+        idpHint,
+        redirectUri,
+      });
+
+      if (isMobile()) {
+        switch (idpHint) {
+          case 'google':
+            methods.loginWithGoogle(redirectUri);
+            break;
+          case 'apple':
+            methods.loginWithApple(redirectUri);
+            break;
+          default:
+            methods.login(undefined, redirectUri);
+        }
+        return;
+      }
+
+      let loginUrl = await keycloak.value?.createLoginUrl({
+        idpHint: idpHint === 'email' ? '' : idpHint,
+        redirectUri,
+      });
+
+      let loginWindow = window.open((loginUrl ?? '') + (idpHint === 'google' ? '&prompt=select_account' : ''), 'Login with Google', 'width=500,height=600');
+
+      const messageListener = async (event: MessageEvent) => {
+        console.log('messageListener', event.data);
+
+        if (event.data.type === 'keycloak-auth-success' && event.data.message === 'success') {
+          window.removeEventListener('message', messageListener);
+          //if (!loginWindow || !loginWindow.closed) {
+          loginWindow?.close();
+
+          console.log('window close', {
+            loginWindow,
+            closed: loginWindow?.closed,
+          });
+
+          //}
+          setTimeout(() => {
+            window.location.reload();
+            console.log('window reload');
+          }, 200);
+        }
+
+        // если в popup пришло сообщение о том, что нужно сменить idpHint, то меняем его и открываем новое окно
+        if (event.data.type === 'keycloak-auth-change') {
+          loginWindow?.close();
+          idpHint = event.data.message as TIdpHint;
+          loginUrl = await keycloak.value?.createLoginUrl({
+            idpHint,
+            redirectUri,
+          });
+          loginWindow = window.open((loginUrl ?? '') + (idpHint === 'google' ? '&prompt=select_account' : ''), 'Login with Google', 'width=500,height=600');
+        }
+      };
+
+      window.addEventListener('message', messageListener);
+    },
+
+    login(email?: string, redirectUri?: string) {
+      if (keycloak.value) {
+        keycloak.value.login({
+          redirectUri: redirectUri ?? getUrl(dontChangeRedirectUri.value, keycloakRedirectUriIsLogout.value),
+          loginHint: email,
+        });
+      } else {
+        console.warn('Keycloak not defined! #login');
+      }
+    },
+    logout(redirectUri?: string) {
+      if (keycloak.value) {
+        clearTokens();
+        setTimeout(() => {
+          keycloak.value &&
+            keycloak.value.logout({
+              redirectUri: redirectUri ?? getUrl(dontChangeRedirectUri.value, keycloakRedirectUriIsLogout.value),
+            });
+        }, 100);
+      } else {
+        console.warn('Keycloak not defined! #logout');
+      }
+    },
+    register(email?: string, redirectUri?: string) {
+      if (keycloak.value) {
+        keycloak.value.register({
+          redirectUri: redirectUri ?? getUrl(dontChangeRedirectUri.value),
+          loginHint: email,
+        });
+      } else {
+        console.warn('Keycloak not defined! #register');
+      }
+    },
+    loginWithGoogle(redirectUri?: string) {
+      if (keycloak.value) {
+        keycloak.value
+          ?.createLoginUrl({
+            idpHint: 'google',
+            redirectUri: redirectUri ?? getUrl(dontChangeRedirectUri.value),
+          })
+          .then((loginUrl) => (window.location.href = `${loginUrl}&prompt=select_account`));
+      } else {
+        console.warn('Keycloak not defined! #loginWithGoogle');
+      }
+    },
+    loginWithApple(redirectUri?: string) {
+      if (keycloak.value) {
+        keycloak.value.login({
+          redirectUri: redirectUri ?? getUrl(dontChangeRedirectUri.value),
+          idpHint: 'apple',
+        });
+      } else {
+        console.warn('Keycloak not defined! #loginWithApple');
+      }
+    },
+    loginWithTelegram(redirectUri?: string) {
+      if (keycloak.value) {
+        keycloak.value.login({
+          redirectUri: redirectUri ?? getUrl(dontChangeRedirectUri.value),
+          idpHint: 'telegram',
+        });
+      } else {
+        console.warn('Keycloak not defined! #loginWithTelegram');
+      }
+    },
+  });
+  return methods;
+};
+
+function setTokens() {
+  if (!keycloak.value || typeof window === 'undefined') return;
+  !!keycloak.value?.token && localStorage.setItem(TOKEN_NAME, keycloak.value.token);
+  !!keycloak.value?.refreshToken && localStorage.setItem(REFRESH_TOKEN_NAME, keycloak.value.refreshToken);
+  !!keycloak.value?.idToken && localStorage.setItem(ID_TOKEN_NAME, keycloak.value.idToken);
+
+  !!keycloak.value?.token && sessionStorage.setItem(TOKEN_NAME, keycloak.value.token);
+  !!keycloak.value?.refreshToken && sessionStorage.setItem(REFRESH_TOKEN_NAME, keycloak.value.refreshToken);
+  !!keycloak.value?.idToken && sessionStorage.setItem(ID_TOKEN_NAME, keycloak.value.idToken);
+}
+
+function clearTokens() {
+  if (typeof window === 'undefined') return;
+  localStorage.removeItem(TOKEN_NAME);
+  localStorage.removeItem(REFRESH_TOKEN_NAME);
+  localStorage.removeItem(ID_TOKEN_NAME);
+  sessionStorage.removeItem(TOKEN_NAME);
+  sessionStorage.removeItem(REFRESH_TOKEN_NAME);
+  sessionStorage.removeItem(ID_TOKEN_NAME);
+}
+
+export const getToken = () => (IS_TELEGRAM_MINI_APP ? sessionStorage.getItem(TOKEN_NAME) : localStorage.getItem(TOKEN_NAME)) ?? undefined;
+
+const parseJwt = (token: unknown) => {
+  if (typeof token !== 'string') throw new Error('Invalid JWT format: #1');
+  const [headerB64, payloadB64] = token.split('.');
+  if (!headerB64 || !payloadB64) throw new Error('Invalid JWT format: #2');
+  const decodeBase64Url = (str: string) => JSON.parse(atob(str.replace(/-/g, '+').replace(/_/g, '/')));
+  const header = decodeBase64Url(headerB64);
+  const payload = decodeBase64Url(payloadB64);
+  const now = Math.floor(Date.now() / 1000);
+  const isExpired = payload.exp !== undefined && now > payload.exp;
+  return {
+    header,
+    payload,
+    isExpired,
+    expiresAt: payload.exp ? new Date(payload.exp * 1000).toISOString() : null,
+  };
+};
+
+export const isAtExp = () => {
+  if (typeof window === 'undefined') return false;
+  try {
+    return parseJwt(localStorage.getItem(TOKEN_NAME)).isExpired;
+  } catch (e) {
+    return false;
+  }
+};
+
+export const isRtExp = () => {
+  if (typeof window === 'undefined') return false;
+  try {
+    // если рт не истек, возвращаем true
+    return parseJwt(localStorage.getItem(REFRESH_TOKEN_NAME)).isExpired;
+  } catch (e) {
+    clearTokens();
+    if (e instanceof Error) {
+      console.log('checkIsPassportAuth error: ', e.message);
+    }
+    return false;
+  }
+};
+
+const isPopup = () => {
+  console.log('run isPopup');
+  // для авторизации в popup - это запускается в дочернем окне
+  try {
+    // Отправляем сообщение родителю
+    if (window.opener) {
+      console.log('window opener');
+
+      window.opener.postMessage(
+        {
+          type: 'keycloak-auth-success',
+          message: 'success',
+        },
+        '*'
+      );
+    }
+  } catch (err) {
+    console.error('Error in login-popup-redirect.html:', err);
+  }
+};
+
+let isInitKeycloak = false;
+
+export async function initKeycloak() {
+  if (!!keycloak.value || typeof window === 'undefined' || isInitKeycloak) return;
+  isInitKeycloak = true;
+
+  if (!OPENID_URL) throw new Error('Не задана переменная keycloak: url');
+  if (!OPENID_REALM) throw new Error('Не задана переменная keycloak: realm');
+  if (!OPENID_CLIENT_ID) throw new Error('Не задана переменная keycloak: clientId');
+
+  // console.log({
+  //   PUBLIC_KEYCLOAK_URL,
+  //   OPENID_REALM,
+  //   OPENID_CLIENT_ID,
+
+  //   VITE_OPENID_URL: import.meta.env?.VITE_OPENID_URL,
+  //   VITE_PUBLIC_KEYCLOAK_URL: import.meta.env?.VITE_PUBLIC_KEYCLOAK_URL,
+  //   VITE_OPENID_REALM: import.meta.env?.VITE_OPENID_REALM,
+  //   VITE_PUBLIC_KEYCLOAK_REALM: import.meta.env?.VITE_PUBLIC_KEYCLOAK_REALM,
+  //   VITE_OPENID_CLIENT_ID: import.meta.env?.VITE_OPENID_CLIENT_ID,
+  //   VITE_PUBLIC_KEYCLOAK_CLIENT_ID: import.meta.env?.VITE_PUBLIC_KEYCLOAK_CLIENT_ID,
+  // });
+
+  keycloak.value = new Keycloak({
+    url: OPENID_URL,
+    realm: OPENID_REALM,
+    clientId: OPENID_CLIENT_ID,
+  });
+
+  const isNeedAuth = !!getToken() && !isRtExp();
+
+  // window.opener - если находимся в popup (но не в passport), то 100% уже авторизованы и можно поставить login-required
+  const initOptions: KeycloakInitOptions = {
+    onLoad: KEYCLOAK_LOGIN_REQUIRED || (window.opener && APP_NAME !== AppNameEnum.PASSPORT) ? 'login-required' : isNeedAuth ? 'check-sso' : undefined, // 'none' | 'login-required' | 'check-sso', // если оставить всегда check-sso = то при разлогине, будет бесконечный редирект
+    pkceMethod: 'S256',
+    checkLoginIframe: false,
+    // enableLogging: true,
+  };
+
+  if (!isNeedAuth) {
+    clearTokens();
+  } else {
+    initOptions.token = localStorage.getItem(TOKEN_NAME) ?? undefined;
+    initOptions.refreshToken = localStorage.getItem(REFRESH_TOKEN_NAME) ?? undefined;
+    initOptions.idToken = localStorage.getItem(ID_TOKEN_NAME) ?? undefined;
+  }
+
+  console.log({
+    initOptions,
+  });
+
+  try {
+    console.log('before keycloak init');
+
+    const res = await keycloak.value.init(initOptions);
+
+    console.log('after keycloak init', {
+      res,
+    });
+
+    setTokens();
+
+    if (res) {
+      //await keycloak.value.updateToken(70);
+      setTokens();
+      isPopup();
+      keycloakUserData.value = keycloak.value?.tokenParsed ?? null;
+      isAuth.value = true;
+      try {
+        postWebLogin();
+      } catch (e) {}
+
+      //setTimeout(() => {
+      setInterval(async () => {
+        if (!keycloak.value) return;
+        const res = await keycloak.value.updateToken(70);
+        if (res) {
+          setTokens();
+          keycloakUserData.value = keycloak.value?.tokenParsed ?? null;
+          isAuth.value = true;
+          try {
+            postWebLogin();
+          } catch (e) {}
+        }
+      }, 6000);
+      //}, 60000);
+    }
+    return isAuth.value;
+  } catch (error) {
+    console.error('Ошибка Keycloak:', error);
+    isAuth.value = false;
+    return false;
+  } finally {
+    checkAuth.value = true;
+  }
+}
+
+interface IKeycliakInit {
+  keycloakInit?: Ref<Keycloak | null | undefined> | undefined;
+}
+
+export async function createKeycloakInit({ keycloakInit }: IKeycliakInit = {}) {
+  if (typeof window === 'undefined') return;
+  if (!!keycloakInit && keycloakInit?.value) {
+    keycloak.value = keycloakInit.value;
+    isAuth.value = keycloak.value?.authenticated ?? false;
+  } else {
+    await initKeycloak();
+  }
+  isInitialized.value = true;
+}
+
+// ...весь остальной код до сюда не меняется...
+
+let _keycloakInit: IUseKeycloak | null = null;
+
+export const keycloakInit = (dontChangeRedirectUri?: Ref<boolean>, keycloakRedirectUriIsLogout?: Ref<string | undefined>): IUseKeycloak => {
+  if (_keycloakInit) return _keycloakInit;
+
+  console.log('>>>>> Lazy keycloakInit called');
+
+  dontChangeRedirectUri ||= inject('dontChangeRedirectUri', ref(false));
+  keycloakRedirectUriIsLogout ||= inject('keycloakRedirectUriIsLogout', ref(undefined));
+
+  _keycloakInit = {
+    keycloak: readonly(keycloak) as Ref<Keycloak | null>,
+    isInitialized: readonly(isInitialized),
+    isAuth: readonly(isAuth),
+    checkAuth: readonly(checkAuth),
+
+    keycloakUserData,
+
+    ...getAuthMethods({ dontChangeRedirectUri, keycloakRedirectUriIsLogout }),
+    getToken,
+    isAtExp,
+    isRtExp,
+  };
+
+  return _keycloakInit;
+};

package/src/env.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly [key: `VITE_${string}`]: string | number | boolean | undefined;
+
+  readonly VITE_PUBLIC_KEYCLOAK_URL: string;
+  readonly VITE_PUBLIC_KEYCLOAK_REALM: string;
+  readonly VITE_PUBLIC_KEYCLOAK_CLIENT_ID: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './composables';
+export * from './plugins/keycloak';

package/src/plugins/keycloak.ts

@@ -0,0 +1,43 @@
+import { computed, ref, type App, type Ref } from 'vue';
+import { createKeycloakInit, getAuthMethods, keycloakInit, type IUseKeycloak } from '../composables';
+
+interface KeycloakPluginOptions {
+  dontChangeRedirectUri?: Ref<boolean>;
+  keycloakRedirectUriIsLogout?: Ref<string | undefined>;
+}
+
+let dontChangeRedirectUriInit = ref(false);
+let keycloakRedirectUriIsLogoutInit = ref<string | undefined>(undefined);
+
+export const useKeycloak = () => {
+  const keycloak = keycloakInit(ref(false), ref(undefined));
+  const auth = getAuthMethods({
+    dontChangeRedirectUri: dontChangeRedirectUriInit,
+    keycloakRedirectUriIsLogout: keycloakRedirectUriIsLogoutInit,
+  });
+
+  return {
+    ...keycloak,
+    ...auth,
+  };
+};
+
+export const createKeycloak = (options: KeycloakPluginOptions = {}) => {
+  const { dontChangeRedirectUri, keycloakRedirectUriIsLogout } = options;
+  dontChangeRedirectUriInit = computed(() => dontChangeRedirectUri?.value ?? false);
+  keycloakRedirectUriIsLogoutInit = computed(() => keycloakRedirectUriIsLogout?.value ?? undefined);
+  createKeycloakInit();
+};
+
+export const keycloakPlugin = {
+  install(app: App, options: KeycloakPluginOptions = {}) {
+    createKeycloak(options);
+    app.config.globalProperties.$keycloak = useKeycloak();
+  },
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $keycloak: IUseKeycloak;
+  }
+}

package/src/vue-i18n.d.ts

@@ -0,0 +1,9 @@
+// src/vue-i18n.d.ts
+import { ComponentCustomProperties } from "vue";
+import { VueI18n } from "vue-i18n";
+
+declare module "@vue/runtime-core" {
+  interface ComponentCustomProperties {
+    $t: VueI18n["t"];
+  }
+}

package/src/vue-shim.d.ts

@@ -0,0 +1,5 @@
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/tsconfig.app.json

@@ -0,0 +1,25 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "allowJs": true,
+    "types": [
+      "node"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "index.ts",
+    "src/composables/use-chat.ts",
+    "chatra.d.ts",
+    "types.d.ts"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": [
+      "ES2023",
+      "DOM"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    // "moduleResolution": "Node",
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "types": [
+      "vite/client"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.vue",
+  ]
+}