diff --git a/1-Get started/1-Introduction.md b/1-Get started/1-Introduction.md new file mode 100644 index 0000000..fa607cb --- /dev/null +++ b/1-Get started/1-Introduction.md @@ -0,0 +1,45 @@ +# Introduction to EasyLogon +Last update: 23-Dec-21 ([View change history](https://github.com/foxdev-studio/easylogon-docs/commits/master/1-Get%20started/1-Introduction.md)) + +## Table of Contents +- [What is EasyLogon](#what-is-easylogon) +- [EasyLogon pricing](#easylogon-pricing) +- [Account registration](#account-registration) +- [Next steps](#next-steps) + +## What is EasyLogon +EasyLogon is a service that allows you to store all their passwords in one place and sign in on any website by scanning a QR code with their phone + +With EasyLogon you as a website owner or developer can easily integrate QR code sign in into your website without any significant changes to the code + +Advantages of EasyLogon: +- **Easy integration** - Integrate QR code authentication in 15 minutes +- **Doesn't require Federated ID** - you don't need to integrate synchronization with third-party accounts (like "Sign in with Google") to integrate QR code sign in, just one small plugin +- **Secure** - EasyLogon works basically the same way, the browser autocomplete do. Besides, we securely store and transfer data of your users +- **Convenient** - Ability to easily sign in on your website from any device within a few seconds will greatly imporve your users' experience. Besides, such authentication method will encourage your users to use stronger passwords, which will increase security of personal data on your website as well +- **Global** - EasyLogon allows to sign in with QR code on _any_ website, even those which haven't added EasyLogon on their website yet, by using a simple web application, giving more reasons to use our service + +Watch a quick video to know more: + + + +## EasyLogon pricing +We have launched Beta access to EasyLogon service. **During beta testing all features of EasyLogon are free to use** for both end-users and developers. However, once Release version is rolled out we introduce progressive pay-as-you-go pricing system for developers + +For more information about pricing, please contact our marketing team at [business@foxdev.studio](mailto:business@foxdev.studio) + +## Account registration +1. Go to [EasyLogon Developer Console homepage](https://easylogon.foxdev.studio) +2. Click "Get started" button +3. Fill out requested information: Account name, Email address and password +4. Click "Create account" +5. Go to your Email inbox +6. Find a mail from our service (may take some time to be delivered) +7. Click "Confirm account" + +Now that you've created and confirmed an account you can move to the other step + +## Next steps +- [Adding a domain](/docs/1-Get%20started/2-Adding%20a%20domain) +- [Plugin integration](/docs/1-Get%20started/3-Plugin%20integration) +- [Plugin customization](/docs/1-Get%20started/4-Plugin%20customization) diff --git a/1-Get started/2-Adding a domain.md b/1-Get started/2-Adding a domain.md new file mode 100644 index 0000000..b995ce3 --- /dev/null +++ b/1-Get started/2-Adding a domain.md @@ -0,0 +1,140 @@ +# Adding a domain +Last update: 13-Dec-21 ([View change history](https://github.com/foxdev-studio/easylogon-docs/commits/master/1-Get%20started/2-Adding%20a%20domain.md)) + +## Table of Contents +- [Add new domain](#add-new-domain) + - [On registration page](#on-registration-page) + - [On profile page](#on-profile-page) +- [Verify domain](#verify-domain) + - [Option 1: DNS verification](#option-1-dns-verification) + - [Option 2: File verification](#option-2-file-verification) +- [Next steps](#next-steps) + +## Add new domain +### On registration page +[As soon as you created your account](https://easylogon.foxdev.studio/get-started), you can add your domains. Simply type in your domain into the text field and click "Next" + + +> **Note** +> +> Don't include protocol or path when adding a domain: +> +> **Incorrect:** +> ``` +> https://example.com +> https://en.example.com/index.html +> ``` +> **Correct:** +> ``` +> example.com +> en.example.com +> ``` + +If you want to use EasyLogon on all your subdomains, prepend an asterisk wildcard to your domain name: +``` +*.example.com +``` +This will include all subdomains you have on your primary domain. For example: +- en.example.com +- ru.example.com +- forum.example.com +- app.example.com +- etc. + +If you have more than one domain, you'd like to connect, enumerate them, separating with semicolon sign (;) + +For example, if you type in following string: +``` +*.example.com;myweb.site;site.test.com +``` +You will add following domains to your account: +- example.com (with all subdomains) +- myweb.site +- site.test.com + +### On profile page +If you don't want to add domains now, you can do it later on your [profile page](https://easylogon.foxdev.studio/profile) + +Go to Domains section and click "+ Add new domain" + + + +Type in your domain and press Enter or "+" button + + + +Just like on the Get Started page, you can use wildcards to include all subdomains + +## Verify domain +Once you've added your domain to the account, you need to verify it before you can use QR sign in on your website. + +To do so, go to your [profile page](https://easylogon.foxdev.studio/profile) and in Domains section click on your domain that requires verification + + + +From now, you have two options to verify your domain: with DNS record or with file + +### Option 1: DNS verification +To verify your domain with DNS you will need to add a new DNS record on your domain registrar website + +Here some instructions on how to add DNS records for most popular providers: +- [GoDaddy](https://www.godaddy.com/help/add-an-a-record-19238) +- [NameCheap](https://www.namecheap.com/support/knowledgebase/article.aspx/10357/2254/video-how-do-i-add-a-txt-record-for-my-domain/) +- [Name.com](https://www.name.com/support/articles/115004972547-Adding-a-TXT-Record) + +If you use another provider do the following steps: +1. [Identify you domain host](https://support.google.com/a/answer/48323) +2. In a second browser window or tab, sign in to your domain host account +3. Go to your domain’s DNS records. The page might be called something like DNS Management, Name Server Management, Control Panel, or Advanced Settings +4. Select the option to add a new record + +DNS record details are shown in the domain verification window: + + + +This is how it looks when you add DNS record on Name.com: + + + +Click "Add record", go back to EasyLogon tab and click "Check verification" to verify your domain + +> **Note** +> +> It may take up to 48 hours for DNS servers to sync your changes, so if verification fails, try to check verification later + +If verification is successfull, the page will reload and "requires verification" label will disappear + +> **Note** +> +> After successful verification you should not delete the DNS entry, because our service will periodically re-verify your domain to ensure that it is still yours + +### Option 2: File verification +Alternatively, you can verify your domain by uploading a text file to the root of your website + +First, download file from domain verification window by clicking "Download file" + + + +Then upload the file to the root folder of your website on your server. Here some ways to do so: + +If you have a dedicated VPS/VDS server, see [Transfer Files Between Remote and Local Systems Over SSH](https://linuxhandbook.com/transfer-files-ssh/) + +If you use a hosting for your website, see instructions for control panel, installed on your hosting: +- [Plesk](https://docs.plesk.com/en-US/12.5/customer-guide/websites-and-domains/website-content/uploading-content-with-file-manager.74105/#:~:text=%20To%20upload%20a%20website%20from%20your%20computer,Upload%20Files%2C%20select%20the%20archive%20file%2C...%20More%20) +- [cPanel](https://www.peopleshost.com/2018/07/how-to-upload-files-using-file-manager-in-cpanel/) + +As the result, the file should be accessible via browser at `https://yourdomain.com/_ezlverification_challenge.txt` + +If you done it right, when navigating to `https://yourdomain.com/_ezlverification_challenge.txt` you should see your verification string + +When it's done, click "Check verification" on EasyLogon domain verification window + +If verification is successfull, the page will reload and "requires verification" label will disappear + +> **Note** +> +> After successful verification you should not delete the file, because our service will periodically re-verify your domain to ensure that it is still yours + +## Next steps +- [Plugin integration](/docs/1-Get%20started/3-Plugin%20integration) +- [Plugin customization](/docs/1-Get%20started/4-Plugin%20customization) \ No newline at end of file diff --git a/1-Get started/3-Plugin integration.md b/1-Get started/3-Plugin integration.md new file mode 100644 index 0000000..0d1a26d --- /dev/null +++ b/1-Get started/3-Plugin integration.md @@ -0,0 +1,87 @@ +# Plugin integration +Last update: 23-Dec-21 ([View change history](https://github.com/foxdev-studio/easylogon-docs/commits/master/1-Get%20started/3-Plugin%20integration.md)) + +## Table of Contents +- [Obtain code](#obtain-code) + - [CSS selectors](#css-selectors) +- [Insert code to your website](#insert-code-to-your-website) + - [React](#react) +- [Next steps](#next-steps) + +Once you created account, added and verified your domain, it's time to add QR code widget to your website + +## Obtain code +Go to your [profile page](https://easylogon.foxdev.studio/profile#CreateWidget) and click "Get widget code" button in Domains section + +On Configure widget panel you can see how widget will look on your website in an interactive preview section + +You can change widget appearance by changing widget type + + + +### CSS selectors +Next step is to bind your login/password fields so widget can automatically insert user's credentials and "click" sign in button + +Watch this video to know how to obtain selectors: + + + +Materials: +- [Copy CSS Selector extension for Chrome](https://chrome.google.com/webstore/detail/copy-css-selector) +- [Validation script](https://easylogon.foxdev.studio/docs/test-script.js) + +## Insert code to your website +When all fields are filled and tested, next step is to insert generated code into your sign in page + +Click "Copy" button at the bottom of panel + + + +Open HTML code of your authentication page. If you use a CMS on your website, learn how to edit page source code + + + +Insert container part of the plugin into place you'd like to see the widget and the script part at the bottom of the `
` tag + + + +> **Note** +> +> If you have problems with plugin integration, feel free to [contact our support](https://easylogon.foxdev.studio/support) and we'll do our best to assist you or even setup integration for you. This is free + +### React +If your web application is using ReactJS framework, you need to perform additional steps: + +Instead of pasting script block of plugin (second part of code on picures above), paste following code into `componentDidMount` method of your component (if you are using class-based components): +```js +componentDidMount() +{ + var script = document.createElement("script"); + script.src = "https://easylogon.foxdev.studio/ezlog.js"; + script.defer = true; + script.async = true; + document.body.appendChild(script); +} +``` + +or if you're using functional components in `useEffect` method: + +```js +useEffect(() => +{ + var script = document.createElement("script"); + script.src = "https://easylogon.foxdev.studio/ezlog.js"; + script.defer = true; + script.async = true; + document.body.appendChild(script); +}, [ ]); +``` + +## Next steps +- [Plugin customization](/docs/1-Get%20started/4-Plugin%20customization) diff --git a/1-Get started/4-Plugin customization.md b/1-Get started/4-Plugin customization.md new file mode 100644 index 0000000..6e9c65a --- /dev/null +++ b/1-Get started/4-Plugin customization.md @@ -0,0 +1,42 @@ +# Plugin customization +Last update: 13-Dec-21 ([View change history](https://github.com/foxdev-studio/easylogon-docs/commits/master/1-Get%20started/3-Plugin%20customization.md)) + +## Table of Contents +- [Plugin types](#obtain-code) +- [Custom CSS](#custom-css) +- [Related links](#related-links) + +When everything is up and running, it's time to think about appearance. We provide some tools to customize your widget + +## Plugin types +There're four basic types of widget which work out of the box: +- Inline (`inline`) - QR code is placed next to sign in form +- Button (`button`) - "Sign in with QR code" button which is placed under sign in button +- Inline button (`inlineButton`) - Small "Sign in with QR code" button which is placed on the right from password field +- Link (`link`) - Hyperlink which opens QR code in another browser tab + + + +To see how each type of widget acts, go to [widget contructor panel](https://easylogon.foxdev.studio/profile#CreateWidget) + +## Custom CSS +Since QR code button is injected into your website code, it can be heavily customized with CSS + +You can attach new CSS file to your page head and use `#ezl-btn` selector to apply styling rules to the widget + +### Example +```css +#ezl-btn +{ + background: gray; + border: 2px solid red; + color: white; + font-family: monospace; +} +``` + + +For more information about customization and limitations, see [Plugin API reference](/docs/2-API%20Reference/1-Plugin) + +## Related links +- [Plugin API reference](/docs/2-API%20Reference/1-Plugin) diff --git a/2-API Reference/1-Plugin.md b/2-API Reference/1-Plugin.md new file mode 100644 index 0000000..46d4f2d --- /dev/null +++ b/2-API Reference/1-Plugin.md @@ -0,0 +1,93 @@ +# Plugin API reference +Last update: 23-Dec-21 ([View change history](https://github.com/foxdev-studio/easylogon-docs/commits/master/2-API%20Reference/1-Plugin.md)) + +## Table of Contents +- [Plugin attributes](#plugin-attributes) + - [Structure sample](#structure-sample) +- [Plugin CSS selectors](#plugin-css-selectors) + - [#ezl-btn](##ezl-btn) + - [.ezl-container](#.ezl-container) +- [Flyout customization](#flyout-customization) +- [Related links](#related-links) + +## Plugin attributes +### Structure sample +```html + +