vue micro-channel public number to obtain authorization page openid, cross-domain

No. develop micro-channel public needs to obtain the user's openid, according to the public micro-channel number of the official document description, the following preparatory work needs to be done

1. platform developers need to first come first public official website of "Development - Interface Permissions - Web Services - Web Account - Web authorization to obtain information about users' configuration options, modify the authorization callback domain. Please note that the domain name is filled in here. Note: You can not be ip address

  If no domain authorization, micro-channel at the time of authorization redirect_uri callback will return an error.

Configuring the domain name is required to provide micro-channel can access a file in the web server, so it needs a web server, as FIG.

 

The first step: Go to the authorization page, access code

 let urlNow=encodeURIComponent(window.location.href);
// let scope='snsapi_userinfo';    //snsapi_userinfo 非静默授权用户有感知 snsapi_base 静默授权用户无感知  

let url= 'https://open.weixin.qq.com'+'/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+urlNow+'&response_type=code&scope=snsapi_userinfo#wechat_redirect';
window.location.href = url

After successful authorization will redirect pages, with code parameters will acquire code with the following code, code is updated every five minutes, do not save.

getUrlKey:function(name){//获取url 参数
    return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
},

The second step. By openid authorization code in exchange page

this.$axios.get('https://api.weixin.qq.com'+'/sns/oauth2/access_token?appid='+appid+'&secret='+appsecret+'&code='+code+'&grant_type=authorization_code')
  .then(res=>{
    
      this.openid = res.data.openid;
   }).catch(error=>{
        
})

The third step. To solve two problems beginning

3.1 Since there is no local test domain, you can use natapp mapped to the local temporary domain name. reference

3.2 With the need to configure the web server configuration, here I am using Tomcat, download and install Tomcat.

Open the directory into the Tomcat webapps directory, create a new folder: myapp, and create a WEB-INF folder in the directory, the new web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1"
  metadata-complete="true">

  <display-name>myword</display-name>
  <description>
     <error-code>404</error-code>
     <location>/index.html</location>
  </description>

</web-app>

From the micro-channel public congregation numbers downloaded from the text file into the folder myapp at the same time in the micro-channel configuration domain developer tools. Click Save

The fourth step .vue package

Before packaging in vue.config.js disposed (herein vue-cli).

  publicPath: process.env.NODE_ENV === 'production'
    ? '/myapp/'
    : '/',

Execution npm run build

The packaged into tomcat's myapp folder

At this time, the directory structure above.

Start Tomcat, mac start command: sudo sh ./startup.sh

 

5. Cross-Domain

Since the micro-channel restrictions, micro-channel authorization page must be opened in micro-channel development tools. Because of cross-domain problems api local services and micro-channel interface, local debugging can call the following command to open a micro letter development tools:

open -a /Applications/wechatwebdevtools.app --args --disable-web-security --user-data-dir --allow-running-insecure-content

Or using Nginx solve cross-domain problems.

In the development of micro-channel input tools: http://xxx.xxx.cc/myapp