C#+vue微信ライセンスログインプラグインパッケージ

1.新しいwechatAuth.jsファイル

const queryString = require('query-string')
//       ，snsapi_base （       ，    ，      openid），snsapi_userinfo （      ，   openid    、  、   。  ，          ，      ，       ）
const SCOPES = ['snsapi_base', 'snsapi_userinfo']


class VueWechatAuthPlugin {

  install(Vue, options) {
    let wechatAuth = this
    this.setAppId(options.appid)
    Vue.mixin({
      created: function () {
        this.$wechatAuth = wechatAuth
      }
    })

  }

  constructor() {
    this.appid = null
    this.redirect_uri = null
    this.scope = SCOPES[1]
    this._code = null
    this._redirect_uri = null
  }

  static makeState() {
    return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
  }

  setAppId(appid) {
    this.appid = appid
  }

  set redirect_uri(redirect_uri) {
    this._redirect_uri = encodeURIComponent(redirect_uri)
  }

  get redirect_uri() {
    return this._redirect_uri
  }

  get state() {
    return localStorage.getItem("wechat_auth:state")
  }

  set state(state) {
    localStorage.setItem("wechat_auth:state", state)
  }

  get authUrl() {
    if (this.appid === null) {
      throw "appid must not be null"
    }
    if (this.redirect_uri === null) {
      throw "redirect uri must not be null"
    }
    this.state = VueWechatAuthPlugin.makeState()
    return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${this.redirect_uri}&response_type=code&scope=${this.scope}&state=${this.state}#wechat_redirect`
  }

  returnFromWechat(redirect_uri) {
    let parsedUrl = queryString.parse(redirect_uri.split('?')[1])
    if (process.env.NODE_ENV === 'development') {
      // console.log('parsedUrl: ', parsedUrl)
      this.state = null
      this._code = parsedUrl.code
    } else {
      if (this.state === null) {
        throw "You did't set state"
      }
      if (parsedUrl.state === this.state) {
        this.state = null
        this._code = parsedUrl.code
      } else {
        this.state = null
        throw `Wrong state: ${parsedUrl.state}`
      }
    }
  }

  get code() {
    if (this._code === null) {
      throw "Not get the code from wechat server!"
    }
    // console.log(this)
    // console.log('this._code: ' + this._code)
    let code = this._code
    this._code = null
    // console.log('code: ' + code)
    return code
  }
}

const vueWechatAuthPlugin = new VueWechatAuthPlugin()

export default vueWechatAuthPlugin

2.main.jsでインポート

import wechatAuth from './plugins/wechatAuth'//      

Vue.use(wechatAuth, {appid: XXXXXXXXX});

3.ルーティングフックでは、相関動作

を行うことができる.

router.beforeEach((to, from, next) => {
  if (store.state.loginStatus == 0) {
    //                
    wechatAuth.redirect_uri = window.location.href
    store.dispatch('setLoginStatus', 1)
    window.location.href = wechatAuth.authUrl
  } else if (store.state.loginStatus == 1) {
    try {
      wechatAuth.returnFromWechat(to.fullPath);
    } catch (err) {
      store.dispatch('setLoginStatus', 0)
      next()
    }
    store.dispatch('loginWechatAuth', wechatAuth.code).then((res) => {
      if (res.status == 1) {
        store.dispatch('setLoginStatus', 2)
      } else {
        store.dispatch('setLoginStatus', 0)
      }
      next()
    }).catch((err) => {
      next()
    })
  }else {
    next()
  }
});

c#
string  OpenId = wxdata.GetOpenId(appid, secret, TUrl.Code);        if (OpenId != string.Empty)        { 
     Response.Headers.Add("Access-Control-Allow-Origin", "*");
    Response.Headers.Add("Access-Control-Allow-Methods", "POST");
      Response.Headers.Add("Access-Control-Allow-Headers", "x-requested-with,content-type");     Response.Headers.Add("Access-Control-Allow-Credentials", "true");             System.Web.HttpContext.Current.Response.Cookies.Add(new HttpCookie("OpenId", OpenId));        System.Web.HttpContext.Current.Response.Cookies.Add(new HttpCookie("loginStatus", "1"));
       Response.Redirect("http://192.168.1.10:8080", true);
}