집 >웹 프론트엔드 >JS 튜토리얼 >Vue에서 WeChat 인증 로그인을 구현하는 단계에 대한 자세한 설명

Vue에서 WeChat 인증 로그인을 구현하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-28 16:04:446682검색

이번에는 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 인증을 하려면 많은 호핑이 필요합니다. 결국 처음으로 링크를 클릭했을 때 인터넷에서 해결 방법을 확인하는 것이 고통스럽습니다. 링크 자체를 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. 프런트 엔드 주소를 리디렉션하고 토큰을 얻는 방법을 고려하세요

다음 단계는 제가 지금 사용하는 방법입니다. 아직 버그가 많습니다. 나중에 최적화하겠습니다. 또는 더 나은 방법을 찾으세요.
in main.js routing 전역 후크를 수정하여 로컬에 user_token이 있는지 확인하세요. 이는 WeChat 인증 후 반환되는 토큰입니다. 토큰이 없고 현재 경로가 작성자가 아닌 경우. 인증을 위해 특별히 설계됨) 그런 다음 www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwm과 같은 현재 URL을 저장한 다음 작성자를 입력합니다. 로컬에 토큰이 있는 경우, 즉 사용자가 이전에 토큰을 승인했고 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에 처음 진입하는 로직은 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 중국어 관련 기사를 주목하세요!