Vue プロジェクトにサードパーティの検証コードを適用する-jsチュートリアル-php.cn

Vue プロジェクトにサードパーティの検証コードを適用する

php中世界最好的语言

リリース： 2018-06-11 15:06:29

オリジナル

1865 人が閲覧しました

今回は、Vue プロジェクトでサードパーティの検証コードを適用する際の注意点について説明します。以下は実際のケースです。見てみましょう。

Tencent 認証コードとは何ですか?次のようになります... :point_down:

最近の企業プロジェクトでは Tencent クラウド認証の導入が必要です。要件は次のとおりです: ユーザーが複数の認証コードを取得する場合、他人が悪意を持って SMS 認証コードを送信することを防ぐため。 Tencent 認証コードを呼び出す必要があります。認証が成功すると、認証コードが自動的に送信され続けます。最初は、インターネット上に関連記事があまりなく、混乱しました。しかし、接続してみると、非常にシンプルであることがわかりました (シンプルすぎるため、誰も 2333 を書かないだけかもしれません...)

もう BB は必要ありません。始めましょう!

まず、ドキュメントのインターフェイス呼び出しプロセスを確認します:

(ドキュメントアドレス:cloud.tencent.com/document/pr…)

それはいくつかの小さなステップに分かれています:

Tencent に移動バックグラウンドで JS アドレスを取得するためのクラウド。
バックグラウンドはインターフェースを通じてフロントエンドに渡されます。
後、フロントエンドは JS アドレスに基づいて検証コードを読み込みます。検証が成功すると、チケット (単なる文字列) を取得して、それを渡します。。
バックエンドを気にしない場合、フロントエンドでは何をする必要があるでしょうか?

上の図は、プロジェクトの実際のインターフェイスコールバックです。コールバックには JS アドレスと businessId が含まれています。この JS アドレスを使用して、これを動的に追加するメソッドを作成する必要があります。 body タグへの Js: point_down::

パラメータ src データを返すために検証コードインターフェイスを呼び出すとき、Js アドレスが渡されます。

capInit この関数はJSを導入した場合にのみ使用できます。そうでない場合はエラーが報告されるため、遅延を設定します(コードは比較的単純なので、Promiseを使用できます)。

その後、このコールバック関数が呼び出され、ユーザーが認証されると、この関数が呼び出され、JSON 形式の検証パラメーターが渡されます。 :point_down:

//回调函数：验证码页面关闭时回调
cbfn(res) {
 if (res.ret == 0) {
  // 用户验证成功,获取到ticket，然后你需要将这个ticket和之前的businessId一起传给后台
  // 若后台验证成功，用户就可以收到验证码了，无需你再做其他操作
  alert(res.ticket);
  capDestroy()
 }
 else {
  //用户关闭验证码页面，没有验证
  capDestroy() //销毁之前创建的script标签
 }
}

ログイン後にコピー

Repeat: ユーザー検証が成功し、チケットが取得されたら、このチケットと以前の businessId をバックエンドに渡す必要があります。バックグラウンド検証が成功すると、ユーザーは検証コードを受け取り、他の操作を行う必要はありません

最後に（コピー）

この関数では、options は複数のパラメーターを設定できる Json オブジェクトです。 :point_down:

1. iframe_p (必須): 検証コード iframe を埋め込む要素。

2. オプション: {callback:xxx,showheader:xxx,themeColor:xxxxxx,type:"embed"}、json形式オブジェクト

callback: 検証コードページを閉じるコールバック関数。ユーザーが認証されると、この関数が呼び出され、json 形式の検証パラメーターが渡されます。

{ret:xxx,ticket:"xxx"}capInit(iframe_p, options)

ret=0 はユーザーの検証が完了し、企業がチケットを検証できることを意味します。

ret=1 はユーザーが検証コードを検証していないことを意味します。現時点ではチケットパラメータはありません。

パラメータチケットをビジネスバックエンドに送信する必要があります。入力する特定のフィールドについては、後のバックエンドサーバー開発セクションを参照してください。

themeColor: ページのテーマの色を設定します。値は ff572d などの 16 進数の色です。設定後、ページ上のボタンやアイコンが設定した色に変わります

showHeader
: 確認コードページのヘッダーを表示します(リターンとヘルプ、モバイルページのみ有効)

false: 表示しません

type : 検証コードのスタイルを設定する PC オプションのオプション。特定のスタイルのパフォーマンスについては、検証コードの公式 Web サイトを確認してください。

"point": トリガー (デフォルト)

"embed": 埋め込み

"popup": ポップアップスタイル

pos: 位置属性を設定します。ポップアップ検証コードのパラメーターは PC ポップアップ検証コードにのみ有効です

absolute: 絶対位置

fixed: ブラウザウィンドウを基準とした絶対位置

static: 静的位置

relative: 相対位置

keepOpen: 検証ページの属性を設定します

false: 検証に合格し更新します (デフォルト)

lang: 検証コードの言語タイプを設定します

簡体字中国語: 2052 (デフォルト)

繁体字中国語: 1028

英語: 1033

覚えておいてください作成したスクリプトタグを破棄するのに間に合うように capDestroy() を呼び出す必要があります。そうしないと、多くのスクリプトタグが作成されてしまいます...

ドキュメントには、capInit() を呼び出す前に capDestroy() を呼び出すように書かれていますが、試してみましたが、そうではありませんでした。動作しないので、最終的には検証が成功したか、ユーザーが検証されずに検証ポップアップウィンドウが閉じたかに関係なく、capDestroy() が呼び出されます。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vueでスワイパーを操作する方法

vue cli+webapck4に必要な手順

以上がVue プロジェクトにサードパーティの検証コードを適用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。