WeChat 인증을 받고 vue로 로그인하는 방법

이번에는 vue가 WeChat 인증을 받고 로그인하는 방법을 보여드리겠습니다. vue가 WeChat 인증을 받고 로그인하기 위한 주의사항은 무엇인가요? 다음은 실제 사례입니다.

Background

vue는 WeChat 인증을 위해 프런트엔드와 백엔드 개발을 분리합니다

Scenario

app은 사용자가 페이지를 클릭하면 WeChat Moments 또는 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 인증에는 많은 호핑이 필요합니다. 결국 인터넷에서 처음 클릭했을 때 링크로 돌아가는 것이 고통스럽습니다. 링크 자체를 리디렉션 매개변수로 사용했습니다. 아마도 다음과 같습니다

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에서 라우팅 전역 후크를 수정하여 WeChat 인증 후 반환되는 토큰인 user_token이 로컬에 있는지 확인하세요. 인증)을 선택한 다음 현재 URL(예: www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwm)을 저장하고 작성자를 입력합니다. 로컬에 토큰이 있는 경우, 즉 사용자가 이전에 토큰을 승인했고 vuex에 사용자 정보가 없는 경우 사용자 정보를 가져와 vuex에 저장합니다. 여기서 발생하는 문제는 토큰이 만료된다는 것입니다. 그런 다음 삭제하겠습니다. 로컬 user_token을 얻으면 window.localStorage.removeItem("user_token"); 이때 페이지를 새로 고치고 토큰이 없으면 다시 진행하십시오.

 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에 처음 진입하는 로직은 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 method

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 중국어 관련 기사를 주목하세요!

추천 자료:

jQuery로 병합/추가 배열 중복 제거 기능 만들기

vue-cli 구성 요소 가져오기 및 사용 단계 자세한 설명

위 내용은 WeChat 인증을 받고 vue로 로그인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!