The method of obtaining the user authorization micro-channel and the step openId

Turn: https: //www.jianshu.com/p/b7e2100b56e4

 

First, what openId that?
openId uniquely identify a user ( 'id') in the current number of the public, that is to say by this openId, the public will be able to distinguish in this particular number which user.

Two, openId what's the use?

If A buys a commodity in the current public number, order information stored in the user's sure to back-end database, and that depending on what store it? openId is to uniquely identify a user in the current public numbers for data keys of binding by openId of orders to buy and user information. So I have to find what the user to purchase items, you'll be able to make inquiries through openId, and the data is unique, and will not conflict with other user data.

Expansion: UnionID: a business or company may have more than one public number, if User A are concerned about this public company following three numbers, then the user will have three openId (corresponds to a number on a public openID). If we, as developers, to summarize in this user data consumption of under three public number, how do I get into these three data (the same user)? The answer is UnionId, micro-channel developer documentation: If developers have multiple mobile applications, web applications, and the public accounts, can be distinguished unique user by acquiring the basic user information unionid, because the same users, WeChat open platform for the same different applications in (mobile applications, web applications and public accounts), unionid is the same. That is if you want to get the user data in the same number of companies in different public, backstage table structure only to be associated openId, but also related UnionId.

Third, how to obtain openId?

(A) sign in the background micro-channel public platform to obtain public AppId number, set a callback address.

image

Callback address settings page of the wizard: Development> Interface Permissions> Web Services> Web authorization> Modify. Development of the project has been put under the need to resolve a good server domain name server, the Mp ***. Text file into the root directory of the server, then the server must be able to link your external network is a public network IP, and 80 ports are open, you can use such as Ali cloud server, the default configuration on it.

Configuration

(B) According to development needs, silent or non-silent authorize authorized

① silent authorized: snsapi_base, no pop-ups, can only get the user's openId.

② non-silent authorized: snsapi_userinfo, a bomb box pops up to confirm authorization requires the user to manually click. You can get openId, the user's avatar, nicknames, etc.

image

(Iii) front-end code, the parameters correspond to the acquired code, the background and calls the interface, the code to the backed

image

redirect_uri, this means: after the authorization is completed to return to the current page (and refresh a page)

getUrlParam method can lower Baidu, the page is acquired path parameter corresponding to a field.

image

image

If the configuration parameters correspond, then the time after the page has been refreshed by callback address, you will see the code in the address bar.

image

After the code (D) taken in the address bar of the front end interface to the code by adjusting the back pass, the background and the user access to information openId avatar nicknames and the like returns the code to the front end

Why, the front end can not get together and get openId operation code together to do, but also to request the background, let the background get openId?

(E) the background by code, AppSecret (No. platforms background made public) request micro-channel link for openId

image

image

image

Specific code follows the front end, it can be copied (remember the text in the window.APPID to APPID own public number)

<script>
import GetUrlParam from '@/assets/js/util/getUrlParam.js' export default { name: 'Index', data () { return { } }, created () { this.getCode() }, methods: { getCode () { // 非静默授权，第一次有弹框 const code = GetUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId const local = window.location.href if (code == null || code === '') { window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + window.APPID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect' } else { this.getOpenId(code) //把code传给后台获取用户信息 } }, getOpenId (code) { // 通过code获取 openId等用户信息，/api/user/wechat/login 为后台接口 let _this = this this.$http.post('/api/user/wechat/login', {code: code}).then((res) => { let datas = res.data if (datas.code === 0 ) { console.log('成功') } }).catch((error) => { console.log(error) }) } } } </script> 

(F) do other users of the data binding or query operation by openId

After the front and rear ends have acquired openId, users will be able to do data binding through openId and inquired.