私はプレーンな Leaflet、HTML、CSS、JS を使用してチラシ アプリを稼働させています。現在、このフォルダーは、index.html ファイル、main.js ファイル、およびすべてのデータを含むフォルダーにのみ存在します。データはgeojsonデータです。最終的には、作業中のデータをオンラインに公開するときにユーザーがアクセスできないようにしたいと考えています。この問題をどのように解決すべきかについての全体像、概要を探しています。
MongoDB のようなものを使用してデータを保存することを検討していますが、Leaflet を使用してこれを正確に行う方法に関する前例やチュートリアルはオンライン上にありません。また、コードに多くの変更を加え、アプリに Express と Node(?) を追加する必要があるようです。アイデアや例へのリンクをいただければ幸いです。
P粉5059175902024-02-26 00:38:30
MongoDB ではデータが追加的に保護されないため、MongoDB について間違った方向に考えています。
プレーンな HTML Web ページを提供することはできません。HTML ソース コードには誰でもアクセスできるため、データは非表示になります。
必要なのは、OAuth をサポートするサードパーティのプロバイダーです。例:
以下の 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("/");
戻る;
}
}
}