uniapp开发公众号微信授权登录(uniapp可以开发微信公众号吗)
今天给各位分享uniapp开发公众号微信授权登录的知识,其中也会对uniapp可以开发微信公众号吗进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
- 1、uniapp的H5页面使用微信登录
- 2、uni-app app端微信登录
- 3、【uni-app】微信登录在微信小程序和APP中的区别
- 4、uni-app 微信小程序获取手机号并解密
- 5、uniApp实现企业公众号oauth2静默授权登录H5前端部分
uniapp的H5页面使用微信登录
此篇仅为个人的学习记录。参考地址:
我在uniapp的H5页面使用微信登录需要前后端配合,项目目录结构为:
后端接口(springboot项目):
这是我的测试号
uni-app app端微信登录
打开 manifest.json - App模块权限配置,勾选 OAuth(登录鉴权)。
打开 manifest.json - App SDK配置,查看到登录鉴权。在说明中有蓝色链接,其中包括向微信、QQ、微博等平台申请sdk的链接。
向微信、QQ、微博等平台申请到sdk的信息后,回填到manifest里。
这些配置需要打包生效,真机运行仍然是HBuilder基座的设置,可使用 自定义基座包 (opens new window) 。离线打包请参考离线打包文档在原生工程中配置。
配置并打包后,通过uni.getProvider可以得到配置的结果列表,注意这里返回的是manifest配置的,与手机端是否安装微信、QQ、微博无关。
// 微信登录
wechatLogin() {
let _this = this;
if(uni.getSystemInfoSync().platform == 'android' || uni.getSystemInfoSync().platform == 'ios') {
uni.getProvider({
service: 'oauth',
success: function (res) {
// console.log(111,res)
uni.login({
provider: 'weixin',
// onlyAuthorize: true,
success: function(loginRes) {
// console.log(loginRes)
// 获取用户信息
uni.getUserInfo({
provider: 'weixin',
success: function (infoRes) {
// console.log('用户昵称为:' + JSON.stringify(infoRes));
let obj = JSON.parse(JSON.stringify(infoRes))
let newObj = {
access_token: loginRes.authResult.access_token,
openId: obj.userInfo.openId,
nickName: obj.userInfo.nickName,
avatarUrl: obj.userInfo.avatarUrl,
unionId: obj.userInfo.unionId,
};
// console.log(newObj)
_this.getOpenidAndUserinfo(newObj)
},
fail:function(fail){
console.log(fail)
}
});
}
});
}
});
}
},
【uni-app】微信登录在微信小程序和APP中的区别
在uni-app中,使用微信登录用到的API如下:
注意点: unionid 只有在你绑定的微信开发平台之后,才会返回。这里就可能留下一个坑:如果是先开发微信小程序平台,积累了一批客户。再去申请开通微信开放平台,关联APP时。会造成APP的用户,和微信小程序之前的用户关联不上。因为这批客户是在开通微信开放平台账号之前注册进去的,只有 openid ,没有 unionid 。而基于微信的账号机制,是通过 unionid 确定两个平台的账号是否为同一个用户的。
解决方案:基本思路是让这批用户在使用APP之前,先用一下小程序,重新获取 unionid ,绑定上去。但是实现方式不能太直接,这样会影响用户的操作体验。
uni-app 微信小程序获取手机号并解密
1、 点击某个按钮,弹出请求微信授权界面。
2、点击允许按钮,获取用户微信绑定的手机号与openId
3、 请求后端接口,实现登录。
微信公众平台---登陆---开发---开发管理---开发设置 查看APPID、secret
在把上面获取的appid session_key encryptedData iv传入以下方法中,得到最后解密的信息
解密后的信息
uniApp实现企业公众号oauth2静默授权登录H5前端部分
appid,服务器域名(域名下的资源文件要能访问,跟后端沟通,先放个html文件进去,比如: 能访问到)
企业H5应用工作台 可信域名配置 找管理员扫码登录 还有 应用主页配置
// 存
function setCookie(key, value) {
var initDate = new Date();
initDate.setTime(initDate.getTime() + 30 * 60 * 1000);
document.cookie = key + "=" + value + ";expires=" + initDate.toGMTString() + ";path=/";
}
// 取
function getCookie(key) {
if (document.cookie.length 0) {
var i = document.cookie.indexOf(key + "=")
if (i != -1) {
i = i + key.length + 1
var end = document.cookie.indexOf(";", i)
if (end == -1) end = document.cookie.length
return unescape(document.cookie.substring(i, end))
}
}
return undefined
}
//删
function removeCookie(key) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var val = getCookie(key);
if (val != null) {
document.cookie = key + "=" + val + ";expires=" + exp.toGMTString();
}
}
export const Cookie = {
set: setCookie,
get: getCookie,
remove: removeCookie
}
import { Cookie } from "@/utils/cookie.js";
created() {
let local = 'http:xxxx.com/index.html'; // 这个是如果没有code需要配合微信重定向获取code的页面,也就是你后端放静态资源文件的路径,一定要可以访问到
if (!Cookie.get("weCode")) {
window.location.href =
"" +
'企业号的appid' +
"redirect_uri=" + encodeURIComponent(local) +
"response_type=codescope=snsapi_userinfowechat_redirect";
} else {
uni.reLaunch({
url: '/pages/index'
});
}
}
import { Cookie } from "@/utils/cookie.js"
onLaunch: function() {
this.getCode()
},
getCode() {
let weCode = this.getUrlParam("code"); //查看code是否存在
if (weCode) {
Cookie.set("weCode", weCode)
getUserInfo({ // 这个是请求接口把code 给后台,然后后台给你用户的一些信息 getUserInfo不要照抄 这是一个请求方法
code: weCode
}).then(res = {
if (res.data.code == 200) {
Cookie.set('userId', res.data.data)
}
})
}
},
//判断code信息是否存在
getUrlParam(name) {
var reg = new RegExp("(^|)" + name + "=([^]*)(|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
{
"pages": [
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "微信授权",
"navigationStyle": "custom",
"app-plus": {
"titleView": false,
"animationType": "none"
}
}
},{
"path": "pages/index",
"style": {
"navigationBarTitleText": "小测试首页",
"navigationStyle": "custom",
"app-plus": {
"titleView": false
}
}
}
],
"tabBar": {
"list": [{
"pagePath": "pages/index",
"iconPath": "static/tabIndexOff.png",
"selectedIconPath": "static/tabIndexOn.png",
"text": "首页"
}]
比如 你就写 baidu.com
比如: 端口 你就写 ms:xxx:7000
记得看微信官方文档!!!
贴出你需要看的链接:
uniapp开发公众号微信授权登录的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于uniapp可以开发微信公众号吗、uniapp开发公众号微信授权登录的信息别忘了在本站进行查找喔。
-
上一篇
丽江网站优化机构(丽江网站优化机构招聘) -
下一篇
seo营销咨询运营(seo策划)