vue はサードパーティの Web サイトにジャンプし、ログイン後にパラメータを返します

Vue.js は、フロントエンド開発で最も人気のあるフレームワークの 1 つで、インタラクティブなユーザー インターフェイスを簡単かつ効率的に構築する方法を提供します。 Web アプリケーションを開発する場合、OAuth2 認証ログイン、Alipay 支払いなどのサードパーティ Web サイトと対話する必要があることがよくあります。これらの操作はサードパーティの Web サイトにジャンプし、操作の完了後に元のアプリケーションに戻ります。この記事では、Vue でログインするためにサードパーティの Web サイトにジャンプし、パラメーターを返すときにそれを適切に処理する方法について説明します。

サードパーティ Web サイトにジャンプ

まず、Vue にサードパーティ Web サイトへのリンクを導入する必要があります。通常、このリンクには、アプリケーションとリダイレクト URI を識別するために使用される redirect_uri、client_id などのいくつかのパラメーターが含まれます。 http://example.com/login にジャンプしたいとします。<a> タグを使用してリンクを構築する必要があります:

<template>
  <div>
    <a href="http://example.com/login?redirect_uri={{redirect_uri}}&client_id={{client_id}}">
      跳转到第三方网站
    </a>
  </div>
</template>

このリンクでは、Vue テンプレート構文を使用して 2 つのパラメーター redirect_uri と client_id を挿入しました。これらのパラメータは事前​​に定義してコンポーネントに渡す必要があります。

戻りパラメータの受信

ユーザーがサードパーティ Web サイトで操作を完了すると、アプリケーションにリダイレクトされます。このプロセス中に、サードパーティ Web サイトはリダイレクト リンクのクエリ文字列に code、state などのいくつかのパラメーターを追加します。後続の操作を完了するには、これらのパラメータを抽出して処理する必要があります。

Vue でクエリ文字列を処理するには、vue-router の Query オブジェクトを使用できます。これにより、URL クエリ パラメータが自動的に抽出され、次のように公開されます。オブジェクト。ルート内に次のルートを定義するとします:

import VueRouter from 'vue-router';
import LoginCallback from './components/LoginCallback.vue';

const router = new VueRouter({
  routes: [
    {
      path: '/login/callback',
      component: LoginCallback
    }
  ]
});

LoginCallback コンポーネントの $route.query を通じて戻りパラメータを取得できます:

<template>
  <div>
    <p v-if="code">授权码: {{code}}</p>
    <p v-if="state">状态码: {{state}}</p>
  </div>
</template>

<script>
export default {
  name: 'LoginCallback',
  data() {
    return {
      code: this.$route.query.code,
      state: this.$route.query.state
    }
  }
}
</script>

この例では、data メソッド On を使用して、$route.query の code プロパティと state プロパティをコンポーネントにマウントします。インスタンス v-if は、パラメータが存在するかどうかに基づいて表示を制御するためにテンプレートで使用されます。パラメータが存在する場合は対応する値が表示され、パラメータが存在しない場合は何も表示されません。

実際の開発では、検証のために認証コードをサーバーに送信したり、パラメーター内のステータス コードに基づいて操作が成功したかどうかを判断したりするなど、追加の操作を実行する必要がある場合があります。これらの操作は、コンポーネントのライフサイクルフック関数で完了できます。たとえば、created フック関数では、axios ライブラリを使用して認証コードをサーバーに送信できます。

<script>
  import axios from 'axios';

  export default {
    name: 'LoginCallback',
    created() {
      if (this.code) {
        axios.post('/oauth/token', {
          grant_type: 'authorization_code',
          code: this.code,
          redirect_uri: 'http://localhost:8080/login/callback',
          client_id: 'my_client_id',
          client_secret: 'my_client_secret'
        }).then(response => {
          console.log(response.data);
        }).catch(error => {
          console.log(error);
        });
      }
    },
    data() {
      return {
        code: this.$route.query.code,
        state: this.$route.query.state
      }
    }
  }
</script>

この例では、 # を使用します。 ##axios ライブラリは、アクセス トークンを要求するためにサーバーに POST リクエストを送信します。認証コード、リダイレクト URI、クライアント ID、およびクライアント シークレットのパラメーターを POST リクエストにパッケージ化し、成功および失敗のコールバック関数で処理します。このようにして、サードパーティの Web サイトにジャンプしてログインし、Vue で戻りパラメータを受け取る操作を簡単に完了できます。

概要

この記事では、Vue でログインするためにサードパーティの Web サイトにジャンプし、パラメーターを返すときにそれを処理する方法を紹介しました。テンプレート構文を使用して、ジャンプ パラメーターを挿入し、コンポーネント内の戻りパラメーターを抽出して処理しました。フロントエンド開発者として、サードパーティの Web サイトと対話し、戻りパラメーターを処理する方法を理解することが非常に重要です。この記事の紹介によって、このスキルを習得し、実際の開発に適用できるようになったと思います。

以上がvue はサードパーティの Web サイトにジャンプし、ログイン後にパラメータを返しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。