dqj/amipro-home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add canonical URLs, unique meta descriptions, and hreflang tags

Browse Source 
- Add canonical URL to all pages
- Fix duplicate meta descriptions across 4 pages
- Add hreflang tags for en/ja/zh-CN/x-default
- Remove llms.txt rewrite rule causing 500 error in .htaccess
This commit is contained in:
qingjie.du
2026-06-21 12:22:24 +09:00
parent e93b48345c
commit 506989660b
7 changed files with 1005 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.htaccess
View File

@@ -10,7 +10,6 @@ RewriteRule ^(.*)$ https://amipro.me/$1 [L,R=301]
# === Serve static robots.txt and sitemap.xml directly (bypass WordPress) === # === Serve static robots.txt and sitemap.xml directly (bypass WordPress) ===
RewriteRule ^robots\.txt$ /robots.txt [L] RewriteRule ^robots\.txt$ /robots.txt [L]
RewriteRule ^sitemap\.xml$ /sitemap.xml [L] RewriteRule ^sitemap\.xml$ /sitemap.xml [L]
RewriteRule ^llms\.txt$ /llms.txt [L]
# === Security Headers === # === Security Headers ===
<IfModule mod_headers.c> <IfModule mod_headers.c>

570
contextwizard_privacy_policy.html
View File

@@ -25,6 +25,58 @@
<meta name="description" content="ContextWizard privacy policy and data handling disclosures" /> <meta name="description" content="ContextWizard privacy policy and data handling disclosures" />
<!-- Canonical -->
<link rel="canonical" href="https://amipro.me/contextwizard_privacy_policy.html" />
<!-- Hreflang -->
<link rel="alternate" hreflang="en" href="https://amipro.me/contextwizard_privacy_policy.html" />
<link rel="alternate" hreflang="ja" href="https://amipro.me/contextwizard_privacy_policy.html" />
<link rel="alternate" hreflang="x-default" href="https://amipro.me/contextwizard_privacy_policy.html" />
<!-- Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:title" content="ContextWizard Privacy Policy - amiPro" />
<meta property="og:description" content="ContextWizard privacy policy and data handling disclosures" />
<meta property="og:url" content="https://amipro.me/contextwizard_privacy_policy.html" />
<meta property="og:site_name" content="amiPro" />
<meta property="og:image" content="https://amipro.me/files/og-image.png" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="ContextWizard Privacy Policy - amiPro" />
<meta name="twitter:description" content="ContextWizard privacy policy and data handling disclosures" />
<meta name="twitter:image" content="https://amipro.me/files/og-image.png" />
<!-- JSON-LD Article Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "ContextWizard Privacy Policy",
"description": "ContextWizard privacy policy and data handling disclosures",
"url": "https://amipro.me/contextwizard_privacy_policy.html",
"datePublished": "2025-11-18",
"dateModified": "2025-11-18",
"author": {
"@type": "Person",
"name": "amiPro Team"
},
"publisher": {
"@type": "Organization",
"name": "amiPro, LLC",
"url": "https://amipro.me",
"logo": {
"@type": "ImageObject",
"url": "https://amipro.me/files/og-image.png"
}
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://amipro.me/contextwizard_privacy_policy.html"
}
}
</script>
<!-- Favicon --> <!-- Favicon -->
<link rel="icon" type="image/x-icon" href="files/favicon.ico" /> <link rel="icon" type="image/x-icon" href="files/favicon.ico" />
@@ -151,9 +203,367 @@
lang_map.set('ja', '管理ポータル'); lang_map.set('ja', '管理ポータル');
i18n_messages.set('label_portal', lang_map); i18n_messages.set('label_portal', lang_map);
lang_map = new Map();
lang_map.set('en', 'ContextWizard · Privacy');
lang_map.set('ja', 'ContextWizard · プライバシー');
i18n_messages.set('hero_eyebrow', lang_map);
lang_map = new Map();
lang_map.set('en', 'Your AI conversations stay on your device');
lang_map.set('ja', 'AI会話はデバイス内にとどまります');
i18n_messages.set('hero_title', lang_map);
lang_map = new Map();
lang_map.set('en', 'ContextWizard by amiPro, LLC captures what is already visible in your AI chat windows, encrypts and stores it locally, and never transmits it to amiPro or third parties.');
lang_map.set('ja', 'ContextWizard（amiPro, LLC）は、AIチャットウィンドウにすでに表示されている内容をキャプチャし、ローカルで暗号化・保存します。amiProや第三者への送信は一切行いません。');
i18n_messages.set('hero_lead', lang_map);
lang_map = new Map();
lang_map.set('en', 'Local-first');
lang_map.set('ja', 'ローカルファースト');
i18n_messages.set('chip_local', lang_map);
lang_map = new Map();
lang_map.set('en', 'Chrome Manifest V3');
lang_map.set('ja', 'Chrome Manifest V3');
i18n_messages.set('chip_manifest', lang_map);
lang_map = new Map();
lang_map.set('en', 'GDPR & CCPA aligned');
lang_map.set('ja', 'GDPR・CCPA準拠');
i18n_messages.set('chip_gdpr', lang_map);
lang_map = new Map();
lang_map.set('en', 'ContextWizard Privacy Policy');
lang_map.set('ja', 'ContextWizard プライバシーポリシー');
i18n_messages.set('hero_media_title', lang_map);
lang_map = new Map();
lang_map.set('en', "Learn exactly how data moves (and doesn't move) inside the extension and how to stay in control.");
lang_map.set('ja', 'データが拡張機能内でどのように移動（または移動しない）するのか、そしてどのようにしてコントロールを維持するのかを正確に把握できます。');
i18n_messages.set('hero_media_desc', lang_map);
lang_map = new Map();
lang_map.set('en', 'No telemetry');
lang_map.set('ja', 'テレメトリなし');
i18n_messages.set('chip_telemetry', lang_map);
lang_map = new Map();
lang_map.set('en', 'Full user control');
lang_map.set('ja', 'ユーザー完全管理');
i18n_messages.set('chip_control', lang_map);
lang_map = new Map();
lang_map.set('en', 'Offline friendly');
lang_map.set('ja', 'オフライン対応');
i18n_messages.set('chip_offline', lang_map);
lang_map = new Map();
lang_map.set('en', '<strong>Last updated:</strong> 18 November 2025');
lang_map.set('ja', '<strong>最終更新日：</strong>2025年11月18日');
i18n_messages.set('last_updated', lang_map);
lang_map = new Map();
lang_map.set('en', 'ContextWizard Privacy Policy');
lang_map.set('ja', 'ContextWizard プライバシーポリシー');
i18n_messages.set('section_intro_title', lang_map);
lang_map = new Map();
lang_map.set('en', "ContextWizard is a Chrome extension built by amiPro, LLC that helps you capture, search, and revisit AI chat conversations across multiple platforms. This Privacy Policy explains what data the extension processes, how the data stays on your device, and what controls you have. By installing or using ContextWizard you agree to the data practices described below.");
lang_map.set('ja', 'ContextWizardは、amiPro, LLCが開発したChrome拡張機能で、複数のプラットフォームにわたるAIチャット会話をキャプチャ、検索、再確認できるようにします。本プライバシーポリシーでは、拡張機能がどのようなデータを処理するか、データがどのようにデバイス内にとどまるか、およびどのようなコントロールがあるかを説明します。ContextWizardをインストールまたは使用することで、以下に記載されるデータ慣行に同意したものとみなされます。');
i18n_messages.set('section_intro_text', lang_map);
lang_map = new Map();
lang_map.set('en', '1. Scope & Purpose');
lang_map.set('ja', '1. 適用範囲と目的');
i18n_messages.set('section_1_title', lang_map);
lang_map = new Map();
lang_map.set('en', "ContextWizard runs entirely as a browser extension and operates solely within the Chrome profile where it is installed. Its only purpose is to capture the text you already see on supported AI chat platforms, store summaries and metadata locally, and provide search, filtering, and export/import features.");
lang_map.set('ja', 'ContextWizardは完全にブラウザ拡張機能として動作し、インストールされたChromeプロファイル内のみで動作します。唯一の目的は、対応するAIチャットプラットフォームですでに表示されているテキストをキャプチャし、サマリーメタデータをローカルに保存し、検索、フィルタリング、エクスポート/インポート機能を提供することです。');
i18n_messages.set('section_1_text', lang_map);
lang_map = new Map();
lang_map.set('en', '2. Data We Process');
lang_map.set('ja', '2. 処理するデータ');
i18n_messages.set('section_2_title', lang_map);
lang_map = new Map();
lang_map.set('en', 'Category');
lang_map.set('ja', 'カテゴリ');
i18n_messages.set('th_category', lang_map);
lang_map = new Map();
lang_map.set('en', 'Description');
lang_map.set('ja', '説明');
i18n_messages.set('th_description', lang_map);
lang_map = new Map();
lang_map.set('en', 'Storage Location');
lang_map.set('ja', '保存先');
i18n_messages.set('th_storage', lang_map);
lang_map = new Map();
lang_map.set('en', 'Conversation content');
lang_map.set('ja', '会話コンテンツ');
i18n_messages.set('td_conv_content', lang_map);
lang_map = new Map();
lang_map.set('en', 'Message text, titles, timestamps, participant role (user/assistant), detected platform, and the URL of the conversation you are currently viewing.');
lang_map.set('ja', 'メッセージテキスト、タイトル、タイムスタンプ、参加者ロール（ユーザー/アシスタント）、検出されたプラットフォーム、および現在閲覧中の会話のURL。');
i18n_messages.set('td_conv_desc', lang_map);
lang_map = new Map();
lang_map.set('en', 'Platform settings');
lang_map.set('ja', 'プラットフォーム設定');
i18n_messages.set('td_platform_settings', lang_map);
lang_map = new Map();
lang_map.set('en', 'Which built-in platforms are enabled, custom platform URL patterns, color assignments, and per-platform toggles.');
lang_map.set('ja', '有効な組み込みプラットフォーム、カスタムプラットフォームのURLパターン、色の割り当て、プラットフォームごとのトグル。');
i18n_messages.set('td_platform_desc', lang_map);
lang_map = new Map();
lang_map.set('en', 'UI preferences');
lang_map.set('ja', 'UI設定');
i18n_messages.set('td_ui_prefs', lang_map);
lang_map = new Map();
lang_map.set('en', 'Language override, sort order, search filters, onboarding dismissals, and other UX state.');
lang_map.set('ja', '言語オーバーライド、ソート順、検索フィルタ、オンボーディングの非表示設定、その他のUX状態。');
i18n_messages.set('td_ui_desc', lang_map);
lang_map = new Map();
lang_map.set('en', 'ContextWizard does <strong>not</strong> collect account credentials, payment data, unrelated browsing history, or telemetry/analytics.');
lang_map.set('ja', 'ContextWizardはアカウント認証情報、支払いデータ、無関係な閲覧履歴、テレメトリ/アナリティクスを<strong>収集しません</strong>。');
i18n_messages.set('section_2_note', lang_map);
lang_map = new Map();
lang_map.set('en', '3. Data Sources & Collection Method');
lang_map.set('ja', '3. データソースと収集方法');
i18n_messages.set('section_3_title', lang_map);
lang_map = new Map();
lang_map.set('en', 'Content is captured only from pages whose URLs match the built-in or user-configured host permissions (e.g., <code>https://chatgpt.com/*</code>).');
lang_map.set('ja', 'コンテンツは、URLが組み込みまたはユーザー設定のホスト権限と一致するページのみからキャプチャされます（例：<code>https://chatgpt.com/*</code>）。');
i18n_messages.set('section_3_1', lang_map);
lang_map = new Map();
lang_map.set('en', "The extension uses MutationObserver and DOM queries to read message containers in the active tab; it does <strong>not</strong> call any platform APIs or intercept network traffic.");
lang_map.set('ja', '拡張機能はMutationObserverとDOMクエリを使用してアクティブタブのメッセージコンテナを読み取ります。プラットフォームAPIを呼び出したり、ネットワークトラフィックを傍受したりすることは<strong>ありません</strong>。');
i18n_messages.set('section_3_2', lang_map);
lang_map = new Map();
lang_map.set('en', 'Data collection begins only after you navigate to a supported page and the recording indicator appears. Closing the tab or disabling the platform stops collection immediately.');
lang_map.set('ja', 'データ収集は、対応するページに移動し、録画インジケータが表示された後にのみ開始されます。タブを閉じるかプラットフォームを無効にすると、収集は直ちに停止します。');
i18n_messages.set('section_3_3', lang_map);
lang_map = new Map();
lang_map.set('en', '4. How We Use Data');
lang_map.set('ja', '4. データの使用方法');
i18n_messages.set('section_4_title', lang_map);
lang_map = new Map();
lang_map.set('en', "All captured data is used exclusively to power the extension's on-device features:");
lang_map.set('ja', 'キャプチャされたすべてのデータは、拡張機能のデバイス内機能を駆動するためにのみ使用されます：');
i18n_messages.set('section_4_intro', lang_map);
lang_map = new Map();
lang_map.set('en', 'Build a searchable, unified list of your AI conversations.');
lang_map.set('ja', 'AI会話の検索可能な統一リストを構築します。');
i18n_messages.set('section_4_1', lang_map);
lang_map = new Map();
lang_map.set('en', 'Provide quick links back to the source page via <code>chrome.tabs.update</code>.');
lang_map.set('ja', '<code>chrome.tabs.update</code>を通じてソースページへのクイックリンクを提供します。');
i18n_messages.set('section_4_2', lang_map);
lang_map = new Map();
lang_map.set('en', 'Enable exports/imports so you can back up or restore your local archive.');
lang_map.set('ja', 'エクスポート/インポートを有効にし、ローカルアーカイブのバックアップや復元が可能になります。');
i18n_messages.set('section_4_3', lang_map);
lang_map = new Map();
lang_map.set('en', 'Maintain per-platform enable/disable states and custom URL patterns.');
lang_map.set('ja', 'プラットフォームごとの有効/無効状態とカスタムURLパターンを維持します。');
i18n_messages.set('section_4_4', lang_map);
lang_map = new Map();
lang_map.set('en', 'We never send this information to amiPro, LLC servers or any third party.');
lang_map.set('ja', 'この情報がamiPro, LLCのサーバーや第三者に送信されることはありません。');
i18n_messages.set('section_4_note', lang_map);
lang_map = new Map();
lang_map.set('en', '5. Data Sharing & Transfers');
lang_map.set('ja', '5. データの共有と転送');
i18n_messages.set('section_5_title', lang_map);
lang_map = new Map();
lang_map.set('en', 'ContextWizard does <strong>not</strong> transmit data outside the local browser environment.');
lang_map.set('ja', 'ContextWizardはローカルブラウザ環境の外部にデータを送信するこた<strong>ありません</strong>。');
i18n_messages.set('section_5_1', lang_map);
lang_map = new Map();
lang_map.set('en', 'We do not share, sell, rent, or trade any user data with third parties.');
lang_map.set('ja', 'ユーザーデータを第三者と共有、販売、賃貸、取引することはありません。');
i18n_messages.set('section_5_2', lang_map);
lang_map = new Map();
lang_map.set('en', 'The extension does not embed third-party analytics or advertising scripts.');
lang_map.set('ja', '拡張機能には第三者のアナリティクスや広告スクリプトは埋め込まれていません。');
i18n_messages.set('section_5_3', lang_map);
lang_map = new Map();
lang_map.set('en', 'Operating offline is fully supported once the extension is installed.');
lang_map.set('ja', '拡張機能のインストール後、オフラインでの動作が完全にサポートされます。');
i18n_messages.set('section_5_4', lang_map);
lang_map = new Map();
lang_map.set('en', '6. Permissions & Technical Safeguards');
lang_map.set('ja', '6. 権限と技術的保護措置');
i18n_messages.set('section_6_title', lang_map);
lang_map = new Map();
lang_map.set('en', 'Permission');
lang_map.set('ja', '権限');
i18n_messages.set('th_permission', lang_map);
lang_map = new Map();
lang_map.set('en', 'Reason');
lang_map.set('ja', '理由');
i18n_messages.set('th_reason', lang_map);
lang_map = new Map();
lang_map.set('en', 'Detects whether the tab you explicitly interact with matches a supported platform so conversations can be listed in the popup.');
lang_map.set('ja', 'ユーザーが明示的に操作したタブが対応するプラットフォームと一致するかを検出し、ポップアップに会話を一覧表示できるようにします。');
i18n_messages.set('td_activeTab', lang_map);
lang_map = new Map();
lang_map.set('en', "Opens the saved conversation's URL in the current window and reads metadata (title/URL) for the active tab only.");
lang_map.set('ja', '保存された会話のURLを現在のウィンドウで開き、アクティブタブのメタデータ（タイトル/URL）のみを読み取ります。');
i18n_messages.set('td_tabs', lang_map);
lang_map = new Map();
lang_map.set('en', 'Injects the packaged content script (<code>content.js</code>) on supported hosts to observe DOM changes in real time; no remote code is used.');
lang_map.set('ja', '対応するホストにパッケージされたコンテンツスクリプト（<code>content.js</code>）を注入し、DOMの変更をリアルタイムで監視します。リモートコードは使用されません。');
i18n_messages.set('td_scripting', lang_map);
lang_map = new Map();
lang_map.set('en', 'Saves conversations, summaries, and user preferences locally using Chrome Storage APIs.');
lang_map.set('ja', 'Chrome Storage APIを使用して会話、サマリー、ユーザー設定をローカルに保存します。');
i18n_messages.set('td_storage_desc', lang_map);
lang_map = new Map();
lang_map.set('en', 'Host permissions');
lang_map.set('ja', 'ホスト権限');
i18n_messages.set('td_host_perm', lang_map);
lang_map = new Map();
lang_map.set('en', 'Restrict DOM access to specific AI chat domains so we can parse message containers safely.');
lang_map.set('ja', 'DOMアクセスを特定のAIチャットドメインに制限し、メッセージコンテナを安全に解析できるようにします。');
i18n_messages.set('td_host_perm_desc', lang_map);
lang_map = new Map();
lang_map.set('en', 'Additional safeguards:');
lang_map.set('ja', '追加の保護措置：');
i18n_messages.set('safeguards_title', lang_map);
lang_map = new Map();
lang_map.set('en', 'Manifest V3 service worker architecture prevents persistent background execution.');
lang_map.set('ja', 'Manifest V3のサービスワーカーアーキテクチャにより、永続的なバックグラウンド実行が防止されます。');
i18n_messages.set('safeguard_1', lang_map);
lang_map = new Map();
lang_map.set('en', 'All JavaScript injected into pages ships with the extension bundle; no remote code execution or eval of downloaded strings.');
lang_map.set('ja', 'ページに注入されるすべてのJavaScriptは拡張機能バンドルに含まれています。リモートコード実行やダウンロードされた文字列のevalはありません。');
i18n_messages.set('safeguard_2', lang_map);
lang_map = new Map();
lang_map.set('en', 'Obfuscation is applied only during the optional <code>npm run build</code> release process; source review builds remain readable.');
lang_map.set('ja', 'オフスケーションはオプションの<code>npm run build</code>リリースプロセス中のみ適用されます。ソースレビュー用ビルドはそのまま読める状態です。');
i18n_messages.set('safeguard_3', lang_map);
lang_map = new Map();
lang_map.set('en', '7. User Controls');
lang_map.set('ja', '7. ユーザーコントロール');
i18n_messages.set('section_7_title', lang_map);
lang_map = new Map();
lang_map.set('en', '<strong>Platform Toggles:</strong> Settings (<code>options.html</code>) lets you enable/disable each built-in domain or remove custom domains.');
lang_map.set('ja', '<strong>プラットフォームトグル：</strong>設定（<code>options.html</code>）で、各組み込みドメインの有効/無効やカスタムドメインの削除が可能です。');
i18n_messages.set('section_7_1', lang_map);
lang_map = new Map();
lang_map.set('en', '<strong>Data Management:</strong> Export, import, or delete all stored data from Settings → Data Management. Deleting clears <code>chrome.storage</code> entries.');
lang_map.set('ja', '<strong>データ管理：</strong>設定 → データ管理から、保存されたデータをすべてエクスポート、インポート、または削除できます。削除すると<code>chrome.storage</code>エントリがクリアされます。');
i18n_messages.set('section_7_2', lang_map);
lang_map = new Map();
lang_map.set('en', "<strong>Pause Collection:</strong> Use Chrome's site access controls or the in-extension platform toggle to stop monitoring a site temporarily. Removing the extension deletes every stored record.");
lang_map.set('ja', '<strong>収集の一時停止：</strong>Chromeのサイトアクセスコントロールまたは拡張機能内のプラットフォームトグルを使用して、サイトの監視を一時的に停止できます。拡張機能を削除すると、保存されたすべてのレコードが削除されます。');
i18n_messages.set('section_7_3', lang_map);
lang_map = new Map();
lang_map.set('en', '<strong>Language & UI:</strong> Switch languages via the popup menu; UI choices persist only within your profile.');
lang_map.set('ja', '<strong>言語とUI：</strong>ポップアップメニューで言語を切り替えます。UIの選択はプロファイル内でのみ維持されます。');
i18n_messages.set('section_7_4', lang_map);
lang_map = new Map();
lang_map.set('en', '8. Data Retention');
lang_map.set('ja', '8. データの保持');
i18n_messages.set('section_8_title', lang_map);
lang_map = new Map();
lang_map.set('en', "Data stays in your local Chrome profile until you delete it via the Data Management screen, clear Chrome's site data, or uninstall the extension. We do not maintain server-side backups, so removing the extension permanently erases your archive.");
lang_map.set('ja', 'データは、データ管理画面で削除するか、Chromeのサイトデータをクリアするか、拡張機能をアンインストールするまで、ローカルのChromeプロファイルに残ります。サーバーサイドのバックアップは保持していないため、拡張機能を削除するとアーカイブが完全に消去されます。');
i18n_messages.set('section_8_text', lang_map);
lang_map = new Map();
lang_map.set('en', '9. Compliance Statement');
lang_map.set('ja', '9. コンプライアンス声明');
i18n_messages.set('section_9_title', lang_map);
lang_map = new Map();
lang_map.set('en', "ContextWizard complies with the Chrome Web Store Developer Program Policies, including the User Data, Limited Use, and Secure Handling requirements. Because all processing occurs locally and no personal data leaves the device, ContextWizard also aligns with major privacy regulations (e.g., GDPR, CCPA) regarding data minimization and user control.");
lang_map.set('ja', 'ContextWizardは、ユーザーデータ、限定利用、安全な取り扱いの要件を含むChrome Web Store開発者プログラムポリシーに準拠しています。すべての処理がローカルで行われ、個人データがデバイス外に出ないため、ContextWizardはデータ最小化とユーザーコントロールに関する主要なプライバシー規制（GDPR、CCPAなど）にも適合しています。');
i18n_messages.set('section_9_text', lang_map);
lang_map = new Map();
lang_map.set('en', "10. Children's Privacy");
lang_map.set('ja', '10. 児童のプライバシー');
i18n_messages.set('section_10_title', lang_map);
lang_map = new Map();
lang_map.set('en', "ContextWizard is intended for general audiences and does not knowingly collect information from children under 13. If you believe a minor has provided data, remove the extension or clear the storage to delete it immediately.");
lang_map.set('ja', 'ContextWizardは一般向けに意図されたものであり、13歳未満の児童の情報を故意に収集しません。未成年者がデータを提供したと思われる場合は、拡張機能を削除するか、ストレージをクリアして直ちに削除してください。');
i18n_messages.set('section_10_text', lang_map);
lang_map = new Map();
lang_map.set('en', '11. Changes to This Policy');
lang_map.set('ja', '11. ポリシーの変更');
i18n_messages.set('section_11_title', lang_map);
lang_map = new Map();
lang_map.set('en', 'We may update this policy to reflect feature changes or regulatory guidance. When we do, we will update the "Last updated" date above and publish the revised policy at this same URL. Material changes will be summarized in the README and release notes.');
lang_map.set('ja', '機能の変更や規制ガイドラインの反映 위해、本ポリシーを更新する場合があります。更新する際は、上記の「最終更新日」を更新し、同じURLで改訂版ポリシーを公開します。重要な変更はREADMEとリリースノートに要約されます。');
i18n_messages.set('section_11_text', lang_map);
lang_map = new Map();
lang_map.set('en', '12. Contact Us');
lang_map.set('ja', '12. お問い合わせ');
i18n_messages.set('section_12_title', lang_map);
lang_map = new Map();
lang_map.set('en', 'For privacy questions, requests, or bug reports, email <a href="mailto:support@amipro.me">support@amipro.me</a>. We aim to respond within five business days.');
lang_map.set('ja', 'プライバシーに関するお問い合わせ、リクエスト、バグ報告は、<a href="mailto:support@amipro.me">support@amipro.me</a>までメールください。5営業日以内に回答を目指しています。');
i18n_messages.set('section_12_text', lang_map);
window.onload = async function() { window.onload = async function() {
setI18NText(i18n_messages); setI18NText(i18n_messages);
initRevealAnimations(); initRevealAnimations();
if (typeof createLanguageSelector === 'function') {
document.body.appendChild(createLanguageSelector());
}
} }
</script> </script>
</head> </head>
@@ -162,13 +572,9 @@
<!-- Layout wrapper --> <!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar"> <div class="layout-wrapper layout-content-navbar">
<div class="layout-container"> <div class="layout-container">
<!-- Layout container --> <!-- Layout container -->
<div class="layout-page"> <div class="layout-page">
<!-- Navbar --> <!-- Navbar -->
<!-- / Navbar -->
<!-- Content wrapper --> <!-- Content wrapper -->
<div class="content-wrapper"> <div class="content-wrapper">
@@ -176,29 +582,29 @@
<div style="margin: 24px;"> <div style="margin: 24px;">
<section class="hero reveal"> <section class="hero reveal">
<div class="hero__text" data-animate> <div class="hero__text" data-animate>
<span class="hero__eyebrow">ContextWizard · Privacy</span> <span id="hero_eyebrow" class="hero__eyebrow">ContextWizard · Privacy</span>
<h1 class="hero__title">Your AI conversations stay on your device</h1> <h1 id="hero_title" class="hero__title">Your AI conversations stay on your device</h1>
<p class="hero__lead"> <p id="hero_lead" class="hero__lead">
ContextWizard by amiPro, LLC captures what is already visible in your AI chat windows, ContextWizard by amiPro, LLC captures what is already visible in your AI chat windows,
encrypts and stores it locally, and never transmits it to amiPro or third parties. encrypts and stores it locally, and never transmits it to amiPro or third parties.
</p> </p>
<div class="hero__chips"> <div class="hero__chips">
<span class="hero-chip">Local‑first</span> <span id="chip_local" class="hero-chip">Local‑first</span>
<span class="hero-chip">Chrome Manifest V3</span> <span id="chip_manifest" class="hero-chip">Chrome Manifest V3</span>
<span class="hero-chip">GDPR & CCPA aligned</span> <span id="chip_gdpr" class="hero-chip">GDPR & CCPA aligned</span>
</div> </div>
</div> </div>
<div class="hero__media" data-animate> <div class="hero__media" data-animate>
<div class="hero__orb"></div> <div class="hero__orb"></div>
<div class="hero__device"> <div class="hero__device">
<h4>ContextWizard Privacy Policy</h4> <h4 id="hero_media_title">ContextWizard Privacy Policy</h4>
<p> <p id="hero_media_desc">
Learn exactly how data moves (and doesn’t move) inside the extension and how to stay in control. Learn exactly how data moves (and doesn't move) inside the extension and how to stay in control.
</p> </p>
<div class="hero__chips" style="margin-top: 1.5rem;"> <div class="hero__chips" style="margin-top: 1.5rem;">
<span class="hero-chip">No telemetry</span> <span id="chip_telemetry" class="hero-chip">No telemetry</span>
<span class="hero-chip">Full user control</span> <span id="chip_control" class="hero-chip">Full user control</span>
<span class="hero-chip">Offline friendly</span> <span id="chip_offline" class="hero-chip">Offline friendly</span>
</div> </div>
</div> </div>
</div> </div>
@@ -207,17 +613,17 @@
<div class="alert alert-info d-flex align-items-center" role="alert" style="margin-top: 24px;"> <div class="alert alert-info d-flex align-items-center" role="alert" style="margin-top: 24px;">
<i class="bx bx-shield-quarter bx-sm me-2"></i> <i class="bx bx-shield-quarter bx-sm me-2"></i>
<div> <div>
<strong>Last updated:</strong> 18 November 2025 <span id="last_updated"><strong>Last updated:</strong> 18 November 2025</span>
</div> </div>
</div> </div>
<article class="privacy-content" style="margin-top: 24px;"> <article class="privacy-content" style="margin-top: 24px;">
<section class="card mb-4 reveal" data-animate> <section class="card mb-4 reveal" data-animate>
<div class="card-header"> <div class="card-header">
<h2 class="card-title" style="margin: 0;">ContextWizard Privacy Policy</h2> <h2 id="section_intro_title" class="card-title" style="margin: 0;">ContextWizard Privacy Policy</h2>
</div> </div>
<div class="card-body"> <div class="card-body">
<p> <p id="section_intro_text">
ContextWizard is a Chrome extension built by amiPro, LLC that helps you capture, search, and revisit ContextWizard is a Chrome extension built by amiPro, LLC that helps you capture, search, and revisit
AI chat conversations across multiple platforms. This Privacy Policy explains what data the extension AI chat conversations across multiple platforms. This Privacy Policy explains what data the extension
processes, how the data stays on your device, and what controls you have. By installing or using processes, how the data stays on your device, and what controls you have. By installing or using
@@ -228,10 +634,10 @@
<section class="card mb-4 reveal" data-animate> <section class="card mb-4 reveal" data-animate>
<div class="card-header"> <div class="card-header">
<h3 class="card-title" style="margin: 0;">1. Scope &amp; Purpose</h3> <h3 id="section_1_title" class="card-title" style="margin: 0;">1. Scope &amp; Purpose</h3>
</div> </div>
<div class="card-body"> <div class="card-body">
<p> <p id="section_1_text">
ContextWizard runs entirely as a browser extension and operates solely within the Chrome profile where it is ContextWizard runs entirely as a browser extension and operates solely within the Chrome profile where it is
installed. Its only purpose is to capture the text you already see on supported AI chat platforms, store summaries installed. Its only purpose is to capture the text you already see on supported AI chat platforms, store summaries
and metadata locally, and provide search, filtering, and export/import features. and metadata locally, and provide search, filtering, and export/import features.
@@ -241,38 +647,38 @@
<section class="card mb-4 reveal" data-animate> <section class="card mb-4 reveal" data-animate>
<div class="card-header"> <div class="card-header">
<h3 class="card-title" style="margin: 0;">2. Data We Process</h3> <h3 id="section_2_title" class="card-title" style="margin: 0;">2. Data We Process</h3>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
<th>Category</th> <th id="th_category">Category</th>
<th>Description</th> <th id="th_description">Description</th>
<th>Storage Location</th> <th id="th_storage">Storage Location</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>Conversation content</td> <td id="td_conv_content">Conversation content</td>
<td>Message text, titles, timestamps, participant role (user/assistant), detected platform, and the URL of the conversation you are currently viewing.</td> <td id="td_conv_desc">Message text, titles, timestamps, participant role (user/assistant), detected platform, and the URL of the conversation you are currently viewing.</td>
<td><code>chrome.storage.local</code></td> <td><code>chrome.storage.local</code></td>
</tr> </tr>
<tr> <tr>
<td>Platform settings</td> <td id="td_platform_settings">Platform settings</td>
<td>Which built-in platforms are enabled, custom platform URL patterns, color assignments, and per-platform toggles.</td> <td id="td_platform_desc">Which built-in platforms are enabled, custom platform URL patterns, color assignments, and per-platform toggles.</td>
<td><code>chrome.storage.sync</code></td> <td><code>chrome.storage.sync</code></td>
</tr> </tr>
<tr> <tr>
<td>UI preferences</td> <td id="td_ui_prefs">UI preferences</td>
<td>Language override, sort order, search filters, onboarding dismissals, and other UX state.</td> <td id="td_ui_desc">Language override, sort order, search filters, onboarding dismissals, and other UX state.</td>
<td><code>chrome.storage.local</code></td> <td><code>chrome.storage.local</code></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<p class="mb-0"> <p id="section_2_note" class="mb-0">
ContextWizard does <strong>not</strong> collect account credentials, payment data, unrelated browsing history, or telemetry/analytics. ContextWizard does <strong>not</strong> collect account credentials, payment data, unrelated browsing history, or telemetry/analytics.
</p> </p>
</div> </div>
@@ -280,90 +686,90 @@
<section class="card mb-4 reveal" data-animate> <section class="card mb-4 reveal" data-animate>
<div class="card-header"> <div class="card-header">
<h3 class="card-title" style="margin: 0;">3. Data Sources &amp; Collection Method</h3> <h3 id="section_3_title" class="card-title" style="margin: 0;">3. Data Sources &amp; Collection Method</h3>
</div> </div>
<div class="card-body"> <div class="card-body">
<ul> <ul>
<li>Content is captured only from pages whose URLs match the built-in or user-configured host permissions (e.g., <code>https://chatgpt.com/*</code>).</li> <li id="section_3_1">Content is captured only from pages whose URLs match the built-in or user-configured host permissions (e.g., <code>https://chatgpt.com/*</code>).</li>
<li>The extension uses MutationObserver and DOM queries to read message containers in the active tab; it does <strong>not</strong> call any platform APIs or intercept network traffic.</li> <li id="section_3_2">The extension uses MutationObserver and DOM queries to read message containers in the active tab; it does <strong>not</strong> call any platform APIs or intercept network traffic.</li>
<li>Data collection begins only after you navigate to a supported page and the recording indicator appears. Closing the tab or disabling the platform stops collection immediately.</li> <li id="section_3_3">Data collection begins only after you navigate to a supported page and the recording indicator appears. Closing the tab or disabling the platform stops collection immediately.</li>
</ul> </ul>
</div> </div>
</section> </section>
<section class="card mb-4 reveal" data-animate> <section class="card mb-4 reveal" data-animate>
<div class="card-header"> <div class="card-header">
<h3 class="card-title" style="margin: 0;">4. How We Use Data</h3> <h3 id="section_4_title" class="card-title" style="margin: 0;">4. How We Use Data</h3>
</div> </div>
<div class="card-body"> <div class="card-body">
<p>All captured data is used exclusively to power the extension’s on-device features:</p> <p id="section_4_intro">All captured data is used exclusively to power the extension's on-device features:</p>
<ol> <ol>
<li>Build a searchable, unified list of your AI conversations.</li> <li id="section_4_1">Build a searchable, unified list of your AI conversations.</li>
<li>Provide quick links back to the source page via <code>chrome.tabs.update</code>.</li> <li id="section_4_2">Provide quick links back to the source page via <code>chrome.tabs.update</code>.</li>
<li>Enable exports/imports so you can back up or restore your local archive.</li> <li id="section_4_3">Enable exports/imports so you can back up or restore your local archive.</li>
<li>Maintain per-platform enable/disable states and custom URL patterns.</li> <li id="section_4_4">Maintain per-platform enable/disable states and custom URL patterns.</li>
</ol> </ol>
<p class="mb-0">We never send this information to amiPro, LLC servers or any third party.</p> <p id="section_4_note" class="mb-0">We never send this information to amiPro, LLC servers or any third party.</p>
</div> </div>
</section> </section>
<section class="card mb-4 reveal" data-animate> <section class="card mb-4 reveal" data-animate>
<div class="card-header"> <div class="card-header">
<h3 class="card-title" style="margin: 0;">5. Data Sharing &amp; Transfers</h3> <h3 id="section_5_title" class="card-title" style="margin: 0;">5. Data Sharing &amp; Transfers</h3>
</div> </div>
<div class="card-body"> <div class="card-body">
<ul> <ul>
<li>ContextWizard does <strong>not</strong> transmit data outside the local browser environment.</li> <li id="section_5_1">ContextWizard does <strong>not</strong> transmit data outside the local browser environment.</li>
<li>We do not share, sell, rent, or trade any user data with third parties.</li> <li id="section_5_2">We do not share, sell, rent, or trade any user data with third parties.</li>
<li>The extension does not embed third-party analytics or advertising scripts.</li> <li id="section_5_3">The extension does not embed third-party analytics or advertising scripts.</li>
<li>Operating offline is fully supported once the extension is installed.</li> <li id="section_5_4">Operating offline is fully supported once the extension is installed.</li>
</ul> </ul>
</div> </div>
</section> </section>
<section class="card mb-4 reveal" data-animate> <section class="card mb-4 reveal" data-animate>
<div class="card-header"> <div class="card-header">
<h3 class="card-title" style="margin: 0;">6. Permissions &amp; Technical Safeguards</h3> <h3 id="section_6_title" class="card-title" style="margin: 0;">6. Permissions &amp; Technical Safeguards</h3>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
<th>Permission</th> <th id="th_permission">Permission</th>
<th>Reason</th> <th id="th_reason">Reason</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><code>activeTab</code></td> <td><code>activeTab</code></td>
<td>Detects whether the tab you explicitly interact with matches a supported platform so conversations can be listed in the popup.</td> <td id="td_activeTab">Detects whether the tab you explicitly interact with matches a supported platform so conversations can be listed in the popup.</td>
</tr> </tr>
<tr> <tr>
<td><code>tabs</code></td> <td><code>tabs</code></td>
<td>Opens the saved conversation’s URL in the current window and reads metadata (title/URL) for the active tab only.</td> <td id="td_tabs">Opens the saved conversation's URL in the current window and reads metadata (title/URL) for the active tab only.</td>
</tr> </tr>
<tr> <tr>
<td><code>scripting</code></td> <td><code>scripting</code></td>
<td>Injects the packaged content script (<code>content.js</code>) on supported hosts to observe DOM changes in real time; no remote code is used.</td> <td id="td_scripting">Injects the packaged content script (<code>content.js</code>) on supported hosts to observe DOM changes in real time; no remote code is used.</td>
</tr> </tr>
<tr> <tr>
<td><code>storage</code></td> <td><code>storage</code></td>
<td>Saves conversations, summaries, and user preferences locally using Chrome Storage APIs.</td> <td id="td_storage_desc">Saves conversations, summaries, and user preferences locally using Chrome Storage APIs.</td>
</tr> </tr>
<tr> <tr>
<td>Host permissions</td> <td id="td_host_perm">Host permissions</td>
<td>Restrict DOM access to specific AI chat domains so we can parse message containers safely.</td> <td id="td_host_perm_desc">Restrict DOM access to specific AI chat domains so we can parse message containers safely.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div> <div>
<p><strong>Additional safeguards:</strong></p> <p id="safeguards_title"><strong>Additional safeguards:</strong></p>
<ul> <ul>
<li>Manifest V3 service worker architecture prevents persistent background execution.</li> <li id="safeguard_1">Manifest V3 service worker architecture prevents persistent background execution.</li>
<li>All JavaScript injected into pages ships with the extension bundle; no remote code execution or eval of downloaded strings.</li> <li id="safeguard_2">All JavaScript injected into pages ships with the extension bundle; no remote code execution or eval of downloaded strings.</li>
<li>Obfuscation is applied only during the optional <code>npm run build</code> release process; source review builds remain readable.</li> <li id="safeguard_3">Obfuscation is applied only during the optional <code>npm run build</code> release process; source review builds remain readable.</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -371,35 +777,35 @@
<section class="card mb-4 reveal" data-animate> <section class="card mb-4 reveal" data-animate>
<div class="card-header"> <div class="card-header">
<h3 class="card-title" style="margin: 0;">7. User Controls</h3> <h3 id="section_7_title" class="card-title" style="margin: 0;">7. User Controls</h3>
</div> </div>
<div class="card-body"> <div class="card-body">
<ul> <ul>
<li><strong>Platform Toggles:</strong> Settings (<code>options.html</code>) lets you enable/disable each built-in domain or remove custom domains.</li> <li id="section_7_1"><strong>Platform Toggles:</strong> Settings (<code>options.html</code>) lets you enable/disable each built-in domain or remove custom domains.</li>
<li><strong>Data Management:</strong> Export, import, or delete all stored data from Settings → Data Management. Deleting clears <code>chrome.storage</code> entries.</li> <li id="section_7_2"><strong>Data Management:</strong> Export, import, or delete all stored data from Settings → Data Management. Deleting clears <code>chrome.storage</code> entries.</li>
<li><strong>Pause Collection:</strong> Use Chrome’s site access controls or the in-extension platform toggle to stop monitoring a site temporarily. Removing the extension deletes every stored record.</li> <li id="section_7_3"><strong>Pause Collection:</strong> Use Chrome's site access controls or the in-extension platform toggle to stop monitoring a site temporarily. Removing the extension deletes every stored record.</li>
<li><strong>Language &amp; UI:</strong> Switch languages via the popup menu; UI choices persist only within your profile.</li> <li id="section_7_4"><strong>Language &amp; UI:</strong> Switch languages via the popup menu; UI choices persist only within your profile.</li>
</ul> </ul>
</div> </div>
</section> </section>
<section class="card mb-4 reveal" data-animate> <section class="card mb-4 reveal" data-animate>
<div class="card-header"> <div class="card-header">
<h3 class="card-title" style="margin: 0;">8. Data Retention</h3> <h3 id="section_8_title" class="card-title" style="margin: 0;">8. Data Retention</h3>
</div> </div>
<div class="card-body"> <div class="card-body">
<p> <p id="section_8_text">
Data stays in your local Chrome profile until you delete it via the Data Management screen, clear Chrome’s site data, or uninstall the extension. We do not maintain server-side backups, so removing the extension permanently erases your archive. Data stays in your local Chrome profile until you delete it via the Data Management screen, clear Chrome's site data, or uninstall the extension. We do not maintain server-side backups, so removing the extension permanently erases your archive.
</p> </p>
</div> </div>
</section> </section>
<section class="card mb-4 reveal" data-animate> <section class="card mb-4 reveal" data-animate>
<div class="card-header"> <div class="card-header">
<h3 class="card-title" style="margin: 0;">9. Compliance Statement</h3> <h3 id="section_9_title" class="card-title" style="margin: 0;">9. Compliance Statement</h3>
</div> </div>
<div class="card-body"> <div class="card-body">
<p> <p id="section_9_text">
ContextWizard complies with the Chrome Web Store Developer Program Policies, including the User Data, Limited Use, and Secure Handling requirements. Because all processing occurs locally and no personal data leaves the device, ContextWizard also aligns with major privacy regulations (e.g., GDPR, CCPA) regarding data minimization and user control. ContextWizard complies with the Chrome Web Store Developer Program Policies, including the User Data, Limited Use, and Secure Handling requirements. Because all processing occurs locally and no personal data leaves the device, ContextWizard also aligns with major privacy regulations (e.g., GDPR, CCPA) regarding data minimization and user control.
</p> </p>
</div> </div>
@@ -407,10 +813,10 @@
<section class="card mb-4 reveal" data-animate> <section class="card mb-4 reveal" data-animate>
<div class="card-header"> <div class="card-header">
<h3 class="card-title" style="margin: 0;">10. Children’s Privacy</h3> <h3 id="section_10_title" class="card-title" style="margin: 0;">10. Children’s Privacy</h3>
</div> </div>
<div class="card-body"> <div class="card-body">
<p> <p id="section_10_text">
ContextWizard is intended for general audiences and does not knowingly collect information from children under 13. If you believe a minor has provided data, remove the extension or clear the storage to delete it immediately. ContextWizard is intended for general audiences and does not knowingly collect information from children under 13. If you believe a minor has provided data, remove the extension or clear the storage to delete it immediately.
</p> </p>
</div> </div>
@@ -418,21 +824,21 @@
<section class="card mb-4 reveal" data-animate> <section class="card mb-4 reveal" data-animate>
<div class="card-header"> <div class="card-header">
<h3 class="card-title" style="margin: 0;">11. Changes to This Policy</h3> <h3 id="section_11_title" class="card-title" style="margin: 0;">11. Changes to This Policy</h3>
</div> </div>
<div class="card-body"> <div class="card-body">
<p> <p id="section_11_text">
We may update this policy to reflect feature changes or regulatory guidance. When we do, we will update the “Last updated” date above and publish the revised policy at this same URL. Material changes will be summarized in the README and release notes. We may update this policy to reflect feature changes or regulatory guidance. When we do, we will update the "Last updated" date above and publish the revised policy at this same URL. Material changes will be summarized in the README and release notes.
</p> </p>
</div> </div>
</section> </section>
<section class="card mb-5 reveal" data-animate> <section class="card mb-5 reveal" data-animate>
<div class="card-header"> <div class="card-header">
<h3 class="card-title" style="margin: 0;">12. Contact Us</h3> <h3 id="section_12_title" class="card-title" style="margin: 0;">12. Contact Us</h3>
</div> </div>
<div class="card-body"> <div class="card-body">
<p> <p id="section_12_text">
For privacy questions, requests, or bug reports, email <a href="mailto:support@amipro.me">support@amipro.me</a>. For privacy questions, requests, or bug reports, email <a href="mailto:support@amipro.me">support@amipro.me</a>.
We aim to respond within five business days. We aim to respond within five business days.
</p> </p>

43
contextwizard_tokushoho.html
View File

@@ -25,6 +25,49 @@
<meta name="description" content="ContextWizard Chrome拡張機能の特定商取引法に基づく表記（通信販売に関する表示事項）" /> <meta name="description" content="ContextWizard Chrome拡張機能の特定商取引法に基づく表記（通信販売に関する表示事項）" />
<!-- Canonical -->
<link rel="canonical" href="https://amipro.me/contextwizard_tokushoho.html" />
<!-- Hreflang -->
<link rel="alternate" hreflang="ja" href="https://amipro.me/contextwizard_tokushoho.html" />
<link rel="alternate" hreflang="x-default" href="https://amipro.me/contextwizard_tokushoho.html" />
<!-- Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:title" content="特定商取引法に基づく表記 - ContextWizard - amiPro" />
<meta property="og:description" content="ContextWizard Chrome拡張機能の特定商取引法に基づく表記（通信販売に関する表示事項）" />
<meta property="og:url" content="https://amipro.me/contextwizard_tokushoho.html" />
<meta property="og:site_name" content="amiPro" />
<meta property="og:image" content="https://amipro.me/files/og-image.png" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="特定商取引法に基づく表記 - ContextWizard - amiPro" />
<meta name="twitter:description" content="ContextWizard Chrome拡張機能の特定商取引法に基づく表記（通信販売に関する表示事項）" />
<meta name="twitter:image" content="https://amipro.me/files/og-image.png" />
<!-- JSON-LD Article Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "特定商取引法に基づく表記 - ContextWizard",
"description": "ContextWizard Chrome拡張機能の特定商取引法に基づく表記（通信販売に関する表示事項）",
"url": "https://amipro.me/contextwizard_tokushoho.html",
"datePublished": "2025-12-29",
"dateModified": "2025-12-29",
"author": {
"@type": "Person",
"name": "杜 慶捷"
},
"publisher": {
"@type": "Organization",
"name": "amiPro合同会社",
"url": "https://amipro.me"
}
}
</script>
<!-- Favicon --> <!-- Favicon -->
<link rel="icon" type="image/x-icon" href="files/favicon.ico" /> <link rel="icon" type="image/x-icon" href="files/favicon.ico" />

119
integration.html
View File

@@ -11,7 +11,14 @@
content="width=device-width, initial-scale=1.0" content="width=device-width, initial-scale=1.0"
/> />
<title> Integration - amiPro </title> <title>Passkey Integration Guide - 15-Minute Setup | amiPro</title>
<link rel="canonical" href="https://amipro.me/integration.html" />
<!-- Hreflang -->
<link rel="alternate" hreflang="en" href="https://amipro.me/integration.html" />
<link rel="alternate" hreflang="ja" href="https://amipro.me/ja/integration.html" />
<link rel="alternate" hreflang="zh-CN" href="https://amipro.me/zh-CN/integration.html" />
<link rel="alternate" hreflang="x-default" href="https://amipro.me/integration.html" />
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-850DCHX9EJ"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-850DCHX9EJ"></script>
@@ -23,7 +30,39 @@
gtag('config', 'G-850DCHX9EJ'); gtag('config', 'G-850DCHX9EJ');
</script> </script>
<meta name="description" content="the easiest to integrate Passkey cloud service" /> <meta name="description" content="Step-by-step guide to integrate amiPro FIDO2 passkey authentication. Drop-in JavaScript SDK, device management, and session control in 15 minutes." />
<!-- Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Passkey Integration Guide - 15-Minute Setup | amiPro" />
<meta property="og:description" content="Step-by-step guide to integrate amiPro FIDO2 passkey authentication. Drop-in JavaScript SDK, device management, and session control in 15 minutes." />
<meta property="og:url" content="https://amipro.me/integration.html" />
<meta property="og:site_name" content="amiPro" />
<meta property="og:image" content="https://amipro.me/files/build.jpg" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Passkey Integration Guide - 15-Minute Setup | amiPro" />
<meta name="twitter:description" content="Step-by-step guide to integrate amiPro FIDO2 passkey authentication. Drop-in JavaScript SDK, device management, and session control in 15 minutes." />
<meta name="twitter:image" content="https://amipro.me/files/build.jpg" />
<!-- JSON-LD Article -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Passkey Integration Guide - 15-Minute Setup",
"description": "Step-by-step guide to integrate amiPro FIDO2 passkey authentication. Drop-in JavaScript SDK, device management, and session control in 15 minutes.",
"url": "https://amipro.me/integration.html",
"publisher": {
"@type": "Organization",
"name": "amiPro",
"url": "https://amipro.me"
},
"image": "https://amipro.me/files/build.jpg",
"mainEntityOfPage": "https://amipro.me/integration.html"
}
</script>
<!-- Favicon --> <!-- Favicon -->
<link rel="icon" type="image/x-icon" href="files/favicon.ico" /> <link rel="icon" type="image/x-icon" href="files/favicon.ico" />
@@ -75,164 +114,182 @@
const i18n_messages = new Map(); const i18n_messages = new Map();
var lang_map = new Map(); var lang_map = new Map();
lang_map.set("en-US", "amiPro - The easiest-to-integrate Passkey cloud service"); lang_map.set("en", "amiPro - The easiest-to-integrate Passkey cloud service");
lang_map.set("zh-CN", "amiPro - 最易集成的Passkey云服务"); lang_map.set("zh-CN", "amiPro - 最易集成的Passkey云服务");
lang_map.set("ja", "amiPro - 最も簡単に統合できるパスキー・クラウド・サービス"); lang_map.set("ja", "amiPro - 最も簡単に統合できるパスキー・クラウド・サービス");
i18n_messages.set("label_welcome", lang_map); i18n_messages.set("label_welcome", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Sample site"); lang_map.set("en", "Sample site");
lang_map.set("zh-CN", "示例网站"); lang_map.set("zh-CN", "示例网站");
lang_map.set("ja", "サンプルサイト"); lang_map.set("ja", "サンプルサイト");
i18n_messages.set("label_sample", lang_map); i18n_messages.set("label_sample", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Contact us (sales@amipro.me)"); lang_map.set("en", "Contact us (sales@amipro.me)");
lang_map.set("zh-CN", "联系我们（sales@amipro.me）"); lang_map.set("zh-CN", "联系我们（sales@amipro.me）");
lang_map.set("ja", "お問い合わせ（sales@amipro.me）"); lang_map.set("ja", "お問い合わせ（sales@amipro.me）");
i18n_messages.set("title_contact", lang_map); i18n_messages.set("title_contact", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Contact us (sales@amipro.me)"); lang_map.set("en", "Contact us (sales@amipro.me)");
lang_map.set("zh-CN", "联系我们（sales@amipro.me）"); lang_map.set("zh-CN", "联系我们（sales@amipro.me）");
lang_map.set("ja", "お問い合わせ（sales@amipro.me）"); lang_map.set("ja", "お問い合わせ（sales@amipro.me）");
i18n_messages.set("title_contact_cta", lang_map); i18n_messages.set("title_contact_cta", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Three month free trial<br>(After free registration of the management portal, all functions are free to try for three months)<br>No credit card required."); lang_map.set("en", "Three month free trial<br>(After free registration of the management portal, all functions are free to try for three months)<br>No credit card required.");
lang_map.set("zh-CN", "三个月免费试用<br>（免费注册管理门户后，所有功能免费试用三个月）<br> 无需信用卡"); lang_map.set("zh-CN", "三个月免费试用<br>（免费注册管理门户后，所有功能免费试用三个月）<br> 无需信用卡");
lang_map.set("ja", "3ヶ月間の無料トライアル<br>（管理ポータルの無料登録後、すべての機能を3ヶ月間無料でお試しいただけます）<br> クレジットカードは不要です。"); lang_map.set("ja", "3ヶ月間の無料トライアル<br>（管理ポータルの無料登録後、すべての機能を3ヶ月間無料でお試しいただけます）<br> クレジットカードは不要です。");
i18n_messages.set("btn_portal", lang_map); i18n_messages.set("btn_portal", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "How to integrate"); lang_map.set("en", "How to integrate");
lang_map.set("zh-CN", "如何集成"); lang_map.set("zh-CN", "如何集成");
lang_map.set("ja", "統合方法"); lang_map.set("ja", "統合方法");
i18n_messages.set("label_integartion_title", lang_map); i18n_messages.set("label_integartion_title", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Step1: Open sample site"); lang_map.set("en", "Step1: Open sample site");
lang_map.set("zh-CN", "步骤1: 打开示例网站"); lang_map.set("zh-CN", "步骤1: 打开示例网站");
lang_map.set("ja", "ステップ1: サンプルサイトを開く"); lang_map.set("ja", "ステップ1: サンプルサイトを開く");
i18n_messages.set("btn_step1", lang_map); i18n_messages.set("btn_step1", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Click the following link to enter the sample website. In the following instructions you will need to refer to the source code of the sample website. <br><a href='https://sample.amipro.me/modal-demo.html' target='_blank'>https://sample.amipro.me/modal-demo.html</a>"); lang_map.set("en", "Click the following link to enter the sample website. In the following instructions you will need to refer to the source code of the sample website. <br><a href='https://sample.amipro.me/modal-demo.html' target='_blank'>https://sample.amipro.me/modal-demo.html</a>");
lang_map.set("zh-CN", "点击以下链接，进入示例网站。在以下的说明中您将需要参考示例网站的源代码。<br><a href='https://sample.amipro.me/modal-demo.html' target='_blank'>https://sample.amipro.me/modal-demo.html</a>"); lang_map.set("zh-CN", "点击以下链接，进入示例网站。在以下的说明中您将需要参考示例网站的源代码。<br><a href='https://sample.amipro.me/modal-demo.html' target='_blank'>https://sample.amipro.me/modal-demo.html</a>");
lang_map.set("ja", "以下のリンクをクリックして、サンプルサイトに入ってください。以下の説明では、サンプルサイトのソースコードを参照する必要があります。<br><a href='https://sample.amipro.me/modal-demo.html' target='_blank'>https://sample.amipro.me/modal-demo.html</a>"); lang_map.set("ja", "以下のリンクをクリックして、サンプルサイトに入ってください。以下の説明では、サンプルサイトのソースコードを参照する必要があります。<br><a href='https://sample.amipro.me/modal-demo.html' target='_blank'>https://sample.amipro.me/modal-demo.html</a>");
i18n_messages.set("info_top_step1", lang_map); i18n_messages.set("info_top_step1", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Step2: Login page integration"); lang_map.set("en", "Step2: Login page integration");
lang_map.set("zh-CN", "步骤2: 登录页面集成"); lang_map.set("zh-CN", "步骤2: 登录页面集成");
lang_map.set("ja", "ステップ２: ログインページの統合"); lang_map.set("ja", "ステップ２: ログインページの統合");
i18n_messages.set("btn_step2", lang_map); i18n_messages.set("btn_step2", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Reference the sample site to introduce the amiPro JavaScript SDK and call the Passkey login integration API with UI."); lang_map.set("en", "Reference the sample site to introduce the amiPro JavaScript SDK and call the Passkey login integration API with UI.");
lang_map.set("zh-CN", "参考示例网站，在登录页面引入amiPro JavaScript SDK，并调用带UI的 Passkey 登录集成API。"); lang_map.set("zh-CN", "参考示例网站，在登录页面引入amiPro JavaScript SDK，并调用带UI的 Passkey 登录集成API。");
lang_map.set("ja", "サンプルサイトを参考にして、amiPro JavaScript SDK を導入し、UI付きのパスキー・ログイン統合 API を呼び出します。"); lang_map.set("ja", "サンプルサイトを参考にして、amiPro JavaScript SDK を導入し、UI付きのパスキー・ログイン統合 API を呼び出します。");
i18n_messages.set("info_top_step2", lang_map); i18n_messages.set("info_top_step2", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Step3: Build devices management page"); lang_map.set("en", "Step3: Build devices management page");
lang_map.set("zh-CN", "步骤3: 构建设备管理页面"); lang_map.set("zh-CN", "步骤3: 构建设备管理页面");
lang_map.set("ja", "ステップ３: デバイス管理ページの構築"); lang_map.set("ja", "ステップ３: デバイス管理ページの構築");
i18n_messages.set("btn_step3", lang_map); i18n_messages.set("btn_step3", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Refer to the example website, include the amiPro JavaScript SDK on the appropriate page after login, and call the device management integration API with UI."); lang_map.set("en", "Refer to the example website, include the amiPro JavaScript SDK on the appropriate page after login, and call the device management integration API with UI.");
lang_map.set("zh-CN", "参考示例网站，在登录后的适当页面引入amiPro JavaScript SDK，并调用带UI的设备管理集成API。"); lang_map.set("zh-CN", "参考示例网站，在登录后的适当页面引入amiPro JavaScript SDK，并调用带UI的设备管理集成API。");
lang_map.set("ja", "サンプルサイトを参考にして、ログイン後の適切なページにamiPro JavaScript SDKを導入し、UI付きのデバイス管理統合APIを呼び出します。"); lang_map.set("ja", "サンプルサイトを参考にして、ログイン後の適切なページにamiPro JavaScript SDKを導入し、UI付きのデバイス管理統合APIを呼び出します。");
i18n_messages.set("info_top_step3", lang_map); i18n_messages.set("info_top_step3", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Step4: Session management"); lang_map.set("en", "Step4: Session management");
lang_map.set("zh-CN", "步骤4: 会话管理"); lang_map.set("zh-CN", "步骤4: 会话管理");
lang_map.set("ja", "ステップ４: セッション管理"); lang_map.set("ja", "ステップ４: セッション管理");
i18n_messages.set("btn_step4", lang_map); i18n_messages.set("btn_step4", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "There are two methods of session management:<br>Method 1. Use amiPro's validSession API to manage sessions. Refer to the setSessionStatus function in <a href='https://sample.amipro.me/modal-demo.html' target='_blank'>https://sample.amipro.me/modal-demo.html</a>. <br>Method 2: Use your website's original session management, just call amiPro's logoutFido2UserSession function in your website's original session timeout processing."); lang_map.set("en", "There are two methods of session management:<br>Method 1. Use amiPro's validSession API to manage sessions. Refer to the setSessionStatus function in <a href='https://sample.amipro.me/modal-demo.html' target='_blank'>https://sample.amipro.me/modal-demo.html</a>. <br>Method 2: Use your website's original session management, just call amiPro's logoutFido2UserSession function in your website's original session timeout processing.");
lang_map.set("zh-CN", "会话管理有两种方式：<br>方式1、使用amiPro的validSession API 管理会话。参考<a href='https://sample.amipro.me/modal-demo.html' target='_blank'>https://sample.amipro.me/modal-demo.html</a>中的setSessionStatus函数。<br>方式2、使用您的网站原有的会话管理，只需在您的网站原有的会话超时的处理中调用amiPro的logoutFido2UserSession函数。"); lang_map.set("zh-CN", "会话管理有两种方式：<br>方式1、使用amiPro的validSession API 管理会话。参考<a href='https://sample.amipro.me/modal-demo.html' target='_blank'>https://sample.amipro.me/modal-demo.html</a>中的setSessionStatus函数。<br>方式2、使用您的网站原有的会话管理，只需在您的网站原有的会话超时的处理中调用amiPro的logoutFido2UserSession函数。");
lang_map.set("ja", "セッション管理は2つ方法があります:<br>方法 1: amiPro の validSession API を使用してセッションを管理します。<a href='https://sample.amipro.me/modal-demo.html' target='_blank'>https://sample.amipro.me/modal-demo.html</a>にあるsetSessionStatus関数を参考してください。 <br>方法 2: Web サイトの既存のセッション管理を使用します。Web サイトの既存のセッションのタイムアウト処理の中に、 amiPro の logoutFido2UserSession 関数を呼び出すだけで管理出来ます。"); lang_map.set("ja", "セッション管理は2つ方法があります:<br>方法 1: amiPro の validSession API を使用してセッションを管理します。<a href='https://sample.amipro.me/modal-demo.html' target='_blank'>https://sample.amipro.me/modal-demo.html</a>にあるsetSessionStatus関数を参考してください。 <br>方法 2: Web サイトの既存のセッション管理を使用します。Web サイトの既存のセッションのタイムアウト処理の中に、 amiPro の logoutFido2UserSession 関数を呼び出すだけで管理出来ます。");
i18n_messages.set("info_top_step4", lang_map); i18n_messages.set("info_top_step4", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Step5: Management Portal registration"); lang_map.set("en", "Step5: Management Portal registration");
lang_map.set("zh-CN", "步骤5: 管理门户注册"); lang_map.set("zh-CN", "步骤5: 管理门户注册");
lang_map.set("ja", "ステップ５: 管理ポータル登録"); lang_map.set("ja", "ステップ５: 管理ポータル登録");
i18n_messages.set("btn_step5", lang_map); i18n_messages.set("btn_step5", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Use your email address to register amiPro management portal for free:<br>1. Please use the PC and other devices you plan to manage amiPro and open the following link with your browser. <br><a href='https://portal.amipro.me/'>https://portal.amipro.me</a><br>2. In the management portal, enter your email address and click the [Create Account/Add new device] link. <br>3. Use the same browser to open the link in the email you received and add the device<br>4. Click [Go to top page] and use the added device [Passkey Login].<br><img src='files/portal_reg_en.jpg' width=50%>"); lang_map.set("en", "Use your email address to register amiPro management portal for free:<br>1. Please use the PC and other devices you plan to manage amiPro and open the following link with your browser. <br><a href='https://portal.amipro.me/'>https://portal.amipro.me</a><br>2. In the management portal, enter your email address and click the [Create Account/Add new device] link. <br>3. Use the same browser to open the link in the email you received and add the device<br>4. Click [Go to top page] and use the added device [Passkey Login].<br><img src='files/portal_reg_en.jpg' width=50%>");
lang_map.set("zh-CN", "使用您的邮件地址免费注册amiPro管理门户: <br>1、请用您准备管理amiPro的PC等设备及其浏览器打开以下链接。<br><a href='https://portal.amipro.me/'>https://portal.amipro.me</a><br>2、在管理门户中，输入您的邮件地址并点击【创建新账号或添加新设备】链接。<br>3、使用相同的浏览器打开您收到的邮件中的链接并添加设备<br>4、点击【去首页】，使用添加的设备【Passkey登录】进入管理门户。<br><img src='files/portal_reg_jp.jpg' width=50%>"); lang_map.set("zh-CN", "使用您的邮件地址免费注册amiPro管理门户: <br>1、请用您准备管理amiPro的PC等设备及其浏览器打开以下链接。<br><a href='https://portal.amipro.me/'>https://portal.amipro.me</a><br>2、在管理门户中，输入您的邮件地址并点击【创建新账号或添加新设备】链接。<br>3、使用相同的浏览器打开您收到的邮件中的链接并添加设备<br>4、点击【去首页】，使用添加的设备【Passkey登录】进入管理门户。<br><img src='files/portal_reg_jp.jpg' width=50%>");
lang_map.set("ja", "電子メール アドレスを使用して、amiPro 管理ポータルに無料でサインアップします: <br>1. amiPro を管理する予定の PC およびその他のデバイスを使用し、ブラウザで次のリンクを開いてください。 <br><a href='https://portal.amipro.me/'>https://portal.amipro.me</a><br>2. 管理ポータルで、電子メール アドレスを入力し、[アカウントを作成・新しいデバイスを追加] リンクをクリックしてください。 <br>3. 受信した電子メールにあるURLを同じブラウザで開いてデバイスを追加してください。<br>4. [トップページへ] をクリックして、登録したデバイスで[パスキーでログイン]でログインして、トップページへ。<br><img src='files/portal_reg_jp.jpg' width=50%>"); lang_map.set("ja", "電子メール アドレスを使用して、amiPro 管理ポータルに無料でサインアップします: <br>1. amiPro を管理する予定の PC およびその他のデバイスを使用し、ブラウザで次のリンクを開いてください。 <br><a href='https://portal.amipro.me/'>https://portal.amipro.me</a><br>2. 管理ポータルで、電子メール アドレスを入力し、[アカウントを作成・新しいデバイスを追加] リンクをクリックしてください。 <br>3. 受信した電子メールにあるURLを同じブラウザで開いてデバイスを追加してください。<br>4. [トップページへ] をクリックして、登録したデバイスで[パスキーでログイン]でログインして、トップページへ。<br><img src='files/portal_reg_jp.jpg' width=50%>");
i18n_messages.set("info_top_step5", lang_map); i18n_messages.set("info_top_step5", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Step６: FIDO2 server settings"); lang_map.set("en", "Step６: FIDO2 server settings");
lang_map.set("zh-CN", "步骤６: FIDO2服务器设置"); lang_map.set("zh-CN", "步骤６: FIDO2服务器设置");
lang_map.set("ja", "ステップ６: FIDO2 サーバー設定"); lang_map.set("ja", "ステップ６: FIDO2 サーバー設定");
i18n_messages.set("btn_step6", lang_map); i18n_messages.set("btn_step6", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Advanced Custom Deployment"); lang_map.set("en", "Advanced Custom Deployment");
lang_map.set("zh-CN", "深入定制部署"); lang_map.set("zh-CN", "深入定制部署");
lang_map.set("ja", "高度なカスタムデプロイメント"); lang_map.set("ja", "高度なカスタムデプロイメント");
i18n_messages.set("label_custom_deploy_title", lang_map); i18n_messages.set("label_custom_deploy_title", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Web Component integration, custom UI, and backend API integration for advanced deployment options"); lang_map.set("en", "Web Component integration, custom UI, and backend API integration for advanced deployment options");
lang_map.set("zh-CN", "Web Component 集成、自定义 UI 和后端 API 集成等高级部署选项"); lang_map.set("zh-CN", "Web Component 集成、自定义 UI 和后端 API 集成等高级部署选项");
lang_map.set("ja", "高度なデプロイメントオプションについては、Web Component統合、カスタムUI、バックエンドAPI統合"); lang_map.set("ja", "高度なデプロイメントオプションについては、Web Component統合、カスタムUI、バックエンドAPI統合");
i18n_messages.set("label_custom_deploy_desc", lang_map); i18n_messages.set("label_custom_deploy_desc", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Advanced Custom Deployment →"); lang_map.set("en", "Advanced Custom Deployment →");
lang_map.set("zh-CN", "深入定制部署 →"); lang_map.set("zh-CN", "深入定制部署 →");
lang_map.set("ja", "高度なカスタムデプロイメント →"); lang_map.set("ja", "高度なカスタムデプロイメント →");
i18n_messages.set("btn_custom_deploy", lang_map); i18n_messages.set("btn_custom_deploy", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Click [Settings] on the Portal left menu, and then click [Add] on the right page. Enter your website domain name (the port number cannot be included), and note that your website needs to use the HTTPS protocol. <br>【[Device Registration Page] is a link to the page where device management was integrated in step 3. <br>Other settings can be left as default.　Click [Submit] to complete the settings.<br><img src='files/portal_conf_en.jpg' width=80%>"); lang_map.set("en", "Click [Settings] on the Portal left menu, and then click [Add] on the right page. Enter your website domain name (the port number cannot be included), and note that your website needs to use the HTTPS protocol. <br>【[Device Registration Page] is a link to the page where device management was integrated in step 3. <br>Other settings can be left as default.　Click [Submit] to complete the settings.<br><img src='files/portal_conf_en.jpg' width=80%>");
lang_map.set("zh-CN", "点击管理门户左侧菜单中的【设定】，之后点击右侧页面中的【添加】。输入您的网站域名（不能包含端口号），注意您的网站需要使用HTTPS协议。<br>【[设备注册页面] 是在步骤 3 中集成设备管理功能的页面链接。<br>其他设置可以保留默认值。最后需要点击【提 交】完成设定。<br><img src='files/portal_conf_jp.jpg' width=80%>"); lang_map.set("zh-CN", "点击管理门户左侧菜单中的【设定】，之后点击右侧页面中的【添加】。输入您的网站域名（不能包含端口号），注意您的网站需要使用HTTPS协议。<br>【[设备注册页面] 是在步骤 3 中集成设备管理功能的页面链接。<br>其他设置可以保留默认值。最后需要点击【提 交】完成设定。<br><img src='files/portal_conf_jp.jpg' width=80%>");
lang_map.set("ja", "管理ポータル左メニューの[設定]をクリックし、右ページの[追加]をクリックしてください。 Web サイトのドメイン名を入力します (ポート番号は含めることはできません)。Web サイトでは HTTPS プロトコルを使用する必要があることに注意してください。 <br>【デバイス登録ページ】は手順3でデバイス管理を統合したページへのリンクです。<br>そのたの設定はデフォルトでよい、最後は送信をクリックして設定完了<br><img src='files/portal_conf_jp.jpg' width=80%>"); lang_map.set("ja", "管理ポータル左メニューの[設定]をクリックし、右ページの[追加]をクリックしてください。 Web サイトのドメイン名を入力します (ポート番号は含めることはできません)。Web サイトでは HTTPS プロトコルを使用する必要があることに注意してください。 <br>【デバイス登録ページ】は手順3でデバイス管理を統合したページへのリンクです。<br>そのたの設定はデフォルトでよい、最後は送信をクリックして設定完了<br><img src='files/portal_conf_jp.jpg' width=80%>");
i18n_messages.set("info_top_step6", lang_map); i18n_messages.set("info_top_step6", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Ship Passkeys in 15 Minutes"); lang_map.set("en", "Ship Passkeys in 15 Minutes");
lang_map.set("zh-CN", "在15分钟内部署Passkey"); lang_map.set("zh-CN", "在15分钟内部署Passkey");
lang_map.set("ja", "15分でパスキーを導入"); lang_map.set("ja", "15分でパスキーを導入");
i18n_messages.set("hero_title", lang_map); i18n_messages.set("hero_title", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Follow the production-proven playbook: explore the sample site, drop in the JavaScript SDK, fine-tune device management, and configure the amiPro portal for your domains."); lang_map.set("en", "Follow the production-proven playbook: explore the sample site, drop in the JavaScript SDK, fine-tune device management, and configure the amiPro portal for your domains.");
lang_map.set("zh-CN", "遵循已在生产中验证的流程：查看示例站点，嵌入 JavaScript SDK，微调设备管理，并为您的域配置 amiPro 门户。"); lang_map.set("zh-CN", "遵循已在生产中验证的流程：查看示例站点，嵌入 JavaScript SDK，微调设备管理，并为您的域配置 amiPro 门户。");
lang_map.set("ja", "本番で実績のある手順に従ってください: サンプルサイトを確認し、JavaScript SDK を導入し、デバイス管理を調整し、amiPro ポータルをドメインに対して設定します。"); lang_map.set("ja", "本番で実績のある手順に従ってください: サンプルサイトを確認し、JavaScript SDK を導入し、デバイス管理を調整し、amiPro ポータルをドメインに対して設定します。");
i18n_messages.set("hero_lead", lang_map); i18n_messages.set("hero_lead", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Browser + App SDK"); lang_map.set("en", "Browser + App SDK");
lang_map.set("zh-CN", "浏览器 + 应用 SDK"); lang_map.set("zh-CN", "浏览器 + 应用 SDK");
lang_map.set("ja", "ブラウザ + アプリ SDK"); lang_map.set("ja", "ブラウザ + アプリ SDK");
i18n_messages.set("hero_chip_1", lang_map); i18n_messages.set("hero_chip_1", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Recovery-ready"); lang_map.set("en", "Recovery-ready");
lang_map.set("zh-CN", "支持恢复"); lang_map.set("zh-CN", "支持恢复");
lang_map.set("ja", "リカバリ対応"); lang_map.set("ja", "リカバリ対応");
i18n_messages.set("hero_chip_2", lang_map); i18n_messages.set("hero_chip_2", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Session control"); lang_map.set("en", "Session control");
lang_map.set("zh-CN", "会话控制"); lang_map.set("zh-CN", "会话控制");
lang_map.set("ja", "セッション制御"); lang_map.set("ja", "セッション制御");
i18n_messages.set("hero_chip_3", lang_map); i18n_messages.set("hero_chip_3", lang_map);
lang_map = new Map();
lang_map.set("en", "Need white-glove integration help?");
lang_map.set("ja", "手厚いインテグレーションサポートが必要ですか？");
i18n_messages.set("cta_title", lang_map);
lang_map = new Map();
lang_map.set("en", "Share your stack and we will tailor the SDK sample for you.");
lang_map.set("ja", "お使いのスタックをお教えください。SDKサンプルをカスタマイズいたします。");
i18n_messages.set("cta_desc", lang_map);
lang_map = new Map();
lang_map.set("en", "Talk to us");
lang_map.set("ja", "お問い合わせ");
i18n_messages.set("cta_btn", lang_map);
window.onload = async function() { window.onload = async function() {
setI18NText(i18n_messages) setI18NText(i18n_messages)
initRevealAnimations() initRevealAnimations()
if (typeof createLanguageSelector === 'function') {
document.body.appendChild(createLanguageSelector());
}
} }
</script> </script>
@@ -331,10 +388,10 @@
<div class="cta-banner" data-animate> <div class="cta-banner" data-animate>
<div> <div>
<h4>Need white-glove integration help?</h4> <h4 id="cta_title">Need white-glove integration help?</h4>
<p style="margin: 0; color: var(--text-muted);">Share your stack and we will tailor the SDK sample for you.</p> <p style="margin: 0; color: var(--text-muted);" id="cta_desc">Share your stack and we will tailor the SDK sample for you.</p>
</div> </div>
<a href="mailto:sales@amipro.me?subject=amiPro%20integration" class="btn btn-primary">Talk to us</a> <a href="mailto:sales@amipro.me?subject=amiPro%20integration" class="btn btn-primary" id="cta_btn">Talk to us</a>
</div> </div>
<!-- / Content --> <!-- / Content -->

117
integration_api.html
View File

@@ -11,7 +11,50 @@
content="width=device-width, initial-scale=1.0" content="width=device-width, initial-scale=1.0"
/> />
<title> Integration - amiPro </title> <title>Advanced Passkey Integration - Web Component &amp; Backend API | amiPro</title>
<link rel="canonical" href="https://amipro.me/integration_api.html" />
<link rel="alternate" hreflang="en" href="https://amipro.me/integration_api.html" />
<link rel="alternate" hreflang="ja" href="https://amipro.me/ja/integration_api.html" />
<link rel="alternate" hreflang="zh-CN" href="https://amipro.me/zh-CN/integration_api.html" />
<link rel="alternate" hreflang="x-default" href="https://amipro.me/integration_api.html" />
<meta name="description" content="Advanced FIDO2 passkey integration: Web Component embedding, custom UI, backend API integration, and session management for enterprise deployments." />
<!-- Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Advanced Passkey Integration - Web Component &amp; Backend API | amiPro" />
<meta property="og:description" content="Advanced FIDO2 passkey integration: Web Component embedding, custom UI, backend API integration, and session management for enterprise deployments." />
<meta property="og:url" content="https://amipro.me/integration_api.html" />
<meta property="og:site_name" content="amiPro" />
<meta property="og:image" content="https://amipro.me/files/build.jpg" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="ja_JP" />
<meta property="og:locale:alternate" content="zh_CN" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Advanced Passkey Integration - Web Component &amp; Backend API | amiPro" />
<meta name="twitter:description" content="Advanced FIDO2 passkey integration: Web Component embedding, custom UI, backend API integration, and session management for enterprise deployments." />
<meta name="twitter:image" content="https://amipro.me/files/build.jpg" />
<!-- JSON-LD Article Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Advanced Passkey Integration - Web Component & Backend API",
"description": "Advanced FIDO2 passkey integration: Web Component embedding, custom UI, backend API integration, and session management for enterprise deployments.",
"url": "https://amipro.me/integration_api.html",
"publisher": {
"@type": "Organization",
"name": "amiPro",
"url": "https://amipro.me"
},
"image": "https://amipro.me/files/build.jpg",
"inLanguage": ["en", "ja", "zh-CN"]
}
</script>
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-850DCHX9EJ"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-850DCHX9EJ"></script>
@@ -23,8 +66,6 @@
gtag('config', 'G-850DCHX9EJ'); gtag('config', 'G-850DCHX9EJ');
</script> </script>
<meta name="description" content="the easiest to integrate Passkey cloud service" />
<!-- Favicon --> <!-- Favicon -->
<link rel="icon" type="image/x-icon" href="files/favicon.ico" /> <link rel="icon" type="image/x-icon" href="files/favicon.ico" />
@@ -75,61 +116,61 @@
const i18n_messages = new Map(); const i18n_messages = new Map();
var lang_map = new Map(); var lang_map = new Map();
lang_map.set("en-US", "amiPro - The easiest-to-integrate Passkey cloud service"); lang_map.set("en", "amiPro - The easiest-to-integrate Passkey cloud service");
lang_map.set("zh-CN", "amiPro - 最易集成的Passkey云服务"); lang_map.set("zh-CN", "amiPro - 最易集成的Passkey云服务");
lang_map.set("ja", "amiPro - 最も簡単に統合できるパスキー・クラウド・サービス"); lang_map.set("ja", "amiPro - 最も簡単に統合できるパスキー・クラウド・サービス");
i18n_messages.set("label_welcome", lang_map); i18n_messages.set("label_welcome", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Sample site"); lang_map.set("en", "Sample site");
lang_map.set("zh-CN", "示例网站"); lang_map.set("zh-CN", "示例网站");
lang_map.set("ja", "サンプルサイト"); lang_map.set("ja", "サンプルサイト");
i18n_messages.set("label_sample", lang_map); i18n_messages.set("label_sample", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Contact us (sales@amipro.me)"); lang_map.set("en", "Contact us (sales@amipro.me)");
lang_map.set("zh-CN", "联系我们（sales@amipro.me）"); lang_map.set("zh-CN", "联系我们（sales@amipro.me）");
lang_map.set("ja", "お問い合わせ（sales@amipro.me）"); lang_map.set("ja", "お問い合わせ（sales@amipro.me）");
i18n_messages.set("title_contact", lang_map); i18n_messages.set("title_contact", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Contact us (sales@amipro.me)"); lang_map.set("en", "Contact us (sales@amipro.me)");
lang_map.set("zh-CN", "联系我们（sales@amipro.me）"); lang_map.set("zh-CN", "联系我们（sales@amipro.me）");
lang_map.set("ja", "お問い合わせ（sales@amipro.me）"); lang_map.set("ja", "お問い合わせ（sales@amipro.me）");
i18n_messages.set("title_contact_cta", lang_map); i18n_messages.set("title_contact_cta", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Three month free trial<br>(After free registration of the management portal, all functions are free to try for three months)<br>No credit card required."); lang_map.set("en", "Three month free trial<br>(After free registration of the management portal, all functions are free to try for three months)<br>No credit card required.");
lang_map.set("zh-CN", "三个月免费试用<br>（免费注册管理门户后，所有功能免费试用三个月）<br> 无需信用卡"); lang_map.set("zh-CN", "三个月免费试用<br>（免费注册管理门户后，所有功能免费试用三个月）<br> 无需信用卡");
lang_map.set("ja", "3ヶ月間の無料トライアル<br>（管理ポータルの無料登録後、すべての機能を3ヶ月間無料でお試しいただけます）<br> クレジットカードは不要です。"); lang_map.set("ja", "3ヶ月間の無料トライアル<br>（管理ポータルの無料登録後、すべての機能を3ヶ月間無料でお試しいただけます）<br> クレジットカードは不要です。");
i18n_messages.set("btn_portal", lang_map); i18n_messages.set("btn_portal", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "How to integrate"); lang_map.set("en", "How to integrate");
lang_map.set("zh-CN", "如何集成"); lang_map.set("zh-CN", "如何集成");
lang_map.set("ja", "統合方法"); lang_map.set("ja", "統合方法");
i18n_messages.set("label_integartion_title", lang_map); i18n_messages.set("label_integartion_title", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Step1: Open sample site"); lang_map.set("en", "Step1: Open sample site");
lang_map.set("zh-CN", "步骤1: 打开示例网站"); lang_map.set("zh-CN", "步骤1: 打开示例网站");
lang_map.set("ja", "ステップ1: サンプルサイトを開く"); lang_map.set("ja", "ステップ1: サンプルサイトを開く");
i18n_messages.set("btn_step1", lang_map); i18n_messages.set("btn_step1", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Click the following link to enter the sample website, enter any user name and password, and log in to the website. In the following instructions you will need to refer to the source code of the sample website. <br><a href='https://sample.amipro.me/' target='_blank'>https://sample.amipro.me</a>"); lang_map.set("en", "Click the following link to enter the sample website, enter any user name and password, and log in to the website. In the following instructions you will need to refer to the source code of the sample website. <br><a href='https://sample.amipro.me/' target='_blank'>https://sample.amipro.me</a>");
lang_map.set("zh-CN", "点击以下链接，进入示例网站，输入任意用户名和密码，登录网站。在以下的说明中您将需要参考示例网站的源代码。<br><a href='https://sample.amipro.me/' target='_blank'>https://sample.amipro.me</a>"); lang_map.set("zh-CN", "点击以下链接，进入示例网站，输入任意用户名和密码，登录网站。在以下的说明中您将需要参考示例网站的源代码。<br><a href='https://sample.amipro.me/' target='_blank'>https://sample.amipro.me</a>");
lang_map.set("ja", "以下のリンクをクリックして、サンプルサイトに入り、任意のユーザー名とパスワードを入力して、サイトにログインしてください。以下の説明では、サンプルサイトのソースコードを参照する必要があります。<br><a href='https://sample.amipro.me/' target='_blank'>https://sample.amipro.me</a>"); lang_map.set("ja", "以下のリンクをクリックして、サンプルサイトに入り、任意のユーザー名とパスワードを入力して、サイトにログインしてください。以下の説明では、サンプルサイトのソースコードを参照する必要があります。<br><a href='https://sample.amipro.me/' target='_blank'>https://sample.amipro.me</a>");
i18n_messages.set("info_top_step1", lang_map); i18n_messages.set("info_top_step1", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Step2: Login page integration"); lang_map.set("en", "Step2: Login page integration");
lang_map.set("zh-CN", "步骤2: 登录页面集成"); lang_map.set("zh-CN", "步骤2: 登录页面集成");
lang_map.set("ja", "ステップ２: ログインページの統合"); lang_map.set("ja", "ステップ２: ログインページの統合");
i18n_messages.set("btn_step2", lang_map); i18n_messages.set("btn_step2", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Use the amiPro JavaScript SDK to add passkey sign-in to your website's login page. <br>1. Download the amiPro SDK. <br><a href='https://sample.amipro.me/files/dfido2-lib.js' target='_blank'>dfido2-lib.js</a><br><a href='https://sample.amipro.me/files/amipro_utils.js' target='_blank'>amipro_utils.js</a><br>"+ lang_map.set("en", "Use the amiPro JavaScript SDK to add passkey sign-in to your website's login page. <br>1. Download the amiPro SDK. <br><a href='https://sample.amipro.me/files/dfido2-lib.js' target='_blank'>dfido2-lib.js</a><br><a href='https://sample.amipro.me/files/amipro_utils.js' target='_blank'>amipro_utils.js</a><br>"+
"2. In the head section, import the SDK with script tags specifying src.<br>3. Refer to the window.onload code in the sample site's head and add passkey login to your website's login page.<br><a href='https://sample.amipro.me/login.html' target='_blank'>https://sample.amipro.me/login.html</a>"); "2. In the head section, import the SDK with script tags specifying src.<br>3. Refer to the window.onload code in the sample site's head and add passkey login to your website's login page.<br><a href='https://sample.amipro.me/login.html' target='_blank'>https://sample.amipro.me/login.html</a>");
lang_map.set("zh-CN", "使用 amiPro JavaScript SDK 为网站登录页面集成 Passkey 登录。<br>1. 下载 amiPro SDK。<br><a href='https://sample.amipro.me/files/dfido2-lib.js' target='_blank'>dfido2-lib.js</a><br><a href='https://sample.amipro.me/files/amipro_utils.js' target='_blank'>amipro_utils.js</a><br>"+ lang_map.set("zh-CN", "使用 amiPro JavaScript SDK 为网站登录页面集成 Passkey 登录。<br>1. 下载 amiPro SDK。<br><a href='https://sample.amipro.me/files/dfido2-lib.js' target='_blank'>dfido2-lib.js</a><br><a href='https://sample.amipro.me/files/amipro_utils.js' target='_blank'>amipro_utils.js</a><br>"+
"2. 在head部分使用带 src 的 script 标签引入 SDK。<br>3. 参考示例站点head中 window.onload 周边的代码，将 Passkey 登录集成到网站的登录页面。<br><a href='https://sample.amipro.me/login.html' target='_blank'>https://sample.amipro.me/login.html</a>"); "2. 在head部分使用带 src 的 script 标签引入 SDK。<br>3. 参考示例站点head中 window.onload 周边的代码，将 Passkey 登录集成到网站的登录页面。<br><a href='https://sample.amipro.me/login.html' target='_blank'>https://sample.amipro.me/login.html</a>");
@@ -138,86 +179,104 @@
i18n_messages.set("info_top_step2", lang_map); i18n_messages.set("info_top_step2", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Step3: Build devices management page"); lang_map.set("en", "Step3: Build devices management page");
lang_map.set("zh-CN", "步骤3: 构建设备管理页面"); lang_map.set("zh-CN", "步骤3: 构建设备管理页面");
lang_map.set("ja", "ステップ３: デバイス管理ページの構築"); lang_map.set("ja", "ステップ３: デバイス管理ページの構築");
i18n_messages.set("btn_step3", lang_map); i18n_messages.set("btn_step3", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "The device management page provides two functions:<br>1. When the user loses or replaces a device such as a registered mobile phone, use the recovery link generated by the management portal to replace the device. <br>2. Users add and delete registered devices. <br>Please refer to the source code of the sample site to integrate the device management page into your website. <br><a href='https://sample.amipro.me/devices.html' target='_blank'>https://sample.amipro.me/devices.html</a><br> The code surrounding reg_session_id is the recovery link processing code."); lang_map.set("en", "The device management page provides two functions:<br>1. When the user loses or replaces a device such as a registered mobile phone, use the recovery link generated by the management portal to replace the device. <br>2. Users add and delete registered devices. <br>Please refer to the source code of the sample site to integrate the device management page into your website. <br><a href='https://sample.amipro.me/devices.html' target='_blank'>https://sample.amipro.me/devices.html</a><br> The code surrounding reg_session_id is the recovery link processing code.");
lang_map.set("zh-CN", "设备管理页面提供两大功能：<br>1、当用户丢失或更换注册过的手机等设备时，使用管理门户生成的恢复链接替换设备。<br>2、用户追加以及删除注册的设备。<br>请参考示例站点的源代码，将设备管理页面集成到网站。<br><a href='https://sample.amipro.me/devices.html' target='_blank'>https://sample.amipro.me/devices.html</a><br>其中reg_session_id周边的代码为恢复链接处理代码。"); lang_map.set("zh-CN", "设备管理页面提供两大功能：<br>1、当用户丢失或更换注册过的手机等设备时，使用管理门户生成的恢复链接替换设备。<br>2、用户追加以及删除注册的设备。<br>请参考示例站点的源代码，将设备管理页面集成到网站。<br><a href='https://sample.amipro.me/devices.html' target='_blank'>https://sample.amipro.me/devices.html</a><br>其中reg_session_id周边的代码为恢复链接处理代码。");
lang_map.set("ja", "デバイス管理ページは2つ機能があります:<br>1. ユーザーが登録済みの携帯電話などのデバイスを紛失または交換した場合、管理ポータルによって生成されたリカバリー・リンクを使用してデバイスを更新する機能。 <br>2. ユーザーはデバイスを追加および削除する機能。 <br>デバイス管理ページを Web サイトに統合するには、サンプル サイトのソース コードを参照してください。 <br><a href='https://sample.amipro.me/devices.html' target='_blank'>https://sample.amipro.me/devices.html</a><br>この中に reg_session_id　周辺のコードはリカバリ・リンクの処理コードです。"); lang_map.set("ja", "デバイス管理ページは2つ機能があります:<br>1. ユーザーが登録済みの携帯電話などのデバイスを紛失または交換した場合、管理ポータルによって生成されたリカバリー・リンクを使用してデバイスを更新する機能。 <br>2. ユーザーはデバイスを追加および削除する機能。 <br>デバイス管理ページを Web サイトに統合するには、サンプル サイトのソース コードを参照してください。 <br><a href='https://sample.amipro.me/devices.html' target='_blank'>https://sample.amipro.me/devices.html</a><br>この中に reg_session_id　周辺のコードはリカバリ・リンクの処理コードです。");
i18n_messages.set("info_top_step3", lang_map); i18n_messages.set("info_top_step3", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Step4: Session management"); lang_map.set("en", "Step4: Session management");
lang_map.set("zh-CN", "步骤4: 会话管理"); lang_map.set("zh-CN", "步骤4: 会话管理");
lang_map.set("ja", "ステップ４: セッション管理"); lang_map.set("ja", "ステップ４: セッション管理");
i18n_messages.set("btn_step4", lang_map); i18n_messages.set("btn_step4", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "There are two methods of session management:<br>Method 1. Use amiPro's validSession API to manage sessions. Refer to the setSessionStatus function in <a href='https://sample.amipro.me/devices.html' target='_blank'>https://sample.amipro.me/devices.html</a>. <br>Method 2: Use your website's original session management, just call amiPro's logoutFido2UserSession function in your website's original session timeout processing."); lang_map.set("en", "There are two methods of session management:<br>Method 1. Use amiPro's validSession API to manage sessions. Refer to the setSessionStatus function in <a href='https://sample.amipro.me/devices.html' target='_blank'>https://sample.amipro.me/devices.html</a>. <br>Method 2: Use your website's original session management, just call amiPro's logoutFido2UserSession function in your website's original session timeout processing.");
lang_map.set("zh-CN", "会话管理有两种方式：<br>方式1、使用amiPro的validSession API 管理会话。参考<a href='https://sample.amipro.me/devices.html' target='_blank'>https://sample.amipro.me/devices.html</a>中的setSessionStatus函数。<br>方式2、使用您的网站原有的会话管理，只需在您的网站原有的会话超时的处理中调用amiPro的logoutFido2UserSession函数。"); lang_map.set("zh-CN", "会话管理有两种方式：<br>方式1、使用amiPro的validSession API 管理会话。参考<a href='https://sample.amipro.me/devices.html' target='_blank'>https://sample.amipro.me/devices.html</a>中的setSessionStatus函数。<br>方式2、使用您的网站原有的会话管理，只需在您的网站原有的会话超时的处理中调用amiPro的logoutFido2UserSession函数。");
lang_map.set("ja", "セッション管理は2つ方法があります:<br>方法 1: amiPro の validSession API を使用してセッションを管理します。<a href='https://sample.amipro.me/devices.html' target='_blank'>https://sample.amipro.me/devices.html</a>にあるsetSessionStatus関数を参考してください。 <br>方法 2: Web サイトの既存のセッション管理を使用します。Web サイトの既存のセッションのタイムアウト処理の中に、 amiPro の logoutFido2UserSession 関数を呼び出すだけで管理出来ます。"); lang_map.set("ja", "セッション管理は2つ方法があります:<br>方法 1: amiPro の validSession API を使用してセッションを管理します。<a href='https://sample.amipro.me/devices.html' target='_blank'>https://sample.amipro.me/devices.html</a>にあるsetSessionStatus関数を参考してください。 <br>方法 2: Web サイトの既存のセッション管理を使用します。Web サイトの既存のセッションのタイムアウト処理の中に、 amiPro の logoutFido2UserSession 関数を呼び出すだけで管理出来ます。");
i18n_messages.set("info_top_step4", lang_map); i18n_messages.set("info_top_step4", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Step5: Management Portal registration"); lang_map.set("en", "Step5: Management Portal registration");
lang_map.set("zh-CN", "步骤5: 管理门户注册"); lang_map.set("zh-CN", "步骤5: 管理门户注册");
lang_map.set("ja", "ステップ５: 管理ポータル登録"); lang_map.set("ja", "ステップ５: 管理ポータル登録");
i18n_messages.set("btn_step5", lang_map); i18n_messages.set("btn_step5", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Use your email address to register amiPro management portal for free:<br>1. Please use the PC and other devices you plan to manage amiPro and open the following link with your browser. <br><a href='https://portal.amipro.me/'>https://portal.amipro.me</a><br>2. In the management portal, enter your email address and click the [Create Account/Add new device] link. <br>3. Use the same browser to open the link in the email you received and add the device<br>4. Click [Go to top page] and use the added device [Passkey Login].<br><img src='files/portal_reg_en.jpg' width=50%>"); lang_map.set("en", "Use your email address to register amiPro management portal for free:<br>1. Please use the PC and other devices you plan to manage amiPro and open the following link with your browser. <br><a href='https://portal.amipro.me/'>https://portal.amipro.me</a><br>2. In the management portal, enter your email address and click the [Create Account/Add new device] link. <br>3. Use the same browser to open the link in the email you received and add the device<br>4. Click [Go to top page] and use the added device [Passkey Login].<br><img src='files/portal_reg_en.jpg' width=50%>");
lang_map.set("zh-CN", "使用您的邮件地址免费注册amiPro管理门户: <br>1、请用您准备管理amiPro的PC等设备及其浏览器打开以下链接。<br><a href='https://portal.amipro.me/'>https://portal.amipro.me</a><br>2、在管理门户中，输入您的邮件地址并点击【创建新账号或添加新设备】链接。<br>3、使用相同的浏览器打开您收到的邮件中的链接并添加设备<br>4、点击【去首页】，使用添加的设备【Passkey登录】进入管理门户。<br><img src='files/portal_reg_jp.jpg' width=50%>"); lang_map.set("zh-CN", "使用您的邮件地址免费注册amiPro管理门户: <br>1、请用您准备管理amiPro的PC等设备及其浏览器打开以下链接。<br><a href='https://portal.amipro.me/'>https://portal.amipro.me</a><br>2、在管理门户中，输入您的邮件地址并点击【创建新账号或添加新设备】链接。<br>3、使用相同的浏览器打开您收到的邮件中的链接并添加设备<br>4、点击【去首页】，使用添加的设备【Passkey登录】进入管理门户。<br><img src='files/portal_reg_jp.jpg' width=50%>");
lang_map.set("ja", "電子メール アドレスを使用して、amiPro 管理ポータルに無料でサインアップします: <br>1. amiPro を管理する予定の PC およびその他のデバイスを使用し、ブラウザで次のリンクを開いてください。 <br><a href='https://portal.amipro.me/'>https://portal.amipro.me</a><br>2. 管理ポータルで、電子メール アドレスを入力し、[アカウントを作成・新しいデバイスを追加] リンクをクリックしてください。 <br>3. 受信した電子メールにあるURLを同じブラウザで開いてデバイスを追加してください。<br>4. [トップページへ] をクリックして、登録したデバイスで[パスキーでログイン]でログインして、トップページへ。<br><img src='files/portal_reg_jp.jpg' width=50%>"); lang_map.set("ja", "電子メール アドレスを使用して、amiPro 管理ポータルに無料でサインアップします: <br>1. amiPro を管理する予定の PC およびその他のデバイスを使用し、ブラウザで次のリンクを開いてください。 <br><a href='https://portal.amipro.me/'>https://portal.amipro.me</a><br>2. 管理ポータルで、電子メール アドレスを入力し、[アカウントを作成・新しいデバイスを追加] リンクをクリックしてください。 <br>3. 受信した電子メールにあるURLを同じブラウザで開いてデバイスを追加してください。<br>4. [トップページへ] をクリックして、登録したデバイスで[パスキーでログイン]でログインして、トップページへ。<br><img src='files/portal_reg_jp.jpg' width=50%>");
i18n_messages.set("info_top_step5", lang_map); i18n_messages.set("info_top_step5", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Step６: FIDO2 server settings"); lang_map.set("en", "Step６: FIDO2 server settings");
lang_map.set("zh-CN", "步骤６: FIDO2服务器设置"); lang_map.set("zh-CN", "步骤６: FIDO2服务器设置");
lang_map.set("ja", "ステップ６: FIDO2 サーバー設定"); lang_map.set("ja", "ステップ６: FIDO2 サーバー設定");
i18n_messages.set("btn_step6", lang_map); i18n_messages.set("btn_step6", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Click [Settings] on the Portal left menu, and then click [Add] on the right page. Enter your website domain name (the port number cannot be included), and note that your website needs to use the HTTPS protocol. <br>【Device registration page】is the link to the device management page built by step 3.<br>Click [Submit] to complete the settings.<br><img src='files/portal_conf_en.jpg' width=80%>"); lang_map.set("en", "Click [Settings] on the Portal left menu, and then click [Add] on the right page. Enter your website domain name (the port number cannot be included), and note that your website needs to use the HTTPS protocol. <br>【Device registration page】is the link to the device management page built by step 3.<br>Click [Submit] to complete the settings.<br><img src='files/portal_conf_en.jpg' width=80%>");
lang_map.set("zh-CN", "点击管理门户左侧菜单中的【设定】，之后点击右侧页面中的【添加】。输入您的网站域名（不能包含端口号），注意您的网站需要使用HTTPS协议。<br>【设备注册页面】为步骤3构建的设备管理页面的链接。<br>最后需要点击【提 交】完成设定。<br><img src='files/portal_conf_jp.jpg' width=80%>"); lang_map.set("zh-CN", "点击管理门户左侧菜单中的【设定】，之后点击右侧页面中的【添加】。输入您的网站域名（不能包含端口号），注意您的网站需要使用HTTPS协议。<br>【设备注册页面】为步骤3构建的设备管理页面的链接。<br>最后需要点击【提 交】完成设定。<br><img src='files/portal_conf_jp.jpg' width=80%>");
lang_map.set("ja", "管理ポータル左メニューの[設定]をクリックし、右ページの[追加]をクリックしてください。 Web サイトのドメイン名を入力します (ポート番号は含めることはできません)。Web サイトでは HTTPS プロトコルを使用する必要があることに注意してください。 <br>【デバイス登録ページ】は手順3で作成したデバイス管理ページへのリンクです。<br>最後は送信をクリックして設定完了<br><img src='files/portal_conf_jp.jpg' width=80%>"); lang_map.set("ja", "管理ポータル左メニューの[設定]をクリックし、右ページの[追加]をクリックしてください。 Web サイトのドメイン名を入力します (ポート番号は含めることはできません)。Web サイトでは HTTPS プロトコルを使用する必要があることに注意してください。 <br>【デバイス登録ページ】は手順3で作成したデバイス管理ページへのリンクです。<br>最後は送信をクリックして設定完了<br><img src='files/portal_conf_jp.jpg' width=80%>");
i18n_messages.set("info_top_step6", lang_map); i18n_messages.set("info_top_step6", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Deeply customize and deploy Passkey"); lang_map.set("en", "Deeply customize and deploy Passkey");
lang_map.set("zh-CN", "更加深入定制部署Passkey"); lang_map.set("zh-CN", "更加深入定制部署Passkey");
lang_map.set("ja", "さらにカスタマイズしてパスキーを展開"); lang_map.set("ja", "さらにカスタマイズしてパスキーを展開");
i18n_messages.set("hero_title", lang_map); i18n_messages.set("hero_title", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Follow the production-proven playbook: explore the sample site, drop in the JavaScript SDK, fine-tune device management, and configure the amiPro portal for your domains."); lang_map.set("en", "Follow the production-proven playbook: explore the sample site, drop in the JavaScript SDK, fine-tune device management, and configure the amiPro portal for your domains.");
lang_map.set("zh-CN", "遵循已在生产中验证的流程：查看示例站点，嵌入 JavaScript SDK，微调设备管理，并为您的域配置 amiPro 门户。"); lang_map.set("zh-CN", "遵循已在生产中验证的流程：查看示例站点，嵌入 JavaScript SDK，微调设备管理，并为您的域配置 amiPro 门户。");
lang_map.set("ja", "本番で実績のある手順に従ってください: サンプルサイトを確認し、JavaScript SDK を導入し、デバイス管理を調整し、amiPro ポータルをドメインに対して設定します。"); lang_map.set("ja", "本番で実績のある手順に従ってください: サンプルサイトを確認し、JavaScript SDK を導入し、デバイス管理を調整し、amiPro ポータルをドメインに対して設定します。");
i18n_messages.set("hero_lead", lang_map); i18n_messages.set("hero_lead", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Browser + App SDK"); lang_map.set("en", "Browser + App SDK");
lang_map.set("zh-CN", "浏览器 + 应用 SDK"); lang_map.set("zh-CN", "浏览器 + 应用 SDK");
lang_map.set("ja", "ブラウザ + アプリ SDK"); lang_map.set("ja", "ブラウザ + アプリ SDK");
i18n_messages.set("hero_chip_1", lang_map); i18n_messages.set("hero_chip_1", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Recovery-ready"); lang_map.set("en", "Recovery-ready");
lang_map.set("zh-CN", "支持恢复"); lang_map.set("zh-CN", "支持恢复");
lang_map.set("ja", "リカバリ対応"); lang_map.set("ja", "リカバリ対応");
i18n_messages.set("hero_chip_2", lang_map); i18n_messages.set("hero_chip_2", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Session control"); lang_map.set("en", "Session control");
lang_map.set("zh-CN", "会话控制"); lang_map.set("zh-CN", "会话控制");
lang_map.set("ja", "セッション制御"); lang_map.set("ja", "セッション制御");
i18n_messages.set("hero_chip_3", lang_map); i18n_messages.set("hero_chip_3", lang_map);
lang_map = new Map();
lang_map.set("en", "Need white-glove integration help?");
lang_map.set("ja", "手厚いインテグレーションサポートが必要ですか？");
i18n_messages.set("cta_title", lang_map);
lang_map = new Map();
lang_map.set("en", "Share your stack and we will tailor the SDK sample for you.");
lang_map.set("ja", "お使いのスタックをお教えください。SDKサンプルをカスタマイズいたします。");
i18n_messages.set("cta_desc", lang_map);
lang_map = new Map();
lang_map.set("en", "Talk to us");
lang_map.set("ja", "お問い合わせ");
i18n_messages.set("cta_btn", lang_map);
window.onload = async function() { window.onload = async function() {
setI18NText(i18n_messages) setI18NText(i18n_messages)
initRevealAnimations() initRevealAnimations()
if (typeof createLanguageSelector === 'function') {
document.body.appendChild(createLanguageSelector());
}
} }
</script> </script>
@@ -310,10 +369,10 @@
<div class="cta-banner" data-animate> <div class="cta-banner" data-animate>
<div> <div>
<h4>Need white-glove integration help?</h4> <h4 id="cta_title">Need white-glove integration help?</h4>
<p style="margin: 0; color: var(--text-muted);">Share your stack and we will tailor the SDK sample for you.</p> <p style="margin: 0; color: var(--text-muted);" id="cta_desc">Share your stack and we will tailor the SDK sample for you.</p>
</div> </div>
<a href="mailto:sales@amipro.me?subject=amiPro%20integration" class="btn btn-primary">Talk to us</a> <a href="mailto:sales@amipro.me?subject=amiPro%20integration" class="btn btn-primary" id="cta_btn">Talk to us</a>
</div> </div>
<!-- / Content --> <!-- / Content -->

179
merits.html
View File

@@ -11,7 +11,87 @@
content="width=device-width, initial-scale=1.0" content="width=device-width, initial-scale=1.0"
/> />
<title> Passkeys - amiPro </title> <title>Passkey Benefits - Security, Conversion & Cost Savings | amiPro</title>
<link rel="canonical" href="https://amipro.me/merits.html" />
<link rel="alternate" hreflang="en" href="https://amipro.me/merits.html" />
<link rel="alternate" hreflang="ja" href="https://amipro.me/ja/merits.html" />
<link rel="alternate" hreflang="zh-CN" href="https://amipro.me/zh-CN/merits.html" />
<link rel="alternate" hreflang="x-default" href="https://amipro.me/merits.html" />
<meta name="description" content="Passkey authentication reduces phishing by 99.9%, boosts conversion rates, and cuts support costs by 75%. Learn how amiPro's FIDO2-certified platform delivers measurable ROI." />
<meta property="og:type" content="website" />
<meta property="og:title" content="Passkey Benefits - Security, Conversion & Cost Savings | amiPro" />
<meta property="og:description" content="Passkey authentication reduces phishing by 99.9%, boosts conversion rates, and cuts support costs by 75%. Learn how amiPro's FIDO2-certified platform delivers measurable ROI." />
<meta property="og:url" content="https://amipro.me/merits.html" />
<meta property="og:site_name" content="amiPro" />
<meta property="og:image" content="https://amipro.me/files/YubicoResearch.jpg" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Passkey Benefits - Security, Conversion & Cost Savings | amiPro" />
<meta name="twitter:description" content="Passkey authentication reduces phishing by 99.9%, boosts conversion rates, and cuts support costs by 75%. Learn how amiPro's FIDO2-certified platform delivers measurable ROI." />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Passkey Benefits - Security, Conversion & Cost Savings",
"description": "Passkey authentication reduces phishing by 99.9%, boosts conversion rates, and cuts support costs by 75%. Learn how amiPro's FIDO2-certified platform delivers measurable ROI.",
"url": "https://amipro.me/merits.html",
"datePublished": "2025-01-01T00:00:00Z",
"dateModified": "2025-06-21T00:00:00Z",
"author": {
"@type": "Person",
"name": "amiPro Engineering"
},
"publisher": {
"@type": "Organization",
"name": "amiPro"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "How much does passkey authentication reduce phishing?",
"acceptedAnswer": {
"@type": "Answer",
"text": "According to industry research, passkey authentication reduces phishing and credential theft by 99.9%. Passkeys are bound to the legitimate website domain, making them inherently resistant to phishing attacks that target passwords."
}
},
{
"@type": "Question",
"name": "What is the ROI of implementing passkeys?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Research shows a 203% ROI over 3 years for passkey implementation. Benefits include reduced phishing incidents, lower help desk costs (75% reduction in password reset tickets by year 3), and improved conversion rates from faster sign-ins."
}
},
{
"@type": "Question",
"name": "How do passkeys improve website conversion rates?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Passkeys improve conversion rates by eliminating password friction. Users sign in with a single biometric gesture (fingerprint or face) instead of typing passwords. This reduces sign-in abandonment and creates a smoother user experience, particularly on mobile devices."
}
},
{
"@type": "Question",
"name": "How much can passkeys reduce support costs?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Passkeys can reduce help desk support costs by up to 75% by year 3. Since passkeys eliminate password resets—one of the most common support requests—organizations see significant reductions in support ticket volume and associated costs."
}
}
]
}
</script>
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-850DCHX9EJ"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-850DCHX9EJ"></script>
@@ -23,7 +103,7 @@
gtag('config', 'G-850DCHX9EJ'); gtag('config', 'G-850DCHX9EJ');
</script> </script>
<meta name="description" content="the easiest to integrate Passkey cloud service" />
<!-- Favicon --> <!-- Favicon -->
<link rel="icon" type="image/x-icon" href="files/favicon.ico" /> <link rel="icon" type="image/x-icon" href="files/favicon.ico" />
@@ -75,37 +155,37 @@
const i18n_messages = new Map(); const i18n_messages = new Map();
var lang_map = new Map(); var lang_map = new Map();
lang_map.set("en-US", "amiPro - The easiest-to-integrate Passkey cloud service"); lang_map.set("en", "amiPro - The easiest-to-integrate Passkey cloud service");
lang_map.set("zh-CN", "amiPro - 最易集成的Passkey云服务"); lang_map.set("zh-CN", "amiPro - 最易集成的Passkey云服务");
lang_map.set("ja", "amiPro - 最も簡単に統合できるパスキー・クラウド・サービス"); lang_map.set("ja", "amiPro - 最も簡単に統合できるパスキー・クラウド・サービス");
i18n_messages.set("label_welcome", lang_map); i18n_messages.set("label_welcome", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Management Portal"); lang_map.set("en", "Management Portal");
lang_map.set("zh-CN", "管理门户"); lang_map.set("zh-CN", "管理门户");
lang_map.set("ja", "管理ポータル"); lang_map.set("ja", "管理ポータル");
i18n_messages.set("label_portal", lang_map); i18n_messages.set("label_portal", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Contact us(sales@amipro.me)"); lang_map.set("en", "Contact us(sales@amipro.me)");
lang_map.set("zh-CN", "联系我们(sales@amipro.me)"); lang_map.set("zh-CN", "联系我们(sales@amipro.me)");
lang_map.set("ja", "お問い合わせ(sales@amipro.me)"); lang_map.set("ja", "お問い合わせ(sales@amipro.me)");
i18n_messages.set("title_contact", lang_map); i18n_messages.set("title_contact", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Contact us(sales@amipro.me)"); lang_map.set("en", "Contact us(sales@amipro.me)");
lang_map.set("zh-CN", "联系我们(sales@amipro.me)"); lang_map.set("zh-CN", "联系我们(sales@amipro.me)");
lang_map.set("ja", "お問い合わせ(sales@amipro.me)"); lang_map.set("ja", "お問い合わせ(sales@amipro.me)");
i18n_messages.set("title_contact_cta", lang_map); i18n_messages.set("title_contact_cta", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Higher security"); lang_map.set("en", "Higher security");
lang_map.set("zh-CN", "更高的安全性"); lang_map.set("zh-CN", "更高的安全性");
lang_map.set("ja", "より高いセキュリティ"); lang_map.set("ja", "より高いセキュリティ");
i18n_messages.set("info_title_1", lang_map); i18n_messages.set("info_title_1", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Passkey authentication provides higher security than password-based authentication through stronger authentication methods, risk elimination, and phishing attack prevention.<br>* <b>Stronger authentication methods</b>: Passwords are subject to the risk of being guessed or stolen by others. In contrast, Passkey authentication uses stronger authentication factors such as biometrics (fingerprint, face recognition) or hardware keys (security keys, smart cards), which can better protect users' personal information from unauthorized access.<br>"+ lang_map.set("en", "Passkey authentication provides higher security than password-based authentication through stronger authentication methods, risk elimination, and phishing attack prevention.<br>* <b>Stronger authentication methods</b>: Passwords are subject to the risk of being guessed or stolen by others. In contrast, Passkey authentication uses stronger authentication factors such as biometrics (fingerprint, face recognition) or hardware keys (security keys, smart cards), which can better protect users' personal information from unauthorized access.<br>"+
"* <b>Elimination of password risks</b>: Passwords need to be selected and managed by users. However, in many cases, users do not choose strong passwords and tend to use the same password for multiple services. This exposes the risk that if a password is leaked, many accounts may be compromised. Passkey authentication eliminates such risks.<br>"+ "* <b>Elimination of password risks</b>: Passwords need to be selected and managed by users. However, in many cases, users do not choose strong passwords and tend to use the same password for multiple services. This exposes the risk that if a password is leaked, many accounts may be compromised. Passkey authentication eliminates such risks.<br>"+
"* <b>Countermeasures against phishing</b>: Phishing attacks are fraudulent methods that attempt to obtain passwords from users using fake websites or emails. With Passkey authentication, users do not need to enter passwords to authenticate, so they are less likely to be targeted by phishing attacks."); "* <b>Countermeasures against phishing</b>: Phishing attacks are fraudulent methods that attempt to obtain passwords from users using fake websites or emails. With Passkey authentication, users do not need to enter passwords to authenticate, so they are less likely to be targeted by phishing attacks.");
lang_map.set("zh-CN", "Passkey认证通过更强的认证方式、风险排除、防止钓鱼攻击等，提供比基于密码的认证更高的安全性。<br>* <b>更强的认证方式</b>：密码容易被他人猜测或盗取。相比之下，Passkey认证使用生物特征（指纹、面部识别）或硬件密钥（安全密钥、智能卡）等更强的认证因素，可以更好地保护用户的个人信息免受未经授权的访问。<br>"+ lang_map.set("zh-CN", "Passkey认证通过更强的认证方式、风险排除、防止钓鱼攻击等，提供比基于密码的认证更高的安全性。<br>* <b>更强的认证方式</b>：密码容易被他人猜测或盗取。相比之下，Passkey认证使用生物特征（指纹、面部识别）或硬件密钥（安全密钥、智能卡）等更强的认证因素，可以更好地保护用户的个人信息免受未经授权的访问。<br>"+
@@ -117,13 +197,13 @@
i18n_messages.set("info_1", lang_map); i18n_messages.set("info_1", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Increase website value"); lang_map.set("en", "Increase website value");
lang_map.set("zh-CN", "网站价值的提高"); lang_map.set("zh-CN", "网站价值的提高");
lang_map.set("ja", "ウェブサイトの価値向上"); lang_map.set("ja", "ウェブサイトの価値向上");
i18n_messages.set("info_title_2", lang_map); i18n_messages.set("info_title_2", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Passkey authentication can increase the value of a website through factors such as convenience, security, account protection, and user satisfaction.<br>* <b>Improved convenience</b>: Passkey authentication eliminates the hassle of users remembering or entering passwords. Instead, authentication can be done with simple means such as biometrics (fingerprint, face recognition) or hardware keys (security keys, smart cards). This improves the user experience and increases the convenience of the website.<br>"+ lang_map.set("en", "Passkey authentication can increase the value of a website through factors such as convenience, security, account protection, and user satisfaction.<br>* <b>Improved convenience</b>: Passkey authentication eliminates the hassle of users remembering or entering passwords. Instead, authentication can be done with simple means such as biometrics (fingerprint, face recognition) or hardware keys (security keys, smart cards). This improves the user experience and increases the convenience of the website.<br>"+
"* <b>Enhanced security</b>: Passkey authentication enhances the security of a website by using stronger authentication factors. Biometrics and hardware keys are more complex and less likely to be stolen than passwords, and are also resistant to phishing attacks. This improves the security level of the website and increases user trust.<br>"+ "* <b>Enhanced security</b>: Passkey authentication enhances the security of a website by using stronger authentication factors. Biometrics and hardware keys are more complex and less likely to be stolen than passwords, and are also resistant to phishing attacks. This improves the security level of the website and increases user trust.<br>"+
"* <b>Account protection</b>: Passkey authentication eliminates the risks associated with passwords (use of weak passwords, reuse, leakage, etc.). This enhances the protection of user accounts and reduces the risk of unauthorized access and data leakage.<br>"+ "* <b>Account protection</b>: Passkey authentication eliminates the risks associated with passwords (use of weak passwords, reuse, leakage, etc.). This enhances the protection of user accounts and reduces the risk of unauthorized access and data leakage.<br>"+
"* <b>Improved user satisfaction</b>: Passkey authentication eliminates the hassle of managing passwords and resetting forgotten passwords. Users can easily and securely access the website, reducing stress and frustration. This improves user satisfaction and may increase user loyalty and frequency of use of the website."); "* <b>Improved user satisfaction</b>: Passkey authentication eliminates the hassle of managing passwords and resetting forgotten passwords. Users can easily and securely access the website, reducing stress and frustration. This improves user satisfaction and may increase user loyalty and frequency of use of the website.");
@@ -138,13 +218,13 @@
i18n_messages.set("info_2", lang_map); i18n_messages.set("info_2", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Reduce operating costs"); lang_map.set("en", "Reduce operating costs");
lang_map.set("zh-CN", "降低运营成本"); lang_map.set("zh-CN", "降低运营成本");
lang_map.set("ja", "運用コストの低減"); lang_map.set("ja", "運用コストの低減");
i18n_messages.set("info_title_3", lang_map); i18n_messages.set("info_title_3", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Passkey authentication can reduce operating costs through factors such as reduced password reset, reduced security incidents, and simplified security management.<br>* <b>Reduced password reset</b>: With Passkey authentication, users do not need to remember or reset passwords. This reduces the number of password reset requests and responses to user support, which may reduce operating costs.<br>"+ lang_map.set("en", "Passkey authentication can reduce operating costs through factors such as reduced password reset, reduced security incidents, and simplified security management.<br>* <b>Reduced password reset</b>: With Passkey authentication, users do not need to remember or reset passwords. This reduces the number of password reset requests and responses to user support, which may reduce operating costs.<br>"+
"* <b>Reduced security incidents</b>: Password-based authentication has risks such as the use or reuse of weak passwords and password leakage. This increases the likelihood of security incidents such as unauthorized access and data leakage. Passkey authentication reduces these risks, which may reduce operating costs associated with security incidents.<br>"+ "* <b>Reduced security incidents</b>: Password-based authentication has risks such as the use or reuse of weak passwords and password leakage. This increases the likelihood of security incidents such as unauthorized access and data leakage. Passkey authentication reduces these risks, which may reduce operating costs associated with security incidents.<br>"+
"* <b>Simplified security management</b>: Passkey authentication reduces tasks related to password management and storage. Passwords require encryption and secure storage, and it is recommended to regularly manage and change password policies. In contrast, Passkey authentication uses simpler security elements (biometrics or hardware keys), which may simplify security management."); "* <b>Simplified security management</b>: Passkey authentication reduces tasks related to password management and storage. Passwords require encryption and secure storage, and it is recommended to regularly manage and change password policies. In contrast, Passkey authentication uses simpler security elements (biometrics or hardware keys), which may simplify security management.");
lang_map.set("zh-CN", "Passkey认证可以通过减少密码重置、减少安全事件和简化安全管理等因素来降低运营成本。<br>* <b>减少密码重置</b>：Passkey认证不需要用户记住或重置密码。这减少了密码重置请求和对用户支持的响应，可能会降低运营成本。<br>"+ lang_map.set("zh-CN", "Passkey认证可以通过减少密码重置、减少安全事件和简化安全管理等因素来降低运营成本。<br>* <b>减少密码重置</b>：Passkey认证不需要用户记住或重置密码。这减少了密码重置请求和对用户支持的响应，可能会降低运营成本。<br>"+
@@ -156,59 +236,73 @@
i18n_messages.set("info_3", lang_map); i18n_messages.set("info_3", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Effect analysis"); lang_map.set("en", "Effect analysis");
lang_map.set("zh-CN", "效果分析"); lang_map.set("zh-CN", "效果分析");
lang_map.set("ja", "効果分析"); lang_map.set("ja", "効果分析");
i18n_messages.set("info_title_4", lang_map); i18n_messages.set("info_title_4", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "According to the research of a leading company in the industry, Passkey is:<br>* Reduced phishing and credential theft:<b>99.9</b>%<br>* ROI over 3 years:<b>203</b>%<br>* Reduction of help desk tickets in the 3rd year:<b>75</b>%"); lang_map.set("en", "According to the research of a leading company in the industry, Passkey is:<br>* Reduced phishing and credential theft:<b>99.9</b>%<br>* ROI over 3 years:<b>203</b>%<br>* Reduction of help desk tickets in the 3rd year:<b>75</b>%");
lang_map.set("zh-CN", "根据业界领先公司的研究，Passkey是：<br>* 减少网络钓鱼和凭证盗窃：<b>99.9</b>%<br>* 3年内的投资回报率：<b>203</b>%<br>* 第3年的帮助台票据减少：<b>75</b>%"); lang_map.set("zh-CN", "根据业界领先公司的研究，Passkey是：<br>* 减少网络钓鱼和凭证盗窃：<b>99.9</b>%<br>* 3年内的投资回报率：<b>203</b>%<br>* 第3年的帮助台票据减少：<b>75</b>%");
lang_map.set("ja", "業界大手のリサーチより、パスキーは：<br>* フィッシングや認証情報の盗難の減少:<b>99.9</b>%<br>* 3 年後のROI:<b>203</b>%<br>* 3 年目のヘルプデスク チケットの削減:<b>75</b>%"); lang_map.set("ja", "業界大手のリサーチより、パスキーは：<br>* フィッシングや認証情報の盗難の減少:<b>99.9</b>%<br>* 3 年後のROI:<b>203</b>%<br>* 3 年目のヘルプデスク チケットの削減:<b>75</b>%");
i18n_messages.set("info_4", lang_map); i18n_messages.set("info_4", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Passkey impact"); lang_map.set("en", "Passkey impact");
lang_map.set("zh-CN", "Passkey 影响"); lang_map.set("zh-CN", "Passkey 影响");
lang_map.set("ja", "Passkey の影響"); lang_map.set("ja", "Passkey の影響");
i18n_messages.set("hero_eyebrow", lang_map); i18n_messages.set("hero_eyebrow", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Security your customers can feel"); lang_map.set("en", "Security your customers can feel");
lang_map.set("zh-CN", "客户能感受到的安全性"); lang_map.set("zh-CN", "客户能感受到的安全性");
lang_map.set("ja", "顧客が実感できるセキュリティ"); lang_map.set("ja", "顧客が実感できるセキュリティ");
i18n_messages.set("hero_title", lang_map); i18n_messages.set("hero_title", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Reduce phishing to near zero, lift conversion, and slash support load with amiPro's enterprise-grade Passkey platform."); lang_map.set("en", "Reduce phishing to near zero, lift conversion, and slash support load with amiPro's enterprise-grade Passkey platform.");
lang_map.set("zh-CN", "将钓鱼攻击降至接近零，提高转化率，并通过 amiPro 企业级 Passkey 平台大幅减少支持负担。"); lang_map.set("zh-CN", "将钓鱼攻击降至接近零，提高转化率，并通过 amiPro 企业级 Passkey 平台大幅减少支持负担。");
lang_map.set("ja", "amiPro のエンタープライズ向けパスキープラットフォームでフィッシングをほぼゼロに抑え、コンバージョンを高め、サポート負荷を削減します。"); lang_map.set("ja", "amiPro のエンタープライズ向けパスキープラットフォームでフィッシングをほぼゼロに抑え、コンバージョンを高め、サポート負荷を削減します。");
i18n_messages.set("hero_lead", lang_map); i18n_messages.set("hero_lead", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Higher trust"); lang_map.set("en", "Higher trust");
lang_map.set("zh-CN", "更高的信任"); lang_map.set("zh-CN", "更高的信任");
lang_map.set("ja", "より高い信頼"); lang_map.set("ja", "より高い信頼");
i18n_messages.set("hero_chip_1", lang_map); i18n_messages.set("hero_chip_1", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Happier customers"); lang_map.set("en", "Happier customers");
lang_map.set("zh-CN", "更满意的客户"); lang_map.set("zh-CN", "更满意的客户");
lang_map.set("ja", "顧客満足度の向上"); lang_map.set("ja", "顧客満足度の向上");
i18n_messages.set("hero_chip_2", lang_map); i18n_messages.set("hero_chip_2", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Lower costs"); lang_map.set("en", "Lower costs");
lang_map.set("zh-CN", "更低的成本"); lang_map.set("zh-CN", "更低的成本");
lang_map.set("ja", "コスト削減"); lang_map.set("ja", "コスト削減");
i18n_messages.set("hero_chip_3", lang_map); i18n_messages.set("hero_chip_3", lang_map);
lang_map = new Map();
lang_map.set("en", "Portal");
lang_map.set("ja", "ポータル");
i18n_messages.set("btn_portal", lang_map);
lang_map = new Map();
lang_map.set("en", "Passkey vs Password: Security Comparison");
lang_map.set("ja", "パスキー vs パスワード：セキュリティ比較");
lang_map.set("zh-CN", "Passkey 与密码：安全对比");
i18n_messages.set("static_title", lang_map);
window.onload = async function() { window.onload = async function() {
setI18NText(i18n_messages) setI18NText(i18n_messages)
var video = document.getElementById('video'); var video = document.getElementById('video');
video.src = "files/amiProSampleSite01-JP.mp4"; video.src = "files/amiProSampleSite01-JP.mp4";
initRevealAnimations() initRevealAnimations()
if (typeof createLanguageSelector === 'function') {
document.body.appendChild(createLanguageSelector());
}
} }
</script> </script>
@@ -275,6 +369,49 @@
</div> </div>
</section> </section>
<section style="margin-top: 3rem; padding: 2rem; background: #f8f9fa; border-radius: 12px;">
<h2 id="static_title" style="font-size: 1.5rem; font-weight: 600; color: #0f172a; margin-bottom: 1rem;">Passkey vs Password: Security Comparison</h2>
<div style="overflow-x: auto;">
<table style="width: 100%; border-collapse: collapse; font-size: 0.95rem;">
<thead>
<tr style="background: #e2e8f0;">
<th style="padding: 0.75rem; text-align: left; border: 1px solid #cbd5e1;">Feature</th>
<th style="padding: 0.75rem; text-align: center; border: 1px solid #cbd5e1;">Password</th>
<th style="padding: 0.75rem; text-align: center; border: 1px solid #cbd5e1;">Passkey</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 0.75rem; border: 1px solid #cbd5e1;">Phishing resistance</td>
<td style="padding: 0.75rem; text-align: center; border: 1px solid #cbd5e1; color: #dc2626;">Vulnerable</td>
<td style="padding: 0.75rem; text-align: center; border: 1px solid #cbd5e1; color: #16a34a;">Resistant (99.9% reduction)</td>
</tr>
<tr style="background: #f8fafc;">
<td style="padding: 0.75rem; border: 1px solid #cbd5e1;">Credential theft risk</td>
<td style="padding: 0.75rem; text-align: center; border: 1px solid #cbd5e1; color: #dc2626;">High (shared secret)</td>
<td style="padding: 0.75rem; text-align: center; border: 1px solid #cbd5e1; color: #16a34a;">None (public-key crypto)</td>
</tr>
<tr>
<td style="padding: 0.75rem; border: 1px solid #cbd5e1;">Sign-in speed</td>
<td style="padding: 0.75rem; text-align: center; border: 1px solid #cbd5e1;">Slow (typing)</td>
<td style="padding: 0.75rem; text-align: center; border: 1px solid #cbd5e1; color: #16a34a;">Fast (biometric gesture)</td>
</tr>
<tr style="background: #f8fafc;">
<td style="padding: 0.75rem; border: 1px solid #cbd5e1;">Password reset burden</td>
<td style="padding: 0.75rem; text-align: center; border: 1px solid #cbd5e1; color: #dc2626;">75% of support tickets</td>
<td style="padding: 0.75rem; text-align: center; border: 1px solid #cbd5e1; color: #16a34a;">Zero resets needed</td>
</tr>
<tr>
<td style="padding: 0.75rem; border: 1px solid #cbd5e1;">User experience</td>
<td style="padding: 0.75rem; text-align: center; border: 1px solid #cbd5e1;">Friction (remembering)</td>
<td style="padding: 0.75rem; text-align: center; border: 1px solid #cbd5e1; color: #16a34a;">Seamless (one tap)</td>
</tr>
</tbody>
</table>
</div>
<p style="margin-top: 1rem; font-size: 0.85rem; color: #64748b;">Source: FIDO Alliance, Google Security Research, amiPro internal data</p>
</section>
<section class="info-panels" style="margin-top: 3rem;"> <section class="info-panels" style="margin-top: 3rem;">
<article class="info-panel" data-animate> <article class="info-panel" data-animate>
<h4 id="info_title_1">define</h4> <h4 id="info_title_1">define</h4>
@@ -291,7 +428,7 @@
<article class="info-panel" data-animate> <article class="info-panel" data-animate>
<h4 id="info_title_4">define</h4> <h4 id="info_title_4">define</h4>
<p id="info_4">define</p> <p id="info_4">define</p>
<img src="files/YubicoResearch.jpg" alt="Yubico Research" style="width: 100%; border-radius: 16px; margin-top: 1rem;"> <img src="files/YubicoResearch.jpg" alt="Yubico research statistics showing 99.9% phishing reduction, 203% ROI, and 75% support cost reduction with passkey authentication" style="width: 100%; border-radius: 16px; margin-top: 1rem;">
</article> </article>
</section> </section>
</div> </div>

161
passkey.html
View File

@@ -11,7 +11,14 @@
content="width=device-width, initial-scale=1.0" content="width=device-width, initial-scale=1.0"
/> />
<title> Passkeys - amiPro </title> <title>What Are Passkeys? FIDO2 Authentication Guide | amiPro</title>
<link rel="canonical" href="https://amipro.me/passkey.html" />
<link rel="alternate" hreflang="en" href="https://amipro.me/passkey.html" />
<link rel="alternate" hreflang="ja" href="https://amipro.me/passkey.html" />
<link rel="alternate" hreflang="zh-CN" href="https://amipro.me/passkey.html" />
<link rel="alternate" hreflang="x-default" href="https://amipro.me/passkey.html" />
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-850DCHX9EJ"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-850DCHX9EJ"></script>
@@ -23,7 +30,81 @@
gtag('config', 'G-850DCHX9EJ'); gtag('config', 'G-850DCHX9EJ');
</script> </script>
<meta name="description" content="the easiest to integrate Passkey cloud service" /> <meta name="description" content="Passkeys are passwordless authentication credentials using biometrics or security keys. Learn how FIDO2 passkeys prevent phishing and improve login UX." />
<meta property="og:type" content="website" />
<meta property="og:title" content="What Are Passkeys? FIDO2 Authentication Guide | amiPro" />
<meta property="og:description" content="Passkeys are passwordless authentication credentials using biometrics or security keys. Learn how FIDO2 passkeys prevent phishing and improve login UX." />
<meta property="og:url" content="https://amipro.me/passkey.html" />
<meta property="og:site_name" content="amiPro" />
<meta property="og:image" content="https://amipro.me/files/passkeys.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="What Are Passkeys? FIDO2 Authentication Guide | amiPro" />
<meta name="twitter:description" content="Passkeys are passwordless authentication credentials using biometrics or security keys. Learn how FIDO2 passkeys prevent phishing and improve login UX." />
<meta name="twitter:image" content="https://amipro.me/files/passkeys.jpg" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "What Are Passkeys? FIDO2 Authentication Guide",
"description": "Passkeys are passwordless authentication credentials using biometrics or security keys. Learn how FIDO2 passkeys prevent phishing and improve login UX.",
"url": "https://amipro.me/passkey.html",
"image": "https://amipro.me/files/passkeys.jpg",
"author": {
"@type": "Person",
"name": "amiPro Team"
},
"publisher": {
"@type": "Organization",
"name": "amiPro",
"url": "https://amipro.me"
},
"datePublished": "2024-01-01",
"dateModified": "2025-01-01"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What is a passkey?",
"acceptedAnswer": {
"@type": "Answer",
"text": "A passkey is a FIDO2-based passwordless authentication credential that replaces passwords. It uses biometrics (fingerprint, face recognition) or hardware security keys to sign in to websites and apps. Passkeys are phishing-resistant, more secure than passwords, and provide a faster sign-in experience."
}
},
{
"@type": "Question",
"name": "How do passkeys work?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Passkeys work in three steps: (1) The user registers a device by authenticating with biometrics or a security key. (2) A cryptographic key pair is created—the private key stays on the device, the public key goes to the server. (3) On subsequent logins, the user authenticates with biometrics to unlock the private key, which signs a challenge from the server."
}
},
{
"@type": "Question",
"name": "Are passkeys more secure than passwords?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Passkeys are bound to the legitimate website domain, making them inherently resistant to phishing. They use public-key cryptography instead of shared secrets, so server breaches don't expose user credentials. Biometric authentication adds an additional layer of security."
}
},
{
"@type": "Question",
"name": "Which companies support passkeys?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Major companies supporting passkeys include Google, Apple, Microsoft, Amazon, PayPal, GitHub, and many more. Apple, Google, and NTT have been key contributors to the FIDO2 standard. The FIDO2 market is projected to grow from $18.82 billion in 2024 to $60.34 billion in 2032."
}
}
]
}
</script>
<!-- Favicon --> <!-- Favicon -->
<link rel="icon" type="image/x-icon" href="files/favicon.ico" /> <link rel="icon" type="image/x-icon" href="files/favicon.ico" />
@@ -75,116 +156,136 @@
const i18n_messages = new Map(); const i18n_messages = new Map();
var lang_map = new Map(); var lang_map = new Map();
lang_map.set("en-US", "amiPro - The easiest-to-integrate Passkey cloud service"); lang_map.set("en", "amiPro - The easiest-to-integrate Passkey cloud service");
lang_map.set("zh-CN", "amiPro - 最易集成的Passkey云服务"); lang_map.set("zh-CN", "amiPro - 最易集成的Passkey云服务");
lang_map.set("ja", "amiPro - 最も簡単に統合できるパスキー・クラウド・サービス"); lang_map.set("ja", "amiPro - 最も簡単に統合できるパスキー・クラウド・サービス");
i18n_messages.set("label_welcome", lang_map); i18n_messages.set("label_welcome", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Management Portal"); lang_map.set("en", "Management Portal");
lang_map.set("zh-CN", "管理门户"); lang_map.set("zh-CN", "管理门户");
lang_map.set("ja", "管理ポータル"); lang_map.set("ja", "管理ポータル");
i18n_messages.set("label_portal", lang_map); i18n_messages.set("label_portal", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Contact us (sales@amipro.me)"); lang_map.set("en", "Contact us (sales@amipro.me)");
lang_map.set("zh-CN", "联系我们（sales@amipro.me）"); lang_map.set("zh-CN", "联系我们（sales@amipro.me）");
lang_map.set("ja", "お問い合わせ（sales@amipro.me）"); lang_map.set("ja", "お問い合わせ（sales@amipro.me）");
i18n_messages.set("title_contact", lang_map); i18n_messages.set("title_contact", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Contact us (sales@amipro.me)"); lang_map.set("en", "Contact us (sales@amipro.me)");
lang_map.set("zh-CN", "联系我们（sales@amipro.me）"); lang_map.set("zh-CN", "联系我们（sales@amipro.me）");
lang_map.set("ja", "お問い合わせ（sales@amipro.me）"); lang_map.set("ja", "お問い合わせ（sales@amipro.me）");
i18n_messages.set("title_contact_cta", lang_map); i18n_messages.set("title_contact_cta", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Passkey definition"); lang_map.set("en", "Passkey definition");
lang_map.set("zh-CN", "Passkey 的定义"); lang_map.set("zh-CN", "Passkey 的定义");
lang_map.set("ja", "パスキーの定義"); lang_map.set("ja", "パスキーの定義");
i18n_messages.set("info_title_1", lang_map); i18n_messages.set("info_title_1", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "A passkey is a method of user authentication that eliminates the need for usernames and passwords. It also helps prevent security lapses and attacks.<br><a href='https://en.wikipedia.org/wiki/Passkey_(authentication)' target='_blank'>Wikipedia</a>"); lang_map.set("en", "A passkey is a method of user authentication that eliminates the need for usernames and passwords. It also helps prevent security lapses and attacks.<br><a href='https://en.wikipedia.org/wiki/Passkey_(authentication)' target='_blank'>Wikipedia</a>");
lang_map.set("zh-CN", "Passkey（通行密钥）是一种无需用户名和密码的用户身份验证方式，同时有助于防止安全漏洞和攻击。<br><a href='https://en.wikipedia.org/wiki/Passkey_(authentication)' target='_blank'>Wikipedia</a>"); lang_map.set("zh-CN", "Passkey（通行密钥）是一种无需用户名和密码的用户身份验证方式，同时有助于防止安全漏洞和攻击。<br><a href='https://en.wikipedia.org/wiki/Passkey_(authentication)' target='_blank'>Wikipedia</a>");
lang_map.set("ja", "パスキー（Passkeys, Passkey Authentication）は、パスワードに代わるより安全、迅速かつ使いやすい、パスワードレス認証に用いられる方式です。<br><a href='https://ja.wikipedia.org/wiki/パスキー' target='_blank'>Wikipedia</a>"); lang_map.set("ja", "パスキー（Passkeys, Passkey Authentication）は、パスワードに代わるより安全、迅速かつ使いやすい、パスワードレス認証に用いられる方式です。<br><a href='https://ja.wikipedia.org/wiki/パスキー' target='_blank'>Wikipedia</a>");
i18n_messages.set("info_1", lang_map); i18n_messages.set("info_1", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Passkey basics"); lang_map.set("en", "Passkey basics");
lang_map.set("zh-CN", "Passkey 的基本用法"); lang_map.set("zh-CN", "Passkey 的基本用法");
lang_map.set("ja", "パスキーの基本的な使い方"); lang_map.set("ja", "パスキーの基本的な使い方");
i18n_messages.set("info_title_2", lang_map); i18n_messages.set("info_title_2", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "1. (Optional) If users already have an account with a user ID and password, they first sign in to the website<br>2. Register an authentication device using face or fingerprint<br>3. Next time, sign in with face or fingerprint—no password needed"); lang_map.set("en", "1. (Optional) If users already have an account with a user ID and password, they first sign in to the website<br>2. Register an authentication device using face or fingerprint<br>3. Next time, sign in with face or fingerprint—no password needed");
lang_map.set("zh-CN", "1、（可选）已使用用户ID和密码注册的用户先登录网站<br>2、使用面部或指纹注册认证设备<br>3、下次登录时仅需进行面部或指纹认证即可进入网站"); lang_map.set("zh-CN", "1、（可选）已使用用户ID和密码注册的用户先登录网站<br>2、使用面部或指纹注册认证设备<br>3、下次登录时仅需进行面部或指纹认证即可进入网站");
lang_map.set("ja", "1（任意）：ユーザーIDとパスワードで登録済みのユーザーは、まずサイトにログインします<br>2 顔認証または指紋認証で認証デバイスを登録します<br>3 次回以降は顔認証または指紋認証だけでログインできます"); lang_map.set("ja", "1（任意）：ユーザーIDとパスワードで登録済みのユーザーは、まずサイトにログインします<br>2 顔認証または指紋認証で認証デバイスを登録します<br>3 次回以降は顔認証または指紋認証だけでログインできます");
i18n_messages.set("info_2", lang_map); i18n_messages.set("info_2", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Passkey case studies"); lang_map.set("en", "Passkey case studies");
lang_map.set("zh-CN", "Passkey 的引入案例"); lang_map.set("zh-CN", "Passkey 的引入案例");
lang_map.set("ja", "パスキーの導入事例"); lang_map.set("ja", "パスキーの導入事例");
i18n_messages.set("info_title_3", lang_map); i18n_messages.set("info_title_3", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "<b>Google</b>:<a href='https://wired.jp/article/google-passkey-password-replacement/' target='_blank'>Google is fully introducing the authentication method \"Passkey\"</a><br><b>Mercari</b>:<a href='https://about.mercari.com/press/news/articles/20230414_passkeys/' target='_blank'>Flea market app \"Mercari\" supports biometric authentication \"Passkey\" that does not require a password</a><br><b>Docomo</b>:<a href='https://www.bcnretail.com/market/detail/20221018_300507.html' target='_blank'>d Account to introduce new authentication methods for web authentication and passkeys for login</a>"); lang_map.set("en", "<b>Google</b>:<a href='https://wired.jp/article/google-passkey-password-replacement/' target='_blank'>Google is fully introducing the authentication method \"Passkey\"</a><br><b>Mercari</b>:<a href='https://about.mercari.com/press/news/articles/20230414_passkeys/' target='_blank'>Flea market app \"Mercari\" supports biometric authentication \"Passkey\" that does not require a password</a><br><b>Docomo</b>:<a href='https://www.bcnretail.com/market/detail/20221018_300507.html' target='_blank'>d Account to introduce new authentication methods for web authentication and passkeys for login</a>");
lang_map.set("zh-CN", "<b>Google</b>:<a href='https://wired.jp/article/google-passkey-password-replacement/' target='_blank'>谷歌正式推出“Passkey”认证方式</a><br><b>Mercari</b>:<a href='https://about.mercari.com/press/news/articles/20230414_passkeys/' target='_blank'>跳蚤市场应用“Mercari”支持无需密码的生物识别认证“Passkey”</a><br><b>Docomo</b>:<a href='https://www.bcnretail.com/market/detail/20221018_300507.html' target='_blank'>d Account将引入Web认证和Passkey的新认证方式以登录</a>"); lang_map.set("zh-CN", "<b>Google</b>:<a href='https://wired.jp/article/google-passkey-password-replacement/' target='_blank'>谷歌正式推出“Passkey”认证方式</a><br><b>Mercari</b>:<a href='https://about.mercari.com/press/news/articles/20230414_passkeys/' target='_blank'>跳蚤市场应用“Mercari”支持无需密码的生物识别认证“Passkey”</a><br><b>Docomo</b>:<a href='https://www.bcnretail.com/market/detail/20221018_300507.html' target='_blank'>d Account将引入Web认证和Passkey的新认证方式以登录</a>");
lang_map.set("ja", "<b>Google</b>:<a href='https://wired.jp/article/google-passkey-password-replacement/' target='_blank'>認証方式「パスキー」をグーグルが本格導入</a><br><b>メルカリ</b>:<a href='https://about.mercari.com/press/news/articles/20230414_passkeys/' target='_blank'>フリマアプリ「メルカリ」、パスワード不要な生体認証「パスキー」に対応</a><br><b>ドコモ</b>:<a href='https://www.bcnretail.com/market/detail/20221018_300507.html' target='_blank'>dアカウントのログインにWeb認証とパスキーによる新たな認証手段を導入へ</a>"); lang_map.set("ja", "<b>Google</b>:<a href='https://wired.jp/article/google-passkey-password-replacement/' target='_blank'>認証方式「パスキー」をグーグルが本格導入</a><br><b>メルカリ</b>:<a href='https://about.mercari.com/press/news/articles/20230414_passkeys/' target='_blank'>フリマアプリ「メルカリ」、パスワード不要な生体認証「パスキー」に対応</a><br><b>ドコモ</b>:<a href='https://www.bcnretail.com/market/detail/20221018_300507.html' target='_blank'>dアカウントのログインにWeb認証とパスキーによる新たな認証手段を導入へ</a>");
i18n_messages.set("info_3", lang_map); i18n_messages.set("info_3", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Passkey system architecture"); lang_map.set("en", "Passkey system architecture");
lang_map.set("zh-CN", "Passkey 的系统架构"); lang_map.set("zh-CN", "Passkey 的系统架构");
lang_map.set("ja", "パスキーのシステムアーキテクチャ"); lang_map.set("ja", "パスキーのシステムアーキテクチャ");
i18n_messages.set("info_title_4", lang_map); i18n_messages.set("info_title_4", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "A: Mobile device browser <br>B: Computer browser <br>C: Mobile device App (App embeds amiPro SDK) <br>D: Your website <br>E: amiPro cloud service<br><br>1. The browser downloads the amiPro JavaScript SDK from your website (App does not need this step)<br>2. The browser and App call the amiPro cloud service through the SDK for authentication<br>3. amiPro returns the authentication result to your server<br><img src='files/amipro_sys.jpg' style='width: 80%;'>"); lang_map.set("en", "A: Mobile device browser <br>B: Computer browser <br>C: Mobile device App (App embeds amiPro SDK) <br>D: Your website <br>E: amiPro cloud service<br><br>1. The browser downloads the amiPro JavaScript SDK from your website (App does not need this step)<br>2. The browser and App call the amiPro cloud service through the SDK for authentication<br>3. amiPro returns the authentication result to your server<br><img src='files/amipro_sys.jpg' style='width: 80%;'>");
lang_map.set("zh-CN", "A:移动设备浏览器 <br>B:电脑浏览器 <br>C:移动设备App(App嵌入amiPro SDK) <br>D:您的网站 <br>E:amiPro云服务<br><br>1、浏览器从您的网站下载amiPro JavaScript SDK(App无需此步骤)<br>2、浏览器及App通过SDK调用amiPro云服务进行认证<br>3、amiPro将认证结果返回给您的服务器<img src='files/amipro_sys.jpg' style='width: 80%;'>"); lang_map.set("zh-CN", "A:移动设备浏览器 <br>B:电脑浏览器 <br>C:移动设备App(App嵌入amiPro SDK) <br>D:您的网站 <br>E:amiPro云服务<br><br>1、浏览器从您的网站下载amiPro JavaScript SDK(App无需此步骤)<br>2、浏览器及App通过SDK调用amiPro云服务进行认证<br>3、amiPro将认证结果返回给您的服务器<img src='files/amipro_sys.jpg' style='width: 80%;'>");
lang_map.set("ja", "A:モバイルデバイスブラウザ<br>B:コンピュータブラウザ<br>C:モバイルデバイスアプリ(AppにamiPro SDKを埋め込む)<br>D:あなたのウェブサイト E:amiProクラウド・サービス<br><br>1、ブラウザはあなたのウェブサイトからamiPro JavaScript SDKをダウンロードします(Appはこのステップは必要ありません)<br>2、ブラウザとアプリはSDKを介してamiProクラウド・サービスを呼び出して認証します<br>3、amiProは認証結果をあなたのサーバーに返します<br><img src='files/amipro_sys.jpg' style='width: 80%;'>"); lang_map.set("ja", "A:モバイルデバイスブラウザ<br>B:コンピュータブラウザ<br>C:モバイルデバイスアプリ(AppにamiPro SDKを埋め込む)<br>D:あなたのウェブサイト E:amiProクラウド・サービス<br><br>1、ブラウザはあなたのウェブサイトからamiPro JavaScript SDKをダウンロードします(Appはこのステップは必要ありません)<br>2、ブラウザとアプリはSDKを介してamiProクラウド・サービスを呼び出して認証します<br>3、amiProは認証結果をあなたのサーバーに返します<br><img src='files/amipro_sys.jpg' style='width: 80%;'>");
i18n_messages.set("info_4", lang_map); i18n_messages.set("info_4", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Passkey essentials"); lang_map.set("en", "Passkey essentials");
lang_map.set("zh-CN", "Passkey essentials"); lang_map.set("zh-CN", "Passkey essentials");
lang_map.set("ja", "Passkey essentials"); lang_map.set("ja", "Passkey essentials");
i18n_messages.set("hero_eyebrow", lang_map); i18n_messages.set("hero_eyebrow", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Everything teams need to understand Passkeys"); lang_map.set("en", "Everything teams need to understand Passkeys");
lang_map.set("zh-CN", "团队理解 Passkey 所需的一切"); lang_map.set("zh-CN", "团队理解 Passkey 所需的一切");
lang_map.set("ja", "チームがパスキーを理解するために必要なすべて"); lang_map.set("ja", "チームがパスキーを理解するために必要なすべて");
i18n_messages.set("hero_title", lang_map); i18n_messages.set("hero_title", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Share the fundamentals with product, security, and CX partners using this at-a-glance passkey briefing powered by amiPro research."); lang_map.set("en", "Share the fundamentals with product, security, and CX partners using this at-a-glance passkey briefing powered by amiPro research.");
lang_map.set("zh-CN", "使用由 amiPro 研究提供的一览式 Passkey 简报，与产品、安全和客户体验伙伴共享基础知识。"); lang_map.set("zh-CN", "使用由 amiPro 研究提供的一览式 Passkey 简报，与产品、安全和客户体验伙伴共享基础知识。");
lang_map.set("ja", "amiPro のリサーチによる一目でわかるパスキー解説を使用して、プロダクト、セキュリティ、CX のパートナーと基礎を共有します。"); lang_map.set("ja", "amiPro のリサーチによる一目でわかるパスキー解説を使用して、プロダクト、セキュリティ、CX のパートナーと基礎を共有します。");
i18n_messages.set("hero_lead", lang_map); i18n_messages.set("hero_lead", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "FIDO2 ready"); lang_map.set("en", "FIDO2 ready");
lang_map.set("zh-CN", "FIDO2 准备就绪"); lang_map.set("zh-CN", "FIDO2 准备就绪");
lang_map.set("ja", "FIDO2 対応"); lang_map.set("ja", "FIDO2 対応");
i18n_messages.set("hero_chip_1", lang_map); i18n_messages.set("hero_chip_1", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Phishing resistant"); lang_map.set("en", "Phishing resistant");
lang_map.set("zh-CN", "抵御钓鱼"); lang_map.set("zh-CN", "抵御钓鱼");
lang_map.set("ja", "フィッシング耐性"); lang_map.set("ja", "フィッシング耐性");
i18n_messages.set("hero_chip_2", lang_map); i18n_messages.set("hero_chip_2", lang_map);
lang_map = new Map(); lang_map = new Map();
lang_map.set("en-US", "Device agnostic"); lang_map.set("en", "Device agnostic");
lang_map.set("zh-CN", "设备无关"); lang_map.set("zh-CN", "设备无关");
lang_map.set("ja", "デバイス非依存"); lang_map.set("ja", "デバイス非依存");
i18n_messages.set("hero_chip_3", lang_map); i18n_messages.set("hero_chip_3", lang_map);
lang_map = new Map();
lang_map.set("en", "See benefits");
lang_map.set("ja", "メリットを見る");
i18n_messages.set("label_merits", lang_map);
lang_map = new Map();
lang_map.set("en", "How Passkeys Work: Step by Step");
lang_map.set("ja", "パスキーの仕組み: ステップバイステップ");
lang_map.set("zh-CN", "Passkey 工作原理：分步详解");
i18n_messages.set("static_howto_title", lang_map);
lang_map = new Map();
lang_map.set("en", "Passkey Benefits for Businesses");
lang_map.set("ja", "ビジネスのためのパスキーのメリット");
lang_map.set("zh-CN", "Passkey 为企业带来的收益");
i18n_messages.set("static_benefits_title", lang_map);
window.onload = async function() { window.onload = async function() {
setI18NText(i18n_messages) setI18NText(i18n_messages)
initRevealAnimations() initRevealAnimations()
if (typeof createLanguageSelector === 'function') {
document.body.appendChild(createLanguageSelector());
}
} }
</script> </script>
@@ -244,11 +345,29 @@
</div> </div>
<div class="hero__media" data-animate> <div class="hero__media" data-animate>
<div class="hero__device"> <div class="hero__device">
<img src="files/passkeys.jpg" alt="Passkey devices"> <img src="files/passkeys.jpg" alt="Various passkey authentication devices including smartphones, laptops, and security keys">
</div> </div>
</div> </div>
</section> </section>
<section style="margin-top: 3rem; padding: 2rem; background: #f8f9fa; border-radius: 12px;">
<h2 id="static_howto_title" style="font-size: 1.5rem; font-weight: 600; color: #0f172a; margin-bottom: 1rem;">How Passkeys Work: Step by Step</h2>
<ol style="padding-left: 1.5rem; color: #334155; line-height: 1.8;">
<li><strong>Registration:</strong> The user registers a passkey by authenticating with biometrics (fingerprint or face recognition) or a hardware security key on their device.</li>
<li><strong>Key pair creation:</strong> A cryptographic key pair is generated. The private key stays securely on the user device; the public key is sent to the website server.</li>
<li><strong>Authentication:</strong> On subsequent logins, the user authenticates with biometrics to unlock the private key, which signs a cryptographic challenge from the server.</li>
<li><strong>Verification:</strong> The server verifies the signature using the public key and grants access — no password ever transmitted.</li>
</ol>
<h2 id="static_benefits_title" style="font-size: 1.5rem; font-weight: 600; color: #0f172a; margin-top: 2rem; margin-bottom: 1rem;">Passkey Benefits for Businesses</h2>
<ul style="padding-left: 1.5rem; color: #334155; line-height: 1.8;">
<li><strong>99.9% phishing reduction:</strong> Passkeys are bound to the legitimate website domain, making phishing attacks ineffective.</li>
<li><strong>203% ROI over 3 years:</strong> Reduced security incidents, lower support costs, and improved conversion rates deliver measurable returns.</li>
<li><strong>75% fewer support tickets:</strong> Eliminating password resets dramatically reduces help desk burden by year three.</li>
<li><strong>Faster sign-ins:</strong> Biometric authentication is quicker than typing passwords, reducing login abandonment.</li>
</ul>
<p style="margin-top: 1rem; font-size: 0.85rem; color: #64748b;">amiPro Passkey Hub provides FIDO2-certified infrastructure with open-source SDKs for JavaScript, iOS, and Android.</p>
</section>
<section class="info-panels" style="margin-top: 3rem;"> <section class="info-panels" style="margin-top: 3rem;">
<article class="info-panel" data-animate> <article class="info-panel" data-animate>
<h4 id="info_title_1">define</h4> <h4 id="info_title_1">define</h4>