微信h5授权获取用户openId的方法和步骤，用于用户登录和注册 |
您所在的位置：网站首页 › 注册公众号的步骤 › 微信h5授权获取用户openId的方法和步骤，用于用户登录和注册 |
微信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_redirect4 此时步骤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 是你的站点域名，一定要encodeURIComponent let 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, } |
【本文地址】