微信h5授权获取用户openId的方法和步骤，用于用户登录和注册

微信公众号的配置和专业名词就不介绍了，不懂的问度娘，我就直接上代码点击下载完整demo

先说一下我的demo放的位置：

微信H5授权登录分两种：

① 静默授权：snsapi_base，没有弹窗，只能获取用户的openId。

②非静默授权：snsapi_userinfo，有弹框弹出需要用户手动点击确认授权。可以获取openId，用户的头像、昵称等

下面是微信官方给的流程，大家大概了解一下就行。

1 第一步：用户同意授权，获取code

2 第二步：通过code换取网页授权access_token

3 第三步：刷新access_token（如果需要）

4 第四步：拉取用户信息(需scope为 snsapi_userinfo)

5 附：检验授权凭证（access_token）是否有效

下面是我的流程

1 在微信里打开一个页面判断是否登录（一般都是本地缓存保存token，比如setStorageSync）

2 如果没有登录，则需要通过当前url去获取code，但是此时肯定是获取不到的。

3 通过微信open.weixin.qq.com/connect/oauth2/authorize 转换一下就可以获取到，然后通过redirect_uri再跳回到步骤2中的url，

https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的appid&redirect_uri=' + encodeURIComponent('') + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect

4 此时步骤2中的url一定是有code的（不要为为什么，腾讯就是通过这种机制给你code让你获取的）

5 把获取到的code传给后端，经过后端和腾讯接口的对接，就成功获取到openid等用户信息，对接到你们自己的登录注册系统，然后返回登录token保存到本地。

上面是大致流程，下面我简单说一下代码：

在onload方法里调用

onLoad(){this.token = uni.getStorageSync('token');//判断是否登录if(!unils.stringIsEmpty(this.token)){console.log('已登录');} else {unils.isLoginAndwxLoginH5Login('/pages/clue/clue');}},

封装代码：


//有三个地方需要修改
//getWxCode 方法有两个地方 1 你的appid  2 你的前端地址
//getTokenByCode 方法里的 一个地方  你的接口地址//判断字符串是否为空
const stringIsEmpty = function (obj){if(typeof obj == "undefined" || obj == null || obj == ""){return true;}else{return false;}
}const costomShowToast = function (title,duration=2000){uni.showToast({title:title,duration:duration,icon:'none',})
}/*** 判断是否是在微信打开*/
const isWechat = function() {return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
}
/*** 获取url里的微信code值* @param {Object} name*/
const getUrlCode = function (name) {return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
}/*** 获取微信登录code* @param {Object} redirect_path*/
const getWxCode = function(redirect_path){ //console.log('33333');//console.log(redirect_path);if(this.isWechat()) {// console.log('getWxCode22');// 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openId  redirect_uri 是你的站点域名，一定要encodeURIComponentlet code = this.getUrlCode('code')if (this.stringIsEmpty(code)) {window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的appid&redirect_uri=' + encodeURIComponent('https://www.xxxxx.com/h5'+redirect_path) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'//redirect_uri地址里面不能多/，如果多一个/就会跳转不成功，所以redirect_path要注意是/pages/clue/cule// redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code，这里需要用encodeURIComponent对链接进行处理。// 如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会再地址栏中看到code了。// http://127.0.0.1/pages/views/profile/login/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1}} else {this.costomShowToast('请在微信客户端打开！');}
}/*** 根据code获取登录token* 原理：根据code获取微信openid，然后根据openid判断是否登录* @param {Object} code*/
const getTokenByCode = function(code){return new Promise(function(resolve, reject) {// console.log('getTokenByCode');// console.log(code);uni.request({url: 'https://www.xxxx.com/gettokenbycode',//一定要改成你的接口地址method:'GET',data:{'code':code,},success:(res)=>{// console.log(res.data);if(res.data.code != 1){resolve(false);} else {uni.setStorageSync('token', res.data.data.userinfo.token);resolve(true);// this.costomShowToast('登录成功！');}},fail:(res)=>{resolve(false);}})}).catch((e) => {console.log(e)});
}/*** 根据code获取登录，如果成功就跳转到对应的toUrl* @param {Object} code 微信code* @param {Object} toUrl 要跳转的地址*/
const getTokenByCodeToUrl = function(code,toUrl){var p = this.getTokenByCode(code);p.then(function(loginResult){//console.log("==============getTokenByCodeToUrl============"+toUrl);if(loginResult){uni.switchTab({//如果是pages.json中pages的第一个地址，则用navigateTo方法不好用，需要用switchTab方法url:toUrl,//跳转的时候toUrl必须写成/pages/clue/clue前面一定要有/})window.location.reload();} else {console.log("getTokenByCodeToUrl登录失败！");this.costomShowToast('登录失败！');}});}/*** 对外方法，对外调用就这个就可以，判断微信H5登录并跳转到相应的地址toUrl* @param {Object} toUrl  要跳转的地址*/
const isLoginAndwxLoginH5Login = function (toUrl){//获取微信code码let code = this.getUrlCode('code');//console.log('isLoginAndwxLoginH5Login');//console.log(code);if(!this.stringIsEmpty(code)) {//console.log('3333333333333333isLoginAndwxLoginH5Login');this.getTokenByCodeToUrl(code,toUrl);//跳转路径前面一定要加"/"} else {this.getWxCode(toUrl);}
}module.exports = {stringIsEmpty,isLoginAndwxLoginH5Login,
}

微信h5授权获取用户openId的方法和步骤，用于用户登录和注册相关推荐

微信h5静默、非静默授权获取用户openId的方法和步骤
微信h5静默.非静默授权获取用户openId的方法和步骤: 一.openId是什么? openId是用户在当前公众号下的唯一标识('身份证'),就是说通过这个openId,就能区分在这个公众号下具体是 ...
公众号h5获取手机号权限_微信公众号h5获取用户openId的方法和步骤
微信h5静大享上.是发了概开程态间些告人屏果会区.默.非静默授权获取用户openId的方法和步骤微和二第说,班.都年很过过事发工开宗定据发指互数个遍前互就: 一.openId是什么? openId享. ...
微信公众号h5获取用户openId的方法和步骤
微信h5静默.非静默授权获取用户openId的方法和步骤: 一.openId是什么? openId是用户在当前公众号下的唯一标识('身份证'),就是说通过这个openId,就能区分在这个公众号下具体是 ...
php 40163,微信支付授权获取 openId {errcode:40163,errmsg:code been used, hints: [ req_id: scqL1a02482017...
微信支付授权获取用户openId时候,返回40163,原因: 微信支付获取用户openid时,报出错误.原因是同时配置了http和https,微信网页oauth认证通知了两次删除apache配置文件 ...
微信H5授权用户和公众号关注用户区别
微信H5授权用户和公众号关注用户区别概念H5页面访问用户是通过微信jscode获取token授权普通访问用户公众号关注用户是关注了微信的公众号后的用户概念上一个是普通访问用户(包括了但不限于关注 ...
Spring Boot 微信-网页授权获取用户信息
微信-验证服务器有效性微信-网页授权获取用户信息网页授权获取用户信息步骤第一步:用户同意授权,获取code 第二步:通过code换取网页授权access_token 第三步:拉取用户信息(需sc ...
微信网页授权获取用户基本信息 --- 20/03/16
ThinkPHP5实现微信网页授权获取用户基本信息本次使用的appID与appSecret为公众号一:准备工作登录微信公众平台,左侧菜单下拉至开发选中基本配置启用开发者密码(AppSecret ...
微信OAuth授权获取用户OpenId-JAVA(个人经验)
个人微信小程序可扫码体验本文更新有可能先在开源中国.地址为:https://my.oschina.net/xshuai/blog/293458 https://open.weixin.qq.com ...
PHP开发之-微信网页授权获取用户基本信息
如何通过网页授权获取用户基本信息(国家,省,市,昵称)相关信息必要条件: 1)公众号认证 2)有网页授权获取用户基本信息的权限接口注意:最近有朋友说:在公众平台申请的测试号,会出现无法取到用户信息 ...

微信h5授权获取用户openId的方法和步骤，用于用户登录和注册

微信h5授权获取用户openId的方法和步骤，用于用户登录和注册相关推荐

最新文章

热门文章