vue で WeChat 認証ログインを実装する手順の詳細な説明

今回は、Vue で WeChat 認証ログインを実装する手順について詳しく説明します。Vue で WeChat 認証ログインを実装するための 注意事項 は何ですか? ここで実際のケースを見てみましょう。

Background

vue は、WeChat 認証のためにフロントエンドとバックエンドの開発を分離します

Scenario

アプリは、ユーザーがページをクリックすると、WeChat でログインを認証します。ユーザー情報を取得するため。

問題: 固定の h5 アプリケーションのホームページがありません。承認後のリダイレクト URL はパラメータがあり、非常に長いです

私は開発過程でさまざまな方法を試してきましたが、毎回それは私の気分を説明するのに十分ではありません。井戸に飛び込む体験。

1. 最初に、フロントエンドが WeChat 接続をリクエストし、コードを返し、そのコードを使用してバックエンド インターフェイスにトークンを取得します。その後、他の人のブログでこの方法は良くないと言っているのを見ました。バックエンド インターフェイスを直接リクエストし、バックエンドで URL を返すのが最善です。ジャンプするには、バックグラウンドで URL を返し、フォアグラウンドでジャンプする最も伝統的な方法を使用しました。

async ReturnGetCodeUrl() {
  let {
    data
  } = await getWxAuth({});
  if (data.status == 200) {
    window.location.href = data.url;
    // 返回的结果
    // redirect_uri重定向的url是后台的地址，后台就是可拿到code，获取token
    // https://open.weixin.qq.com/connect/oauth2/authorizeappid=xxxxxxxxxxxxxxxxxx&redirect_uri=***url***&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect
    
  }
 },

2. WeChat の認証には何度もホップする必要があり、インターネットから解決策を確認したところ、結局のところ、リンクに戻るのが面倒でした。リンク自体を redirect_uri パラメータとして使用しました。おそらく次のようになります

https://open.weixin.qq.com/connect/oauth2/authorizeappid=xxxxxxxxxxxxxxxxxx&redirect_uri=*www.admin?http://www.xxx。 com/h5/product*&response_type=code&scope =snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect

ただし、フロントエンド リンクは次のようになり、パラメーターがあり、非常に長いです。 WeChatは私がこんなに醜いことを受け入れられないかもしれません。 /(ㄒoㄒ)/~~

http://www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwmyipkHr8AQCv-hYXZVAIFTwDXOsWSKqgu3VaCmaKserBnacvWuzO3Zwdf8y%2F2K2lvqkluV6Ane4LCAKyPU2 tPAPj%2FMF6F6xkzp27GqqpNya7HbdEA34qGQJvHIA9tlIMkeEWid1112b8oZuP3FQBwU%2F%2FMaSrovzQP6LlzWamyPnv0vMizu8uh0ItpJOQUV1m%2FtemF3U9KuHo8rXCw%3D

ついに諦めたこの解決策について

3. フロントエンドアドレスをリダイレクトしてトークンを取得する方法を検討します

次のステップは、まだ多くのバグがあるので、後で最適化します。または、main.js の

routing

グローバル フックを変更して、ローカルに user_token があるかどうかを確認します。これは、トークンがなく、現在のルートが作成者 (ページ) でない場合に返されます。認証用に特別に設計されています)、現在の URL (www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwm など) を保存し、作成者を入力します。ローカルにトークンがある場合、つまり、ユーザーが以前にトークンを承認していて、vuex にユーザー情報がない場合、ユーザー情報を取得して vuex に保存します。ここで発生する問題は、トークンが期限切れになることです。次に、ローカルの user_token を削除します。 window.localStorage.removeItem("user_token"); この時点で、ページ router.go(0) を更新します。トークンがない場合は、もう一度実行します。

 router.beforeEach((to, from, next) => {
   //  第一次进入项目
   let token = window.localStorage.getItem("user_token");
   
   if (!token && to.path != "/author") {
    window.localStorage.setItem("beforeLoginUrl", to.fullPath); // 保存用户进入的url
    next("/author");
    return false;
   } else if (token && !store.getters.userInfo) {
   //获取用户信息接口
    store
     .dispatch("GetUserInfo", {
      user_token: token
     })
     .catch(err => {
      window.localStorage.removeItem("user_token");
      router.go(0);
      return false;
     });
   }
   next();
  });

以下は author.vue に入るロジックです。最初に author (www.xxxx.com/h5/author) に入るとき、リンクにトークン パラメータがあるかどうかを確認し、トークン パラメータがない場合は WeChat 認証にジャンプします。その後、バックグラウンドがリダイレクトして次のようなトークンを運びます: www.xxxx.com/h5/author?token=xxxxxxxxx&msg=200

<template>
  <p>
授权中。。。
  </p>
</template>
<script>
 
  import {
   getWxAuth
  } from '@/service/getData'
  import {
   GetQueryString 
  } from '@/utils/mixin';
  export default {
   data() {
     return {
      token: '',
     };
   },
   computed: {
    
   },
   created() {
     this.token = window.localStorage.getItem("user_token");
     //判断当前的url有没有token参数,如果不存在那就跳转到微信授权的url
     //就是前面说的ReturnGetCodeUrl方法
 
     if (!GetQueryString("token")) {
      this.ReturnGetCodeUrl();
     } else {
      //如果有token，如http://www.xxxx.com/h5/author?token=xxxxxxxxx&msg=200，这里的参数就是后台重定向到前台http://www.xxxx.com/h5/author，并携带的参数。这样就可以拿到我们想要的token了
      //判断一下后台返回的状态码msg，因为可能出现微信拿不到token的情况
      let msg = GetQueryString("msg")
      if (msg = 200) {
        this.token = GetQueryString("token");
        //存储token到本地
        window.localStorage.setItem("user_token", this.token);
        //获取beforeLoginUrl，我们的前端页面
        let url = window.localStorage.getItem("beforeLoginUrl");
        //跳转
        this.$router.push(url);
        //删除本地beforeLoginUrl
        removeLocalStorage("beforeLoginUrl");
      }else{
      //msg不是200的情况，可能跳到404的错误页面
      }
     }
   },
   methods: {
    
     async ReturnGetCodeUrl() {
      let {
        data
      } = await getWxAuth({});
      if (data.status == 200) {
       
        window.location.href = data.url;
      }
     },
     
   },
   watch: {},
   components: {},
   mounted: function () {}
  }
</script>
<style lang=&#39;scss&#39; scoped>
</style>

GetQueryStringメソッドmixin.js

export const GetQueryString = name => {
 var url = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
 var newUrl = window.location.search.substr(1).match(url);
 if (newUrl != null) {
  return unescape(newUrl[2]);
 } else {
  return false;
 }
};

これを読んだ後、あなたはメソッドをマスターしたと思います。この記事の事例については、オンラインの php 中国語のその他の関連記事に注目してください。

推奨読書:

vueに認証コードカウントダウン機能が実装

axiosが表示された時の302ステータスコードの対処方法

以上がvue で WeChat 認証ログインを実装する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。