当前位置:网站首页>Wechat H5 official account to get openid climbing account
Wechat H5 official account to get openid climbing account
2022-07-05 08:47:00 【Front thought】
Before : The authorization of official account that has been done before is usually at the time of login , Recently, I came across a direct wechat to open the link sent by the enterprise wechat to enter the appointment page , When you need to enter, check whether the current wechat user has made an appointment for the corresponding application , If so, jump to index List page for , If not, leave it on the current appointment page ! Therefore, wechat users need to access wechat's internal applet / The unique identification of the user generated by the official account openid To query whether there is a corresponding data list !
In fact, when I didn't pay attention to the official account , User access to official account page , It will also produce a unique user and official account. OpenID
preparation :
1、 Certified official account ( Enterprise number can , Personal number cannot be bound H5 Of ), And get the official account appid
2、https Authentication domain name , The callback address cannot be configured in wechat without authenticated domain name , And the relevant domain name authorized by the webpage is configured in the background of official account , If not redirect_uri The domain name is still inconsistent with the background configuration 10003
3、 Wechat public platform certification passed , And create app
4、 Logic diagram :
Implementation steps :
1、 Finally, the address that needs to be spliced :
https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_base&state=#wechat_redirect
2、 Enter wechat to get code, It can only be initiated in wechat client , There are two ways ,scope=snsapi_base( Can only get openid, And it is obtained silently , There is no pop-up window ),scope=snsapi_userinfo( There are pop ups , You can not only get openid, You can also get the basic information of users' wechat )
3、 obtain code Intercept the link after success ! Use code Exchange with the backend openid!
The final code :
// This is a layer of judgment that must be processed in order to be compatible with other business logic
onLoad(options) {
var isMobile = window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i); // Whether the mobile terminal
var isWx = /micromessenger/i.test(navigator.userAgent); // Wechat or not
var isComWx = /wxwork/i.test(navigator.userAgent); // Is it enterprise wechat
if (options.id) {
this.id = options.id;
this.getDetail(options.id)
} else if (!options.id && !options.type && isWx && isMobile) {
this.getCode()
}
}
getCode() {
let appid = "XXXXXXXX"; // Personal developers appid
let redirect = encodeURIComponent(`https://XXXXXXX.com/pindex.html#/visitor/appointment/appointment`);
let wx_code = this.getUrlParam("code"); // Intercept url Medium code
if (!wx_code) {
// The return address will be in redirect On the basis of carrying a splice code Redirected back
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
appid}&redirect_uri=${
redirect}&response_type=code&scope=snsapi_base&state=#wechat_redirect`;
} else {
this.getOpenId(wx_code); // hold code Send it to the background to get users openid
}
},
getUrlParam: function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
},
Pit summary :
1、 The first mistake you will make : The background domain name is not configured 、appid Wrong writing 、redirect If you make a mistake, you will not be redirected back 、 Every time I come in, it's wrong wx_code Judgment will continue to flash …
2、480001:api Function not authorized :scope=snsapi_base Time is silent , The authorization interface does not pop up , Only users can be obtained openid, here api Not authorized by user , So you have to pull user information , It will pop up 480001. If you want to pull user information, please use snsapi_userinfo, When the user enters the page, the authorization confirmation interface will pop up
3、 obtain openid The requested backend domain name is http Of , Android system can adjust the background interface , And you can get openid Come back ! But in Apple system
Will request timeout ! Compared with most days , All parameters are the same , Later, it was changed back to https The agreement will do !
边栏推荐
猜你喜欢
Guess riddles (4)
MATLAB skills (28) Fuzzy Comprehensive Evaluation
Classification of plastic surgery: short in long long long
微信H5公众号获取openid爬坑记
Hello everyone, welcome to my CSDN blog!
[牛客网刷题 Day4] JZ35 复杂链表的复制
Programming implementation of ROS learning 2 publisher node
容易混淆的基本概念 成员变量 局部变量 全局变量
Matlab tips (28) fuzzy comprehensive evaluation
Halcon clolor_ pieces. Hedv: classifier_ Color recognition
随机推荐
Apaas platform of TOP10 abroad
319. Bulb switch
【日常训练】1200. 最小绝对差
JS asynchronous error handling
asp.net(c#)的货币格式化
猜谜语啦(6)
Search data in geo database
How to manage the performance of R & D team?
Guess riddles (142)
Adaboost使用
[daiy4] copy of JZ35 complex linked list
ORACLE进阶(三)数据字典详解
C language data type replacement
每日一题——输入一个日期,输出它是该年的第几天
Halcon wood texture recognition
Pytorch entry record
Basic number theory - factors
Matlab tips (28) fuzzy comprehensive evaluation
微信H5公众号获取openid爬坑记
Arduino+a4988 control stepper motor