公众号h5和pc端实现微信授权登录

2024-07-05 12:31:58

公众号h5登录

①.需要在微信公众平台配置好回调域名

②.点击微信登录执行的操作

 methods: {getWeChatCode() {try {const value = uni.getStorageSync('token');if (value) {return} else {let local = 'http://h5.wxlogin.cn'let REDIRECT_URI ="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx1ae7b95f25335755&redirect_uri=" +encodeURIComponent(local) +"&response_type=code&scope=snsapi_userinfo#wechat_redirect";window.location.href = REDIRECT_URI;}} catch (e) {}},}

注：图中local为回调地址(我这里是改成了假的)，需用encodeURIComponent()进行处理，且需在公众号配置的域名下（不用绝对一致），如果直接为域名的话回调地址打开会默认为pages.json文件第一个路由地址，当然如果有路由守卫则为自己设置的未登录页面

点击调取微信官方授权链接

③.允许授权返回到回调页面之后，页面路劲上会携带一个code，将code传给后端便可以获取微信用户信息实现微信登录

可以在微信开发者工具里面查看

截取地址上面code的方法

     onLoad() {this.getlist()},methods: {getUrlCode(name) {return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||[, ''])[1].replace(/\+/g, '%20')) || null},getlist(){let code = this.getUrlCode('code')},}

pc端微信扫码登录

pc端微信登录可以使用vue-wxlogin微信扫码登录插件

①.安装

npm install vue-wxlogin --save-dev

②.引入

import wxlogin from "vue-wxlogin";

③.使用

<wxlogin:appid="appid":scope="scope":redirect_uri="encodeURIComponent(redirect_uri)"href="data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsKCiBkaXNwbGF5OiBub25lOwoKfQoKLmltcG93ZXJCb3ggLnN0YXR1cy5zdGF0dXNfYnJvd3NlciB7CgogZGlzcGxheTogbm9uZTsKCn0KCi5pbXBvd2VyQm94IC5xcmNvZGUgewoKIGJvcmRlcjogbm9uZTsKCiB3aWR0aDogMjgwcHg7CgogaGVpZ2h0OiAyODBweDsKCn0KCi5pbXBvd2VyQm94IC5zdGF0dXN7CgogZGlzcGxheTogbm9uZQoKfQ=="
></wxlogin>

  data() {return {appid: "wxabe776bf79068f83",scope: "snsapi_login",redirect_uri: "http://www.wx.login.cn",}}

appid为微信开放平台appid，与上面微信公众号appid不一样，scope目前只能填写snsapi_login，redirect_uri与微信开放平台配置的回调域名一致，也需进行encodeURIComponent()处理

用户扫码允许授权之后也会在网页地址上附带一个code，用上面截取地址code方法同样可行，再把code传给后端获取用户信息实现扫码登录

另外附上微信官方文档开放平台

公众号h5和pc端实现微信授权登录相关推荐

Java开源项目—通用CRM管理系统（微信小程序+微信公众号+H5网页+PC管理后台）
前言 CRM(客户关系管理)管理系统是一种用于管理客户关系的软件系统,通过收集.组织和分析客户关系数据,帮助企业更好地了解客户,提高客户满意度,提升客户服务水平,建立长期客户关系,提升企业的销售和服务 ...
thinkphp开发的小程序、公众号H5、浏览器端H5、前端vue框架开发
需要程序代码的可以找我提供用户端包含:小程序.公众号H5.浏览器端H5 序号功能模块简介 1 商品商品分类支持两级分类,分类可添加分类图标,可设置排序和是否显示,支持分类搜索. 2 商品管理 ...
公众号h5获取手机号权限_微信公众号h5获取用户openId的方法和步骤
微信h5静大享上.是发了概开程态间些告人屏果会区.默.非静默授权获取用户openId的方法和步骤微和二第说,班.都年很过过事发工开宗定据发指互数个遍前互就: 一.openId是什么? openId享. ...
公众号h5获取手机号权限_微信公众号开发之网页授权（获取用户信息）
这次暑假留在学校参与工作室的项目,对微信公众号比较感兴趣,所以参与这方面的学习研究. 昨天完成了关于网页授权,获取用户信息方面的功能,所以乘热打铁,写上一篇.实现本篇涉及的功能,还需要完成一些基础. ...
慕课网_《微信授权登录》学习总结
时间:2017年08月12日星期六说明:本文部分内容均来自慕课网.@慕课网:http://www.imooc.com 教学源码:无学习源码:https://github.com/zccodere/ ...
微信测试号申请以及微信授权登录
一.申请微信测试号进入网址:微信测试号登录接下来微信登录,然后进入页面 ① 第一点就是接口配置信息,可以使用springmvc或servlet来进行验证,我这里使用springmvc来编写验证代码 ...
开源全平台版知识付费系统源码支持微信小程序+公众号+H5+PC端
分享一个开源全平台版知识付费系统源码,系统支持微信小程序+公众号+H5+PC端,一套系统实现全端数据及用户体系全面打通,轻松实现店铺全网一站式运营.含完整代码包和详细搭建教程. 系统支持视频课程.音频 ...
全平台知识付费系统源码支持微信小程序+公众号+H5+PC端含搭建部署教程
分享一个全平台知识付费系统源码,支持微信小程序+微信公众号+H5+PC端,支持DIY风格装修,含完整程序包和详细的搭建教程. 系统特色功能一览: 1.支持视频课程.音频课程.图文课程.专栏课程等: 2 ...
微信授权登录-微信公众号和PC端网站
一.微信公众号授权登录--微信公众平台微信授权登录,并调用后台接口,获取用户信息 1.网页授权回调域名首先要在公众平台官网中的"开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授 ...

最新文章

热门文章