Как быстро запустить VK Mini Apps на React: гайд для новичков

			npx create-react-app vk-mini-app --template typescript
cd  vk-mini-app
npm start
		

			npm install @vkontakte/vk-bridge
npm install @vkontakte/vkui @vkontakte/icons
		

			"scripts": {
    "start": "PORT=10888 HTTPS=true react-scripts start"
  },
		

			bridge.send('VKWebAppInit')
		

			export const useGetVkUserInfo = () => {
  const dispatch = useDispatch()
  return useCallback(() => {
    (async function () {
      try {
        const user = await bridge.send('VKWebAppGetUserInfo')
        dispatch(profileSliceActions.setVKWebAppGetUserInfo(user))
      } catch (e) {}
    })()
  }, [dispatch])
}
		

			function* authSignVkBridgeSaga() {
  try {
    const userParams = yield* call(async () => {
      return await bridge.send('VKWebAppGetLaunchParams')
    })
    const ourServerResponse = yield* call(PROFILE_API.authSignVkBridgeAPI, userParams)
    const token = ourServerResponse.token
...
		

			/** Верифицирует параметры запуска. */
export function verifyVkBridgeParams(
  searchOrParsedUrlQuery: string | Record
) {
  const secretKey = process.env.VK_SECRET_MINI_APP;
  let sign;
  const queryParams = [];

  const processQueryParam = (key: string, value: unknown) => {
    if (key === "sign") {
      sign = value;
    } else if (key.startsWith("vk_")) {
      queryParams.push({ key, value });
    }
  };

  if (typeof searchOrParsedUrlQuery === "string") {
    // Если строка начинается с вопроса (когда передан window.location.search),
    // его необходимо удалить.
    const formattedSearch = searchOrParsedUrlQuery.startsWith("?")
      ? searchOrParsedUrlQuery.slice(1)
      : searchOrParsedUrlQuery;

    // Пытаемся разобрать строку как query-параметр.
    for (const param of formattedSearch.split("&")) {
      const [key, value] = param.split("=");
      processQueryParam(key, value);
    }
  } else {
    for (const key of Object.keys(searchOrParsedUrlQuery)) {
      const value = searchOrParsedUrlQuery[key];
      processQueryParam(key, value);
    }
  }
  // Обрабатываем исключительный случай, когда не найдена ни подпись в параметрах,
  // ни один параметр, начинающийся с "vk_", чтобы избежать
  // излишней нагрузки, образующейся в процессе работы дальнейшего кода.
  if (!sign || queryParams.length === 0) {
    return false;
  }
  // Снова создаём запрос в виде строки из уже отфильтрованных параметров.
  const queryString = queryParams
    // Сортируем ключи в порядке возрастания.
    .sort((a, b) => a.key.localeCompare(b.key))
    // Воссоздаём новый запрос в виде строки.
    .reduce((acc, { key, value }, idx) => {
      return (
        acc + (idx === 0 ? "" : "&") + `${key}=${encodeURIComponent(value)}`
      );
    }, "");

  // Создаём хеш получившейся строки на основе секретного ключа.
  const paramsHash = crypto
    .createHmac("sha256", secretKey)
    .update(queryString)
    .digest()
    .toString("base64")
    .replace(/\+/g, "-")
    .replace(/\//g, "_")
    .replace(/=$/, "");

  return paramsHash === sign;
}