精华内容
下载资源
问答
  • uniapp 公众号或h5登录

    2021-02-26 15:38:23
    uniapp 公众号或h5登录 // 微信公众号授权 import api from '../api/api.js' var wxAuthorize = function() { let link = window.location.href; let params = _getUrlParams(link); // 地址解析 // 已经授权...

    uniapp 公众号或h5登录 和支付功能

    // 微信公众号授权
    
    import api from '../api/api.js'
    
    var wxAuthorize = function() {
    	let link = window.location.href; 
    	let code = getQueryString("code");   //从有 code的地方开始截取
    	// 已经授权登录过的就不用再授权了
    	if (uni.getStorageSync('token')){
    		flushToken()
    		return;
    	}
        
    	// 如果拿到code,调用授权接口,没有拿到就跳转微信授权链接获取
    	if (code) {
    		apii(code); // 调用后台接口,授权
    	} else {
    		let appid = 'xxxxx';
    		let uri = encodeURIComponent(link);  // 登录后返回的地址
    		
    		let authURL =
    		`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123&connect_redirect=1#wechat_redirect`;
    		console.log('authURL',authURL)
    		window.location.href = authURL;
    	}
    }
    
    
     //截取微信返回的地址
    function getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = document.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]); return null;
     }
    // 截取code的方法 这个方法是错的  用这个方法会获取两次
    // var _getUrlParams = function(url) {
    // 	// 截取url中的code方法
    // 		//var url = location.search;
    // 		//this.winUrl = url;       
    // 	var theRequest = new Object();
    // 	if (url.indexOf('?') != -1) {
    // 		var str = url.substr(1);
    // 		var strs = str.split('&');
    // 		for (var i = 0; i < strs.length; i++) {
    // 			theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
    // 		}
    // 	}
    // 	return theRequest;
    // }
    //  根据code对接后台  
    var apii = function(code) {
    	api.httpRequest({ //自己封装的api方法
    		url: '/api/Wx/getOpenid',
    		method: 'POST'
    	}, {
    		code: code
    	}).then(res => {
    		if (res.data.code == 1) {
    			uni.setStorageSync('token', res.data.data.token);
    			console.log(uni.getStorageSync('token'));
    		} else {
    			this.$msg(res.data.msg, 1000);
    		}
    	});
    }
    
    // 刷新token
    var flushToken = function() {
    	api.httpRequest({
    			url: '/api/token/refresh'
    		}, {
    			token: uni.getStorageSync('token')
    		}).then(res => {
    			console.log(res);
    			uni.setStorageSync('token', res.data.data.token);  //保存新的token
    		}),
    		err => {
    			console.log(err);
    		};
    }
    
    
    export default wxAuthorize;
    
    之后在声明周期的 初始状态使用就可以啦
    
    **APP.vue 
    //的onlaunch中
    this.wxAuthorize();
    //这里我将wxAuthorize挂在vue的原型链上
    import wxAuthorize from './common/util.js'   //判断并获取code
    Vue.prototype.wxAuthorize=wxAuthorize**
    
    
    
    ```javascript
    //jws.js
    const wexinPay = (data, cb, errorCb) => {
     
    	let [appId, timestamp, nonceStr, signature, packages, paySign] = [data.appId, data.timeStamp, data.nonceStr, data.signature,
    		data.package, data.paySign
    	];
     
    	wx.config({
    		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    		appId, // 必填,公众号的唯一标识
    		timestamp, // 必填,生成签名的时间戳
    		nonceStr, // 必填,生成签名的随机串
    		signature, // 必填,签名,见附录1
    		jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    	});
     
    	wx.ready(function() {
    		wx.chooseWXPay({
    			timestamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
    			nonceStr, // 支付签名随机串,不长于 32 位
    			'package': packages, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***)
    			signType: 'MD5', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
    			paySign, // 支付签名
    			success(res) {
    				console.log("支付成共啦")
    				// 支付成功后的回调函数
    				cb(res);
    			},
    			fail(res) {
    				console.log("支付失败啦")
    				errorCb(res);				
    			}
    		});
    	});
     
    	wx.error(function(res) {
    		// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
    		/*alert("config信息验证失败");*/
    	});
    }
     
    export default wexinPay;
    
    import wexinPay from '../../../common/jws'
    调取后台的接口  将所用的返回值作为参数传入
    
    //调起支付
    wexinPay(res.data.data)
    

    *注意:公众号支付一定要先关注公众号(我踩的坑)

    展开全文
  • uniapp 内嵌h5登录页面实现登录

    千次阅读 2021-01-08 11:29:51
    需求:内嵌pc端登录页面,实现uniapp登录 前提:pc端登录页面,登录成功之后会自动重定向到指定的pc端页面并加上鉴权成功的code // 举例 // www.maomin.com/login PC端登录页面 // ...

    需求:内嵌pc端登录页面,实现uniapp登录

    前提:pc端登录页面,登录成功之后会自动重定向到指定的pc端页面并加上鉴权成功的code

    // 举例
    // www.maomin.com/login    PC端登录页面
    // www.maomin.com/loginSuccess?code=XXXX   // 登录成功以后自动跳转
    

    思路:
    1、在pc端处理,在uniapp成功登录之后跳转到www.maomin.com/loginSuccessApp?code=xxxx,此时pc端代码如下:

    document.addEventListener('UniAppJSBridgeReady', function () {
    	let arr = window.location.href.split('?');
        let loginParams = arr[1].split('=')
        let code = loginParams[1] || ''
        // 登录成功获取code并跳转到app页面
        uni.reLaunch({
          url: "/pages/loginSuccess?code=" + code    
        })
    })
    

    存在的问题:

    1)PC端需要引入uni.web-view.js

    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    

    2)PC端页面需要特殊处理

    3)后台需要根据是pc端还是app端登录重定向到不同的页面

    4)不便于调试,pc端代码修改需要重新部署

    2、在uniapp中直接处理(APP项目)

    具体思路:既然登录成功以后,会重定向到另一个页面,那么web-view的url发生了改变,可不可以通过监听web-view的url变化获取需要的code?

    查询文档发现uniapp关于APP端web-view中在url改变时没有特定的钩子函数

    web-view文档

    但是可以获取到当前web-view的url,那么是不是可以隔一段时间获取一次?

    具体代码如下:

    // 获取登录页面的方法,不需要管,返回是一个url   <web-view :src="url"></web-view>
    this.getLoginWeb();    
    
    if(!this.timeOut){
        //  启动定时器,每隔500ms获取一次
    	this.timeOut = setInterval(()=>{ 
    	    // 获取当前页面
    		var currentWebview = this.$scope.$getAppWebview(); 
    		
    		//  获取当前的web-view
    		var wv = currentWebview.children()[0]    
    		
    		//  获取Webview窗口加载HTML页面的地址
    		let url = wv.getURL();   
    		
    		// 这里是封装了一个方法,获取url后面的参数
    		let code = getUrlKey('code',url); 
    		
    		//  如果存在code,说明登录成功
    		if(code){         
    			clearInterval(this.timeOut);
    			this.timeOut = null;
    			console.log(code);
    		}
    	},500)
    }
    

    第二种方法以上问题均可解决,减少了APP登录与PC端强依赖关系

    App端web-view的扩展文档

    展开全文
  • 微信登录分为H5、PC和移动应用(IOS\安卓) 其中H5借助微信公众号实现,接口文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html PC和移动应用借助微信开放...

    微信登录分为H5、PC和移动应用(IOS\安卓)

    其中H5借助微信公众号实现,接口文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

    PC和移动应用借助微信开放平台实现,PC需要创建网站应用、移动应用需要创建移动应用。

    网站应用接口文档:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

    移动应用接口文档:https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_Login/Development_Guide.html

     

    本文章实现为H5登录,代码如下:

    /**
     * Created by PhpStorm.
     * User: Genghai_Y
     * Date: 2020/12/22
     * Time: 10:30
     * Desc:用于微信公众号OAuth2.0鉴权,用户授权后获取授权用户唯一标识openid
     * WxpubOAuth中的方法都是可选的,开发者也可根据实际情况自行开发相关功能,
     * 详细内容可参考http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html
     */
    class Model_WxpubOAuth 
    {
        /**
         * 获取微信公众号授权用户唯一标识
         * @param $app_id微信公众号应用唯一标识
         * @param $app_secret微信公众号应用密钥(注意保密)
         * @param $code授权code, 通过调用WxpubOAuth::createOauthUrlForCode来获取
         * @returnopenid微信公众号授权用户唯一标识, 可用于微信网页内支付
         */
        public static function getOpenid($app_id, $app_secret, $code)
        {
            $url = self::_createOauthUrlForOpenid($app_id, $app_secret, $code);
            $res = self::_getRequest($url);
            $data = json_decode($res, true);
    
            return $data['openid'];
        }
    
        /**
         * 用于获取授权code的URL地址,此地址用于用户身份鉴权,获取用户身份信息,同时重定向到$redirect_url
         * @param $app_id微信公众号应用唯一标识
         * @param $redirect_url授权后重定向的回调链接地址,重定向后此地址将带有授权code参数,
         *                      该地址的域名需在微信公众号平台上进行设置,
         *                      步骤为:登陆微信公众号平台 => 开发者中心 => 网页授权获取用户基本信息 => 修改
         * @param bool $more_info FALSE 不弹出授权页面,直接跳转,这个只能拿到用户openid
         *                        TRUE 弹出授权页面,这个可以通过 openid 拿到昵称、性别、所在地,
         * @return string 用于获取授权code的URL地址
         */
        public static function createOauthUrlForCode($appid,$redirect_url,$more_info = false)
        {
            $urlObj = array();
            $urlObj['appid'] = $appid;
            $urlObj['redirect_uri'] = $redirect_url;
            $urlObj['response_type'] = 'code';
            $urlObj['scope'] = $more_info ? 'snsapi_userinfo' : 'snsapi_base';
            $urlObj['state'] = 'STATE' . '#wechat_redirect';
            $queryStr = http_build_query($urlObj);
    
            return 'https://open.weixin.qq.com/connect/oauth2/authorize?' . $queryStr;
        }
    
        /**
         * 获取openid的URL地址
         * @param $app_id微信公众号应用唯一标识
         * @param $app_secret微信公众号应用密钥(注意保密)
         * @param $code授权code, 通过调用WxpubOAuth::createOauthUrlForCode来获取
         * @return string 获取openid的URL地址
         */
        private static function _createOauthUrlForOpenid($app_id, $app_secret, $code)
        {
            $urlObj = array();
            $urlObj['appid'] = $app_id;
            $urlObj['secret'] = $app_secret;
            $urlObj['code'] = $code;
            $urlObj['grant_type'] = 'authorization_code';
            $queryStr = http_build_query($urlObj);
    
            return 'https://api.weixin.qq.com/sns/oauth2/access_token?' . $queryStr;
        }
    
        /**
         * GET 请求
         */
        private static function _getRequest($url){
            $ch = curl_init();
            curl_setopt($ch, CURLOPT_TIMEOUT, 30);
            curl_setopt($ch, CURLOPT_URL, $url);
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,FALSE);
            curl_setopt($ch, CURLOPT_SSL_VERIFYHOST,FALSE);
            curl_setopt($ch, CURLOPT_HEADER, FALSE);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
            $res = curl_exec($ch);
            curl_close($ch);
    
            return $res;
        }
    
    }

     

    展开全文
  • 方式1: getUrlCode() { // 截取url中的code方法 var url = location.search var theRequest = new Object() if (url.indexOf("?") != -1) { var str = url.substr(1) var strs = str.split...

     方式1:

    getUrlCode() { // 截取url中的code方法
    				var url = location.search
    				var theRequest = new Object()
    				if (url.indexOf("?") != -1) {
    					var str = url.substr(1)
    					var strs = str.split("&");
    					for (var i = 0; i < strs.length; i++) {
    						theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
    					}
    				}
    				
    				return theRequest['code']
    				
    			},
    

     方式2:

    // 解析url参数并获取code
    function getUrlParam(name) {
    	//name为要获取的参数名
    	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    	var rrr = decodeURIComponent(window.location.search);
    	var r = rrr.substr(1).match(reg);
    	if (r != null) return unescape(r[2]);
    	return null;
    }

     

    展开全文
  • h5登录

    2021-05-20 10:11:21
    <script> var _this; export default { data() { return { phone: '', //用户/电话 password: '', //密码 code: '' //微信登陆的code }; }, onLoad(params) { ... ...
  • 需求是这样的:点击下图微信扫码,然后出现二维码,微信扫一扫跳转到h5页面,(如果微信没有绑定过就跳转绑定表单页面,填写表单成功后显示绑定成功,同时pc端登录成功,如果绑定过就跳转登录成功,同时pc端登录成功...
  • H5微信授权登录

    2021-04-09 11:42:46
    1.H5在微信浏览器加载时,打开如下微信的授权地址,我们需要将appid和当前的url地址传过去,微信以此会返回一个带code的url。 这一步也可以通过后端返回,前端需要把url传过去。 window.location.href=...
  • uniapp h5授权登录

    2021-05-20 10:13:01
    <script> export default { onLaunch: function() { console.log('App Launch') }, onShow: function(options) { // 1.... // uni.login() //舍弃一次code // 2.... uni.setStorageSync('parent_...
  • nginx反向代理服务:浏览器输入网址并回车后,会发起一个http请求给nginx(反向代理服务器),这个请求如果是访问静态文件,那么nginx作为web服务器直接返回请求的内容,如果是访问的后台服务逻辑,那么nginx把请求...
  • uniapp h5微信授权登录

    2021-10-28 17:44:14
    ——第三方登录——</view> <view class="IconItemBox"> <view class="IconItem" @click="weixinLogin"> <u-icon name="weixin-fill" size="45" color="#07C160"></u-icon&g
  • H5 微信授权登录功能实现

    千次阅读 2021-04-24 10:38:08
    最近几周面试复习以前知识库,刚好博客从国外迁移到国内CSND,同步坐下笔记,梳理之前开发H5 微信授权登录功能获取用户信息数据。 H5页面微信授权登录,使用微信官方JSSDK,微信网页授权较为复杂,需要前后端开发。...
  • H5网页微信授权登录

    千次阅读 2021-01-29 12:35:39
    最近项目做了一个简单的H5在线点酒,用的vue-cli脚手架搭建,运行在微信环境,涉及到微信授权登录,jssdk的使用,微信支付等功能,现记录下一些流程,以便后续自己查阅。微信开发文档传送门 一、微信H5网页授权登录...
  • h5页面授权和小程序授权的道理是一样的,主要是用户授权以后获取code传到后端 官方文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html 准备 授权域名配置 微信...
  • 对于前端来说,微信的 支付 、 分享 、 登录 是一定要掌握的,今天这篇文章,主要对这三方面的流程进行详细的介绍。主要内容如下: 域名相关知识介绍 该网站不安全,请不要输入密码 微信小程序授权登录流程 op=>...
  • = entity.getStatusCodeValue()) { return new ResponseResult(400, "微信授权登录失败"); } WebAccessTokenResult webAccessTokenResult = (WebAccessTokenResult) entity.getBody(); if (null != ...
  • 我们可以看到uni.login() 不支持H5,所以这里我们需要把APP 和 H5分开来 <template> <view class="login"> <button class="wechat" lang="zh_CN" @click="login">微信登录</button> <...
  • H5mui微信浏览器登录页 公司的H5手机的项目有时候需要做一些登录页 每次都要去找项目干脆直接发出来 页面基于Mui框架 头部的样式可能按照需要去更改就行了 一个背景图就OK的登录页 <!DOCTYPE html> <...
  • H5微信登录

    2021-04-27 02:06:25
    'api/onNotify', //通知地址 'trade_type' => 'MWEB', //交易类型 'scene_info' => '{"h5_info": {"type":"Wap","wap_url": "https://xieyi.gzyoufa.com","wap_name": "携逸订房"}}' ); //统一下单签名 $parameters...
  • H5 及 web 页面微信授权登录流程

    千次阅读 2021-04-21 09:45:38
    调整新的地址并携带 code 二、授权登录 1、微信登录的几种情况: PC端: PC端微信浏览器 -> 网页内嵌二维码方式(需要扫码,使用微信服务号的 appid 和 appsecret) PC端其他浏览器 -> 跳转微信的扫码登录页面(需要...
  • 关于vue框架的h5项目微信授权登录

    千次阅读 2021-02-20 12:03:49
    讲下基于vue框架搭建的h5页面进行微信授权登录的主要步骤 一丶在我们项目中要确认一个用户是否登录的凭证是token,也许实际开发中可能用到其他身份认证如cookie,但是应该是大同小异的,首先当我们登录成功就应该存...
  • 简单介绍h5微信授权流程 1、入口页跳转到我们自己创建的空白授权页 2、在空白授权页判断url上是否包含code,没有code拼接微信授权链接,通过location.href进行跳转 location.href = ...
  • H5登录页 2.构建一个空白页面放我们的重定向链接 比如wechatLogin.vue 点击企微授权登录跳转到这个空白页 - 3.跳转成功后,我们当前这个url地址里面会有一个code码 我们需要通过正则或者js方法去拿到这个code,很多...
  • 微信h5页面是我们平时接触的比较多的项目需求,app分享单页面到微信好友还是广告单页是我们平时接触的比较多的,微信打开h5页面就涉及到微信登录和二次分享,当我们在微信里打开h5页面都会有自动登录,在这里就有一...
  • JSON Web Tokens随着技术的发展,分布式web应用的普及,通过session管理用户登录状态成本越来越高,因此慢慢发展成为token的方式做登录身份校验,然后通过token去取redis中的缓存的用户信息,随着之后jwt的出现,...
  • 介绍结合`vue`框架作手机H5页面的登录注册组件登录注册相关知识点1.cookie和token的作用(个人理解,如果不到位,恳请指出)token:我的电脑通过http请求登录某一个网页,登录成功之后,服务器会返回一个token给我的...
  • res) if(res.data.code === 200) { // 登录成功,可以将用户信息和token保存到缓存中 uni.setStorageSync('userInfo', res.data.result.userInfo) uni.setStorageSync('token', res.data.result.token) } } }) 4....
  • text-align: center; background-repeat: ...bg.jpg 【相关推荐】 以上就是H5制作一个注册页面的代码实例的详细内容,更多请关注php中文网其它相关文章! 本文原创发布php中文网,转载请注明出处,感谢您的尊重!
  • 微信h5公众号授权登录获取用户信息

    千次阅读 2021-03-11 17:30:50
    一、前期准备 ... 1、认证的服务号(目前每年300元) 2、域名 二、配置公众号相关信息 ...1、微信公众平台配置网页授权域名(域名不支持IP、端口号) ...2、设置微信公众号AppSecret(记录下来,后期获取ACCESS_...
  •   公司内部某部门需要做一个在线评分的企业内部H5微应用(免登录),于是项目经理就交给我接手这个项目,简单的说了一下业务需求,经理交代我:页面做的好看点。作为一个后端开放人员,这次从UI页面到数据库设计到...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,611
精华内容 12,644
关键字:

h5登录

友情链接: dc_motor_sim.zip