Files
amipro-home/integration.html
2025-12-29 18:48:44 +09:00

361 lines
24 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 Passkeys 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", "One month free trial<br>(After free registration of the management portal, all functions are free to try for one month)");
lang_map.set("zh-CN", "一个月免费试用<br>(免费注册管理门户后,所有功能免费试用一个月)");
lang_map.set("ja", "1ヶ月間の無料トライアル<br>管理ポータルの無料登録後、すべての機能を1ヶ月間無料でお試しいただけます");
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, 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("ja", "以下のリンクをクリックして、サンプルサイトに入り、任意のユーザー名とパスワードを入力して、サイトにログインしてください。以下の説明では、サンプルサイトのソースコードを参照する必要があります。<br><a href='https://sample.amipro.me/' target='_blank'>https://sample.amipro.me</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", "ステップ2: ログインページの統合");
i18n_messages.set("btn_step2", lang_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>"+
"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>"+
"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>");
lang_map.set("ja", "amiPro JavaScript SDK を使用して、Web サイトのログインページにパスキー ログインを追加します。<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 周辺のコードを参照し、ログインページにパスキーログインを追加してください。<br><a href='https://sample.amipro.me/login.html' target='_blank'>https://sample.amipro.me/login.html</a>");
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", "ステップ3: デバイス管理ページの構築");
i18n_messages.set("btn_step3", lang_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("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 周辺のコードはリカバリ・リンクの処理コードです。");
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", "ステップ4: セッション管理");
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/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("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);
lang_map = new Map();
lang_map.set("en-US", "Step5: Management Portal registration");
lang_map.set("zh-CN", "步骤5: 管理门户注册");
lang_map.set("ja", "ステップ5: 管理ポータル登録");
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 a new account or add a 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_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%>");
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", "步骤6: FIDO2服务器设置");
lang_map.set("ja", "ステップ6: FIDO2 サーバー設定");
i18n_messages.set("btn_step6", 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 the link to the device management page built by step 3.<br>Click [Submit] to complete the settings.<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%>");
i18n_messages.set("info_top_step6", lang_map);
lang_map = new Map();
lang_map.set("en-US", "Launch Passkey journeys in six guided steps");
lang_map.set("zh-CN", "通过六个指南步骤启动 Passkey 流程");
lang_map.set("ja", "6つのガイド付き手順でパスキー導入を開始");
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" 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 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>