このページのトップへ
2要素認証Twilioの統合

2要素認証Twilioの統合

wix-members-2fa-twilio Veloパッケージを使用して、サイトに2ファクタ認証を追加します。

中級.png

中級

823

出版された:

December 12, 2021

酒を楽しむ少女

によって

アンカー 1
開発者を雇う

説明例

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.

コード例

タブ1

.

タブ2

.

タブ3

.

このコードによる解決は複雑になる可能性がある。

どのように構築したか

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:

  1. Import the initPage() function from the package.

  2. 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.

  3. Call the initPage() function with the aliased components.

使用したAPI

コード以外の例。

コード以外の例。

コード以外の例。

コード以外の例。

関連記事

記事リンク

開発者を雇う

Veloソリューションは強力なツールですが、自力で構築するのは困難です。経験豊富なVelo開発会社に構築をお任せください。

関連例

これは役に立ったか?

はい

|

いいえ

ご意見ありがとう!

Twilio SMS Integration

Twilio SMS Integration

Integrate with Twilio to send SMS messages

中級.png

中級

Twilio Integration

Twilio Integration

Integrate with Twilio to make voice calls and send SMS messages

中級.png

上級

会員エリア

会員エリア

Custom member signup with email verification.

中級.png

上級

アンカー2
ページ下