説明例
In this example, we used the 2-Factor Authentication Twilio Integration Velo package to add an extra layer of security during the sign-in process, allowing you to verify the identity of a site member logging in to your site. In addition to an email and password, site members must enter a code sent to their phone when logging in. The phone number is associated with the site member during site registration.
For more information about this Velo Package, please see the Readme in the package folder located in the Code Files section of your site.
どのように構築したか
We installed the Velo package on our site, and followed the steps described in the Setup section of the package’s readme file.
ページ要素
We added a registration and login lightbox to our site. The lightbox contains a multi-state box for switching between registration and login states. The lightbox includes the following elements:
Registration State: Visible Elements
3 text inputs: email, password, phone number
dropdown: for selecting a country code
submit button
text element: links to the login page for site visitors who already registered
Registration State: Collapsed Elements
text input: for entering the confirmation code
register button
2 text elements: for error messages and for resending the verification code via a phone call
Login State: Visible Elements
2 text inputs: email and password
submit button
text element: links to a registration page for new site visitors
Login State: Collapsed Elements
text input: for entering the confirmation code
login button
2 text elements: for error messages and for resending the verification code via a phone call
コード
We added the following code to our lightbox:
Import the initPage() function from the package.
Set aliases for all the page components (elements). Make sure to use the exact alias names used in the init-page.js public package file.
Call the initPage() function with the aliased components.
関連例
これは役に立ったか?
|
ご意見ありがとう!
Twilio SMS Integration
Integrate with Twilio to send SMS messages
中級
Twilio Integration
Integrate with Twilio to make voice calls and send SMS messages
上級
会員エリア
Custom member signup with email verification.
上級