382 lines
23 KiB
HTML
382 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html
|
||
lang="en-US"
|
||
class="light-style"
|
||
>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1.0"
|
||
/>
|
||
|
||
<title> Integration - amiPro </title>
|
||
|
||
<!-- Google tag (gtag.js) -->
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-850DCHX9EJ"></script>
|
||
<script>
|
||
globalThis.dataLayer = globalThis.dataLayer || [];
|
||
function gtag(){dataLayer.push(arguments);}
|
||
gtag('js', new Date());
|
||
|
||
gtag('config', 'G-850DCHX9EJ');
|
||
</script>
|
||
|
||
<meta name="description" content="the easiest to integrate Passkey cloud service" />
|
||
|
||
<!-- Favicon -->
|
||
<link rel="icon" type="image/x-icon" href="files/favicon.ico" />
|
||
|
||
<!-- Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
|
||
<!-- Icons. Uncomment required icon fonts -->
|
||
<link rel="stylesheet" href="files/boxicons.css?v=20230405" />
|
||
|
||
<!-- Core CSS -->
|
||
<link rel="stylesheet" href="files/core.css" class="template-customizer-core-css" />
|
||
<link rel="stylesheet" href="files/theme-default.css" class="template-customizer-theme-css" />
|
||
<link rel="stylesheet" href="files/demo.css" />
|
||
<link rel="stylesheet" href="files/modern.css" />
|
||
|
||
<!-- Vendors CSS -->
|
||
<link rel="stylesheet" href="files/perfect-scrollbar.css" />
|
||
|
||
<!-- Page CSS -->
|
||
|
||
<!-- Helpers -->
|
||
<script src="files/helpers.js"></script>
|
||
|
||
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
|
||
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
|
||
<script src="files/config.js"></script>
|
||
|
||
<script src="files/jquery.js"></script>
|
||
<script src="files/popper.js"></script>
|
||
<script src="files/bootstrap.js"></script>
|
||
<script src="files/perfect-scrollbar.js"></script>
|
||
<script src="files/menu.js"></script>
|
||
<script src="files/main.js"></script>
|
||
|
||
<script src="files/ua-parser.js"></script>
|
||
|
||
<script src="files/amipro_utils.js?v=20230401402"></script>
|
||
|
||
<script>
|
||
|
||
var user_id, reg_session_id;
|
||
|
||
const i18n_messages = new Map();
|
||
|
||
var lang_map = new Map();
|
||
lang_map.set("en-US", "amiPro - The easiest-to-integrate Passkey cloud service");
|
||
lang_map.set("zh-CN", "amiPro - 最易集成的Passkey云服务");
|
||
lang_map.set("ja", "amiPro - 最も簡単に統合できるパスキー・クラウド・サービス");
|
||
i18n_messages.set("label_welcome", lang_map);
|
||
|
||
lang_map = new Map();
|
||
lang_map.set("en-US", "Sample site");
|
||
lang_map.set("zh-CN", "示例网站");
|
||
lang_map.set("ja", "サンプルサイト");
|
||
i18n_messages.set("label_sample", lang_map);
|
||
|
||
lang_map = new Map();
|
||
lang_map.set("en-US", "Contact us (sales@amipro.me)");
|
||
lang_map.set("zh-CN", "联系我们（sales@amipro.me）");
|
||
lang_map.set("ja", "お問い合わせ（sales@amipro.me）");
|
||
i18n_messages.set("title_contact", lang_map);
|
||
|
||
lang_map = new Map();
|
||
lang_map.set("en-US", "Contact us (sales@amipro.me)");
|
||
lang_map.set("zh-CN", "联系我们（sales@amipro.me）");
|
||
lang_map.set("ja", "お問い合わせ（sales@amipro.me）");
|
||
i18n_messages.set("title_contact_cta", lang_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("zh-CN", "三个月免费试用<br>（免费注册管理门户后，所有功能免费试用三个月）<br> 无需信用卡");
|
||
lang_map.set("ja", "3ヶ月間の無料トライアル<br>（管理ポータルの無料登録後、すべての機能を3ヶ月間無料でお試しいただけます）<br> クレジットカードは不要です。");
|
||
i18n_messages.set("btn_portal", lang_map);
|
||
|
||
lang_map = new Map();
|
||
lang_map.set("en-US", "How to integrate");
|
||
lang_map.set("zh-CN", "如何集成");
|
||
lang_map.set("ja", "統合方法");
|
||
i18n_messages.set("label_integartion_title", lang_map);
|
||
|
||
lang_map = new Map();
|
||
lang_map.set("en-US", "Step1: Open sample site");
|
||
lang_map.set("zh-CN", "步骤1: 打开示例网站");
|
||
lang_map.set("ja", "ステップ1: サンプルサイトを開く");
|
||
i18n_messages.set("btn_step1", lang_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("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>");
|
||
i18n_messages.set("info_top_step1", lang_map);
|
||
|
||
lang_map = new Map();
|
||
lang_map.set("en-US", "Step2: Login page integration");
|
||
lang_map.set("zh-CN", "步骤2: 登录页面集成");
|
||
lang_map.set("ja", "ステップ２: ログインページの統合");
|
||
i18n_messages.set("btn_step2", lang_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("zh-CN", "参考示例网站，在登录页面引入amiPro JavaScript SDK，并调用带UI的 Passkey 登录集成API。");
|
||
lang_map.set("ja", "サンプルサイトを参考にして、amiPro JavaScript SDK を導入し、UI付きのパスキー・ログイン統合 API を呼び出します。");
|
||
i18n_messages.set("info_top_step2", lang_map);
|
||
|
||
lang_map = new Map();
|
||
lang_map.set("en-US", "Step3: Build devices management page");
|
||
lang_map.set("zh-CN", "步骤3: 构建设备管理页面");
|
||
lang_map.set("ja", "ステップ３: デバイス管理ページの構築");
|
||
i18n_messages.set("btn_step3", lang_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("zh-CN", "参考示例网站，在登录后的适当页面引入amiPro JavaScript SDK，并调用带UI的设备管理集成API。");
|
||
lang_map.set("ja", "サンプルサイトを参考にして、ログイン後の適切なページにamiPro JavaScript SDKを導入し、UI付きのデバイス管理統合APIを呼び出します。");
|
||
i18n_messages.set("info_top_step3", lang_map);
|
||
|
||
lang_map = new Map();
|
||
lang_map.set("en-US", "Step4: Session management");
|
||
lang_map.set("zh-CN", "步骤4: 会话管理");
|
||
lang_map.set("ja", "ステップ４: セッション管理");
|
||
i18n_messages.set("btn_step4", lang_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("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 関数を呼び出すだけで管理出来ます。");
|
||
i18n_messages.set("info_top_step4", lang_map);
|
||
|
||
lang_map = new Map();
|
||
lang_map.set("en-US", "Step5: Management Portal registration");
|
||
lang_map.set("zh-CN", "步骤5: 管理门户注册");
|
||
lang_map.set("ja", "ステップ５: 管理ポータル登録");
|
||
i18n_messages.set("btn_step5", lang_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("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%>");
|
||
i18n_messages.set("info_top_step5", lang_map);
|
||
|
||
lang_map = new Map();
|
||
lang_map.set("en-US", "Step６: FIDO2 server settings");
|
||
lang_map.set("zh-CN", "步骤６: FIDO2服务器设置");
|
||
lang_map.set("ja", "ステップ６: FIDO2 サーバー設定");
|
||
i18n_messages.set("btn_step6", lang_map);
|
||
|
||
lang_map = new Map();
|
||
lang_map.set("en-US", "Advanced Custom Deployment");
|
||
lang_map.set("zh-CN", "深入定制部署");
|
||
lang_map.set("ja", "高度なカスタムデプロイメント");
|
||
i18n_messages.set("label_custom_deploy_title", lang_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("zh-CN", "Web Component 集成、自定义 UI 和后端 API 集成等高级部署选项");
|
||
lang_map.set("ja", "高度なデプロイメントオプションについては、Web Component統合、カスタムUI、バックエンドAPI統合");
|
||
i18n_messages.set("label_custom_deploy_desc", lang_map);
|
||
|
||
lang_map = new Map();
|
||
lang_map.set("en-US", "Advanced Custom Deployment →");
|
||
lang_map.set("zh-CN", "深入定制部署 →");
|
||
lang_map.set("ja", "高度なカスタムデプロイメント →");
|
||
i18n_messages.set("btn_custom_deploy", lang_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("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%>");
|
||
i18n_messages.set("info_top_step6", lang_map);
|
||
|
||
lang_map = new Map();
|
||
lang_map.set("en-US", "Ship Passkeys in 15 Minutes");
|
||
lang_map.set("zh-CN", "在15分钟内部署Passkey");
|
||
lang_map.set("ja", "15分でパスキーを導入");
|
||
i18n_messages.set("hero_title", lang_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("zh-CN", "遵循已在生产中验证的流程：查看示例站点，嵌入 JavaScript SDK，微调设备管理，并为您的域配置 amiPro 门户。");
|
||
lang_map.set("ja", "本番で実績のある手順に従ってください: サンプルサイトを確認し、JavaScript SDK を導入し、デバイス管理を調整し、amiPro ポータルをドメインに対して設定します。");
|
||
i18n_messages.set("hero_lead", lang_map);
|
||
|
||
lang_map = new Map();
|
||
lang_map.set("en-US", "Browser + App SDK");
|
||
lang_map.set("zh-CN", "浏览器 + 应用 SDK");
|
||
lang_map.set("ja", "ブラウザ + アプリ SDK");
|
||
i18n_messages.set("hero_chip_1", lang_map);
|
||
|
||
lang_map = new Map();
|
||
lang_map.set("en-US", "Recovery-ready");
|
||
lang_map.set("zh-CN", "支持恢复");
|
||
lang_map.set("ja", "リカバリ対応");
|
||
i18n_messages.set("hero_chip_2", lang_map);
|
||
|
||
lang_map = new Map();
|
||
lang_map.set("en-US", "Session control");
|
||
lang_map.set("zh-CN", "会话控制");
|
||
lang_map.set("ja", "セッション制御");
|
||
i18n_messages.set("hero_chip_3", lang_map);
|
||
|
||
window.onload = async function() {
|
||
setI18NText(i18n_messages)
|
||
initRevealAnimations()
|
||
}
|
||
|
||
</script>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Layout wrapper -->
|
||
<div class="layout-wrapper layout-content-navbar">
|
||
<div class="layout-container">
|
||
<!-- Layout container -->
|
||
<div class="layout-page">
|
||
<!-- Navbar -->
|
||
|
||
<nav
|
||
class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
|
||
id="layout-navbar"
|
||
>
|
||
|
||
|
||
<div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
|
||
<div class="navbar-nav align-items-center">
|
||
<div class="nav-item d-flex align-items-center">
|
||
<img src="files/favicon.ico" alt="amiPro" width="80%">
|
||
<span id="label_welcome" style="padding-left: 60px;white-space: nowrap; font-size: x-large; color: #000000;" class="d-none d-lg-block"></span>
|
||
</div>
|
||
</div>
|
||
<a href="https://sample.amipro.me/modal-demo.html" target="_blank" style="width: 100%; text-align: right;">
|
||
<i class="bx bx-link bx-sm"></i>
|
||
<span id="label_sample"> Sample</span>
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- / Navbar -->
|
||
|
||
<!-- Content wrapper -->
|
||
<div class="content-wrapper">
|
||
<!-- Content -->
|
||
<section class="hero reveal" style="margin: 24px;">
|
||
<div class="hero__text" data-animate>
|
||
<span class="hero__eyebrow" id="label_integartion_title">Integration</span>
|
||
<h1 class="hero__title" id="hero_title">Launch Passkey journeys in six guided steps</h1>
|
||
<p class="hero__lead" id="hero_lead">
|
||
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.
|
||
</p>
|
||
<div class="hero__chips">
|
||
<span class="hero-chip" id="hero_chip_1">Browser + App SDK</span>
|
||
<span class="hero-chip" id="hero_chip_2">Recovery-ready</span>
|
||
<span class="hero-chip" id="hero_chip_3">Session control</span>
|
||
</div>
|
||
<div style="margin-top: 2rem; display: flex; gap: 0.8rem; flex-wrap: wrap;">
|
||
<a href="https://portal.amipro.me" target="_blank" class="btn btn-primary" id="btn_portal">Portal</a>
|
||
<a href="mailto:sales@amipro.me?subject=contact" class="btn btn-outline-info" id="title_contact_cta">Contact</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero__media" data-animate>
|
||
<div class="hero__device">
|
||
<img src="files/build.jpg" alt="Integration">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="timeline" style="margin: 0 24px 48px;">
|
||
<article class="timeline-step" data-step="01" data-animate>
|
||
<h4 id="btn_step1">Step 1</h4>
|
||
<p id="info_top_step1">Sample site</p>
|
||
</article>
|
||
<article class="timeline-step" data-step="02" data-animate>
|
||
<h4 id="btn_step2">Step 2</h4>
|
||
<p id="info_top_step2">Login integration</p>
|
||
</article>
|
||
<article class="timeline-step" data-step="03" data-animate>
|
||
<h4 id="btn_step3">Step 3</h4>
|
||
<p id="info_top_step3">Device management page</p>
|
||
</article>
|
||
<article class="timeline-step" data-step="04" data-animate>
|
||
<h4 id="btn_step4">Step 4</h4>
|
||
<p id="info_top_step4">Session management</p>
|
||
</article>
|
||
<article class="timeline-step" data-step="05" data-animate>
|
||
<h4 id="btn_step5">Step 5</h4>
|
||
<p id="info_top_step5">Portal registration</p>
|
||
</article>
|
||
<article class="timeline-step" data-step="06" data-animate>
|
||
<h4 id="btn_step6">Step 6</h4>
|
||
<p id="info_top_step6">Server settings</p>
|
||
</article>
|
||
</section>
|
||
|
||
<div style="margin: 24px; padding: 24px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #696cff;">
|
||
<h3 style="margin-top: 0; color: #333;" id="label_custom_deploy_title">深入定制部署</h3>
|
||
<p style="margin-bottom: 16px; color: #555;" id="label_custom_deploy_desc">Web Component 集成、自定义 UI 和后端 API 集成等高级部署选项</p>
|
||
<a href="integration_api.html" class="btn btn-primary" id="btn_custom_deploy">深入定制部署 →</a>
|
||
</div>
|
||
|
||
<div class="cta-banner" data-animate>
|
||
<div>
|
||
<h4>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>
|
||
</div>
|
||
<a href="mailto:sales@amipro.me?subject=amiPro%20integration" class="btn btn-primary">Talk to us</a>
|
||
</div>
|
||
<!-- / Content -->
|
||
|
||
<!-- Footer -->
|
||
<footer class="content-footer footer bg-footer-theme">
|
||
<div class="container-xxl d-flex flex-wrap justify-content-between py-2 flex-md-row flex-column">
|
||
<div class="mb-2 mb-md-0">
|
||
©
|
||
<script>
|
||
document.write(new Date().getFullYear());
|
||
</script>
|
||
<a href="https://www.amipro.me" target="_blank" class="footer-link fw-bolder">amiPro</a>
|
||
</div>
|
||
<div>
|
||
|
||
<a
|
||
href="mailto:sales@amipro.me?subject=contact"
|
||
|
||
class="footer-link me-4"
|
||
id="title_contact"
|
||
>Contact</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<!-- / Footer -->
|
||
|
||
<div class="content-backdrop fade"></div>
|
||
</div>
|
||
<!-- Content wrapper -->
|
||
</div>
|
||
<!-- / Layout page -->
|
||
</div>
|
||
|
||
<!-- Overlay -->
|
||
<div class="layout-overlay layout-menu-toggle"></div>
|
||
</div>
|
||
<!-- / Layout wrapper -->
|
||
|
||
<!-- Page JS -->
|
||
|
||
<!-- Place this tag in your head or just before your close body tag. -->
|
||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||
</body>
|
||
</html>
|