リーフレットのデータはどこに保存されますか

Question

私はプレーンな Leaflet、HTML、CSS、JS を使用してチラシ アプリを稼働させています。現在、このフォルダーは、index.html ファイル、main.js ファイル、およびすべてのデータを含むフォルダーにのみ存在します。データはgeojsonデータです。最終的には、作業中のデータをオンラインに公開するときにユーザーがアクセスできないようにしたいと考えています。この問題をどのように解決すべきかについての全体像、概要を探しています。

MongoDB のようなものを使用してデータを保存することを検討していますが、Leaflet を使用してこれを正確に行う方法に関する前例やチュートリアルはオンライン上にありません。また、コードに多くの変更を加え、アプリに Express と Node(?) を追加する必要があるようです。アイデアや例へのリンクをいただければ幸いです。

Answer 1

MongoDB ではデータが追加的に保護されないため、MongoDB について間違った方向に考えています。

プレーンな HTML Web ページを提供することはできません。HTML ソース コードには誰でもアクセスできるため、データは非表示になります。

必要なのは、OAuth をサポートするサードパーティのプロバイダーです。例:

• Apple でサインイン
• Google OAuth アクセス
• Amazonでサインイン
• HUAWEIアカウントサービス

以下の Huawei のドキュメントに示されているように、JWT が発行されます。その後、サーバー側でトークンを検証し、データを提供するかどうかを決定する必要があります。

それでも、許可された顧客があなたのデータを取得して配布する可能性があります。

私がこのことを知っているのは、趣味の開発者として 2 つの Web ゲームを作成し、ユーザーの認証にこれら 4 つのサービス (他にもあります) を使用しているからです。

これは、Huawei Account Kit を検証するためのサーバー側 Java コード サンプルです:

private void handleHuaweiAuth(HttpServletRequest httpReq, HttpServletResponse httpResp) throws ServletException, IOException {
    文字列エラー = httpReq.getParameter("エラー");
    文字列 errorDescription = httpReq.getParameter("error_description");
    文字列コード = httpReq.getParameter("コード");
    文字列状態 = httpReq.getParameter("状態");

    // ソルトのハッシュと現在の月の名前を CSRF 保護として使用します
    String month = md5("ここに秘密を入れてください" Calendar.getInstance().getDisplayName(Calendar.MONTH, Calendar.LONG, Locale.ENGLISH));

    if (エラー != null) {
        throw new ServletException(error ": " errorDescription);
        
    } else if (コード != null && month.equals(state)) {
        MultiMap postParams = new MultiMap();
        postParams.put("コード", コード);
        postParams.put("client_id", HUAWEI_ID);
        postParams.put("client_secret", HUAWEI_SECRET);
        postParams.put("redirect_uri", String.format(HUAWEI_REDIRECT_URI, mLanguage));
        postParams.put("grant_type", "authorization_code");
        
        試す {
            文字列 tokenStr = mHttpClient.POST(HUAWEI_TOKEN_URL)
                .headers(httpフィールド ->
                {
                    httpFields.add(new HttpField(HttpHeader.ACCEPT, APPLICATION_JSON));
                    httpFields.add(new HttpField(HttpHeader.CONTENT_TYPE, APPLICATION_URLENCODED));
                })
                .body(new StringRequestContent(UrlEncoded.encode(postParams, StandardCharsets.UTF_8, false)))
                .send().getContentAsString();
            LOG.info("handleHuaweiAuth tokenStr = {}", tokenStr);
            Map tokenMap = (Map) new JSON().fromJSON(tokenStr);
            //String accessToken = tokenMap.get("access_token");
            //StringfreshToken = tokenMap.get("refresh_token");

            // 注: コードは 1 回のみ有効です。
            // ユーザーがこのページをリロードすると、次が返されます:
            // {"sub_error":20156,"error_description":"コードが 2 回使用されました","error":1101}
            // トークンを解析すると、以下で NPE がキャッチされ、フロント ページにリダイレクトされます。

            文字列 idToken = tokenMap.get("id_token");
            Map idMap = parseJwt(idToken);
            文字列 sid = idMap.get("sub");
            文字列写真 = idMap.get("写真");
            指定された文字列 = idMap.get("指定された名前");
            文字列ファミリー = idMap.get("family_name");

            printGameApp(httpReq、httpResp、HUAWEI、sid、与えられた、家族、写真);
            戻る;
        catch (InterruptedException | TimeoutException | ExecutionException | NullPointerException ex) {
            LOG.warn("handleHuaweiAuth"、例);
            // フロントページにリダイレクトします
            httpResp.sendRedirect("/");
            戻る;
        }
    }
}