Uniapp 接入微信H5登录，并获取openid和unionid

实现目标：通过微信H5接入微信获取openid和unionid、用户头像，以及实现登录。

实现目标，如图：

具体实现

MySQL代码：

CREATE TABLE `xn_user` (`id` int NOT NULL AUTO_INCREMENT,`tno` int DEFAULT NULL COMMENT '编号',`username` char(25) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '账号',`password` char(100) CHARACTER SET utf16 COLLATE utf16_general_ci DEFAULT NULL COMMENT '密码',`realname` char(25) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '姓名',`phone` char(20) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '电话',`city_id` int NOT NULL DEFAULT '0' COMMENT '省份ID',`area_id` int NOT NULL DEFAULT '0' COMMENT '市区ID',`street_id` int DEFAULT '0' COMMENT '县ID',`status` int DEFAULT '0',`create_time` int DEFAULT NULL,`update_time` int DEFAULT NULL,`school_id` int DEFAULT NULL COMMENT '学校ID',`last_login_ip` varchar(16) DEFAULT NULL,`last_login_time` int DEFAULT '0',`role_id` int DEFAULT NULL COMMENT '角色ID',`token` varchar(255) DEFAULT NULL COMMENT 'token',`ttl` int DEFAULT NULL COMMENT '过期时间',`openid` char(50) DEFAULT NULL,`unionid` char(50) DEFAULT NULL,`headimgurl` varchar(255) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=498 DEFAULT CHARSET=utf8mb3;

PHP代码：

public function index(){$data = Request::param();$username = trim($data['pn']);$password = trim($data['pwd']);$openid = $data['openid'];$unionid = $data['unionid'];$headimgurl = $data['headimgurl'];if(!$username){return show(0,'请输入登录的手机号码',[]);}if(!$password){return show(0,'请输入登录密码',[]);}$admin_data = Teacher::where(['phone' => $username,'password' => gt_encrypt($password),])->field('id,username,phone,realname,status,last_login_ip,last_login_time,city_id,area_id,street_id,school_id,role_id,openid,unionid,headimgurl')->find();if( empty($admin_data) ) {return show(0,'手机号或密码不正确');}if($admin_data['status']!=1) {return show(0,'您的账户处于禁用状态');}if($openid){//如果openid不存在，则可以绑定账号if(!$admin_data['openid']){$admin_data->openid = $openid;$admin_data->unionid = $unionid;$admin_data->headimgurl = $headimgurl;$admin_data->save();}}$token = Auth::getInstance(['uid'=>$admin_data['id']])->setToken()->getToken();$data = ['username'=>$admin_data['phone'],'realname'=>$admin_data['realname'],'uid'=>$admin_data['id'],'school_id'=>$admin_data['school_id'],'role_id'=>$admin_data['role_id'],'role_name'=>'角色简称','role_title'=>'角色名称','school_name'=>get_school_name($admin_data['school_id']),'token'=>$token,'openid'=>$admin_data['openid'],'headimgurl'=>$admin_data['headimgurl']?:Config::get('custom.http_url').'static/headimg.png'];return show(1,'登录成功',$data);}

Template代码

<form @submit="loginNow" class="grace-form" style="margin-top:80rpx;"><view class="grace-form-item grace-border-b"><text class="grace-form-label">手机号码</text><view class="grace-form-body"><input type="text" class="grace-form-input" name="pn" placeholder="请输入手机号" /></view></view><view class="grace-form-item grace-border-b"><text class="grace-form-label">登录密码</text><view class="grace-form-body"><input type="password" class="grace-form-input" name="pwd" placeholder="请输入登录密码" /></view></view><view class="grace-margin-top"><button form-type="submit" type="primary" class="grace-button grace-border-radius grace-gtbg-blue">登录<text class="grace-icons icon-arrow-right"></text></button></view></form>

Vue代码


<script>
import gracePage from '../../graceUI/components/gracePage.vue';
var graceChecker = require('../../graceUI/jsTools/graceChecker.js');
export default {data() {return {phoneno: '',headimgurl:'',openid:'',unionid:'',};},onLoad() {var localData = uni.getStorageSync('localData');if (localData) {this.$router.push({ path: '/pages/index/index' });}//开启之后只能是公众号访问this.loginWithWx();},methods: {loginWithWx: function() {if (!uni.getStorageSync('openid') || uni.getStorageSync('openid') == undefined ) {this.getWxUserInfoCode();}},loginNow: function(e) {// 表单验证var rule_sms = [{ name: 'pn', checkType: 'phoneno', errorMsg: '请填写正确的手机号' },];var rule_pwd = [{ name: 'pn', checkType: 'string', checkRule: '4,16', errorMsg: '请填写正确的手机号' }];var formData = e.detail.value;var checkRes = graceChecker.check(formData, rule_pwd);// 验证通过if (checkRes) {uni.showLoading({title: '正在登录....'});this.$sendRequest({url: 'login',data: {pn: formData.pn,pwd: formData.pwd,openid: this.openid,unionid: this.unionid,headimgurl: this.headimgurl,},method: 'POST',dataType: 'json', // 返回数据格式,header: {'Content-Type': 'application/x-www-form-urlencoded'},success: res => {uni.hideLoading();if (res.data.code == 1) {uni.showToast({title: res.data.msg,icon: 'none',duration: 2000,success: () => {uni.setStorageSync('localData', res.data.data);this.$router.push({ path: '/pages/index/index' });}});} else {uni.showToast({ title: res.data.msg, icon: 'none' });}}});} else {uni.hideLoading();uni.showToast({ title: graceChecker.error, icon: 'none' });}},//微信公众号登录getWxUserInfoCode() {var code = this.getUrlParam('code'); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openIdvar local = encodeURIComponent('https://你的h5地址/h5/#/pages/login/login');let appid = 'appid';if (code == null || code === '') {window.location.href ='https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+local+'&response_type=code&scope=snsapi_base&connect_redirect=1&state=#wechat_redirect';} else {this.getOpenId(code); //把code传给后台获取用户信息}},getOpenId(code) {var _this = this;_this.$sendRequest({url: 'wechat/get_open_id',data: {code: code},method: 'get',dataType: 'json', // 返回数据格式,header: {'Content-Type': 'application/x-www-form-urlencoded'},success: res => {// console.log(res.data);if (res.data.code == 1) {uni.setStorageSync('openid', res.data.data.openid);uni.setStorageSync('unionid', res.data.data.unionid);uni.setStorageSync('headimgurl', res.data.data.headimgurl);_this.openid = res.data.data.openid,_this.unionid = res.data.data.unionid,_this.headimgurl = res.data.data.headimgurl}}});},// 解析URL 参数getUrlParam(name) {let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');let r = window.location.search.substr(1).match(reg);if (r != null) {return unescape(r[2]);}return null;}},components: {gracePage}
};
</script>

wechat/get_open_id

<?php
namespace app\api\controller;use app\common\controller\Base;
use EasyWeChat\Factory;
use think\App;
use think\facade\Config;
use think\facade\Request;class Wechat extends Base
{public function __construct(App $app){parent::__construct($app);$this->conf = \think\facade\Config::load("cfg/base", 'base');}//微信相关public function get_open_id(){$code = Request::param('code');if($code){$access_token_info = self::get_access_token($code);$user_info = self::get_user_info($access_token_info['access_token'],$access_token_info['openid']);return show(1,'success',$user_info);}else{return show(0,'Code is null');}}//通过 code 换取网页授权access_tokenpublic function get_access_token($code){$url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid='.$this->conf['appid'].'&secret='.$this->conf['appsecrect'].'&code='.$code.'&grant_type=authorization_code';$curlRes = postDataCurl($url,[]);return json_decode($curlRes,true);}public function get_user_info($access_token,$openid){$url = 'https://api.weixin.qq.com/sns/userinfo?access_token='.$access_token.'&openid='.$openid.'&lang=zh_CN';$curlRes = postDataCurl($url,[]);return json_decode($curlRes,true);}}

以上代码，uniapp 我使用的是GraceUI，PHP引用了EasyWeChat SDK

如果提示：api unauthorized 48001错误，那就需要把 scope=snsapi_base 改为 scope=snsapi_userinfo

Uniapp 接入微信H5登录，并获取openid和unionid 含Sql、PHP完整代码相关推荐

微信H5公众号获取openid爬坑记
前要: 之前做过的公众号授权一般是在登录时的,最近遇到一个直接微信打开企业微信发过来的链接进去预约页面,需要进来时查询当前微信的用户有没有预约过对应的申请,如果有就跳转到index的列表页,没有的话留 ...
uniapp - 编译微信小程序项目的微信授权登录、获取微信手机号登录、最新版微信直接登录、手机与验证码登录的示例源码（适用于 uniapp 微信小程序项目，源代码直接开箱即用）超级详细的代码及注释
效果图 uniapp 项目编译微信小程序,一些常见的登录方式及源代码,示例代码干净整洁无BUG拿来即用. 本文示例实现了 uniapp 微信小程序项目的登录功能,包含微信授权登录.获取微信手机号登录. ...
C# 给自己的网址接入微信扫描登录入口
C# 给自己的网址接入微信扫描登录入口,根据官网整理出来欢迎交流 /// <summary> /// 微信登录接入 OAuthSnsApiUserInfo ...
php小程序登录时解密getUserInfo获取openId和unionId等敏感信息
在获取之前先了解一下openId和unionId openId : 用户在当前小程序的唯一标识 unionId : 如果开发者拥有多个移动应用.网站应用.和公众帐号(包括小程序),可通过unionid ...
uni-app 接入银联H5支付（Java）思路代码
uni-app 接入银联H5支付(Java)思路代码 uni-app-web-view Java(后台部分代码)可以参考官方的Demo取代码银联文档地址: H5支付. 第一次接触银联支付的话建议跑 ...
uniapp实现微信H5扫码
在uni-app官网上发现uni-app不支持H5扫码功能,但是下面的提示说明可以通过微信的JS-SDK实现扫码功能,下面这篇文章主要给大家介绍了关于uniapp实现微信H5扫码功能的完整步骤,需要的 ...
微信无法连接支付服务器,App接入微信H5支付常见错误及原因
在App上接入微信H5支付一般都会遇到一些错误.本文讨论了这些错误的解决方案和背后的原因,希望能让读者能少踩些坑. 错误可以分为两类:一是H5支付域名设置错误,二是URL Scheme跳转App错误. ...
【无标题】微信开发者工具无法获取OpenId
微信开发者工具无法获取OpenId 在使用微信开发者工具的云开发功能时,点击"获取OpenId"按钮后,提示"体验前需部署云资源",下面有一个灰色的提示&quo ...
H5（uniapp）联合tp6 开发微信公众号（获取openid）
1. 公众号申请好后,配置公众号基本信息,主要是appid,AppSecret, 还有ip白名单 2. 配置授权域名,不然调用接口获取openid会提示redirect_uri域名与配置不一致 1) ...

Uniapp 接入微信H5登录，并获取openid和unionid 含Sql、PHP完整代码

Uniapp 接入微信H5登录，并获取openid和unionid

具体实现

以上代码，uniapp 我使用的是GraceUI，PHP引用了EasyWeChat SDK

Uniapp 接入微信H5登录，并获取openid和unionid 含Sql、PHP完整代码相关推荐

最新文章

热门文章