`

js微信登录*微信web登录*微信登录

    博客分类:
  • Wx
 
阅读更多
OAuth2.0 方式


1.授权回调域名配置规范为全域名并且不带http,比如需要网页授权的域名为:www.qq.com,配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com无法进行OAuth2.0鉴权。



2. 用户授权并获取code

在域名根目录下,新建一个文件,命名为oauth2.php,其内容为


if (isset($_GET['code'])){
    echo $_GET['code'];
}else{
    echo "NO CODE";
}


复制代码
先了解下请求授权页面的构造方式:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

参数说明

参数 必须 说明
appid 是 公众号的唯一标识
redirect_uri 是 授权后重定向的回调链接地址
response_type 是 返回类型,请填写code
scope 是 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息)
state 否 重定向后会带上state参数,开发者可以填写任意参数值
#wechat_redirect 否 直接在微信打开链接,可以不填此参数。做页面302重定向时候,必须带此参数
应用授权作用域:由于snsapi_base只能获取到openid,意义不大,所以我们使用snsapi_userinfo。
回调地址:填写为刚才上传后的oauth2.php的文件地址,
state参数:随便一个数字,这里填1

构造请求url如下:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8888888888888888&redirect_uri=http://url/oauth2.php&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect
把这个链接发送到微信中,以便在微信浏览器中打开。







使用code换取access_token

换取网页授权access_token页面的构造方式:

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
参数说明

参数 是否必须 说明
appid 是 公众号的唯一标识
secret 是 公众号的appsecret
code 是 填写第一步获取的code参数
grant_type 是 填写为authorization_code
code:在这里填写为上一步获得的值

构造请求url如下:

https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx8888888888888888&secret=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&code=00b788e3b42043c8459a57a8d8ab5d9f&grant_type=authorization_code
可以在浏览器中直接执行这条语句:

得到如下json数据:

复制代码
{
    "access_token": "OezXcEiiBSKSxW0eoylIeAsR0GmYd1awCffdHgb4fhS_KKf2CotGj2cBNUKQQvj-G0ZWEE5-uBjBz941EOPqDQy5sS_GCs2z40dnvU99Y5AI1bw2uqN--2jXoBLIM5d6L9RImvm8Vg8cBAiLpWA8Vw",
    "expires_in": 7200,
    "refresh_token": "OezXcEiiBSKSxW0eoylIeAsR0GmYd1awCffdHgb4fhS_KKf2CotGj2cBNUKQQvj-G0ZWEE5-uBjBz941EOPqDQy5sS_GCs2z40dnvU99Y5CZPAwZksiuz_6x_TfkLoXLU7kdKM2232WDXB3Msuzq1A",
    "openid": "oLVPpjqs9BhvzwPj5A-vTYAX3GLc",
    "scope": "snsapi_userinfo,"
}
复制代码
数据格式解读如下:

参数 描述
access_token 网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同
expires_in access_token接口调用凭证超时时间,单位(秒)
refresh_token 用户刷新access_token
openid 用户唯一标识,请注意,在未关注公众号时,用户访问公众号的网页,也会产生一个用户和公众号唯一的OpenID
scope 用户授权的作用域,使用逗号(,)分隔
于是,我们成功的通过code换取到了access_token,以及refresh_token。

复制代码
刷新access_token
官方文档中提到了刷新access_token的功能,但这不是必须要做的,初次使用可以先忽略。


url请求方法如下:
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
参数说明
参数 是否必须 说明
appid 是 公众号的唯一标识
grant_type 是 填写为refresh_token
refresh_token 是 填写通过access_token获取到的refresh_token参数
构造如下:
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=wx8888888888888888&grant_type=refresh_token&refresh_token=OezXcEiiBSKSxW0eoylIeAsR0GmYd1awCffdHgb4fhS_KKf2CotGj2cBNUKQQvj-G0ZWEE5-uBjBz941EOPqDQy5sS_GCs2z40dnvU99Y5CZPAwZksiuz_6x_TfkLoXLU7kdKM2232WDXB3Msuzq1A
在浏览器中执行得到前面同样格式的json数据
复制代码
方倍:感觉refresh token是个没有意义的东西,使用code能获得且必须这样获得access token和openid,继而获得用户基本信息,那根本就没有刷新access token的必要。个人意见,仅供参考。。。





4. 使用access_token获取用户信息

请求方法:

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
参数说明

参数 描述
access_token 网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同
openid 用户的唯一标识
构造url如下:

https://api.weixin.qq.com/sns/userinfo?access_token=OezXcEiiBSKSxW0eoylIeAsR0GmYd1awCffdHgb4fhS_KKf2CotGj2cBNUKQQvj-G0ZWEE5-uBjBz941EOPqDQy5sS_GCs2z40dnvU99Y5AI1bw2uqN--2jXoBLIM5d6L9RImvm8Vg8cBAiLpWA8Vw&openid=oLVPpjqs9BhvzwPj5A-vTYAX3GLc
可以在浏览器中直接执行这条语句:

得到json数据返回:

复制代码
{
    "openid": "oD2pjqsD9Bhv5zwPj5A-3334c",
    "nickname": "宝",
    "sex": 1,
    "language": "简体中文",
    "city": "东莞",
    "province": "广东",
    "country": "中国",
    "headimgurl": "http://wx.qlogo.cn/mmopen/utpre22/0",
    "privilege": []
}
复制代码
参数解读:

参数 描述
openid 用户的唯一标识
nickname 用户昵称
sex 用户的性别,值为1时是男性,值为2时是女性,值为0时是未知
province 用户个人资料填写的省份
city 普通用户个人资料填写的城市
country 国家,如中国为CN
headimgurl 用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空
privilege 用户特权信息,json 数组,如微信沃卡用户为(chinaunicom)




分享到:
评论

相关推荐

    chapter-03.zip_web项目_微信_微信web_微信开发 java_微信项目

    3. **微信Web开发**:微信提供了针对Web开发者的一系列API和服务,允许开发者在网页中集成微信的功能,如微信登录、支付、分享、消息推送等。这通常涉及到微信开发者平台的注册、获取AppID和AppSecret,以及配置JS...

    springboot+微信端登录demo

    6. **登录逻辑**: 在用户完成微信授权后,你需要在后端将微信返回的openid与你的用户系统进行匹配。如果找到对应的用户,就自动登录;如果没有,可能需要引导用户完成注册流程。 7. **回调地址和重定向**: 微信...

    使用 UniApp 实现小程序的微信登录功能

    UniApp是一个使用Vue.js开发所有前端应用的框架,可以编译到iOS、Android、Web(包括微信小程序)以及各种小程序等多个平台。 首先,我们需要理解在使用UniApp开发微信小程序的微信登录过程中会涉及到的技术点,...

    模拟微信登录应用.zip

    通过学习这个模拟微信登录应用的代码,开发者可以掌握Web应用的基本架构,理解前后端交互的原理,以及提高对用户界面设计和用户体验的敏感度。对于想要深入学习Web开发的人来说,这是一个很好的实践项目。

    HTML5手机调用微信分享

    * 9、关闭公众平台Web页面 * 10、判断当前网页是否在微信内置浏览器中打开 * 11、增加打开扫描二维码 * 12、支持WeixinApi的错误监控 * 13、检测应用程序是否已经安装(需要官方开通权限) * 14、发送电子邮件...

    threejs微信小程序应用.zip

    在当前的数字化时代,Web开发领域正逐渐向三维可视化转变,Three.js作为一款强大的JavaScript库,使得在浏览器中创建3D图形变得简单易行。在这个“threejs微信小程序应用.zip”压缩包中,我们看到Three.js技术被巧妙...

    支持微信扫码登录的用户登录页面html模板.rar

    在实际开发中,前端开发者需要具备HTML、CSS和JavaScript等基础技能,了解微信开放平台的API文档,以便正确集成扫码登录功能。后端开发者则需要熟悉服务器端语言(如PHP、Java、Python等),能够处理与微信服务器的...

    用vue.js开发微信app

    结合微信小程序或微信Web应用,Vue.js 可以帮助我们构建流畅、交互丰富的用户体验。下面将详细介绍如何使用 Vue.js 开发微信应用程序。 1. **Vue.js 基础** 在开始之前,确保对 Vue.js 的基础知识有充分了解。这...

    vue项目中实现的微信分享功能示例

    本文实例讲述了vue项目中实现的微信分享功能。分享给大家供大家参考,具体如下: /* 微信分享 */ Vue.prototype.wechatShare = (shareData) => { let resource = { title: '随我心愿!', desc: '体验优质服务', ...

    spritejs微信小程序版

    像原生的JavaScript一样,SpriteJS微信小程序版也提供了事件机制。开发者可以为精灵对象绑定各种事件监听器,如点击、触摸滑动等,从而实现与用户的交互。这使得构建具有动态反馈的图形界面变得简单,极大地增强了...

    仿QQ微信登录页面_登录注册.zip

    6. **登录状态管理**:登录成功后,应用需要维护用户的登录状态,这可能涉及到Cookie、Session或现代的JWT(JSON Web Tokens)技术。 7. **动画效果**:为了提升用户体验,登录页面可能包含交互式的动画效果,如...

    js模仿微信语音播放的动画效果

    在JavaScript编程中,模仿微信语音播放的动画效果是一项有趣且实用的技术挑战。微信语音播放时,用户会看到一个小喇叭图标,随着声音的播放,图标会有动态的变化,这种效果增加了用户体验的交互性和趣味性。以下是对...

    Angular6SPA集成企业微信Demo

    企业微信则是一个为企业提供内部沟通和协同服务的平台,集成企业微信可以让SPA具备更多的功能,例如登录认证、消息推送等。 **1. Angular 6 概述** Angular 6 是Google维护的TypeScript框架,用于构建动态、高性能...

    Net微信系统源码(商城与管理微信)

    随着单页应用(SPA)的流行,Vue.js或React.js等前端库也可能被采用。 7. **视频教程**:文件列表中的"源码+视频.pdf"可能包含了系统的详细讲解,包括代码实现、功能介绍和使用方法,对于学习和理解该系统非常有...

    tp微信自定义分享功能demo

    要实现微信内的自定义分享,需要使用JS-SDK(JavaScript SDK)。首先,你需要调用微信的API获取JS-SDK的配置信息,包括nonceStr(随机字符串)、timestamp(时间戳)、signature(签名)。这些信息用于在前端页面...

    web 微信二维码支付

    Web微信二维码支付是一种在线支付方式,它允许用户通过微信应用程序扫描网页上显示的二维码来完成支付过程。这种支付方式在电子商务、在线服务和各种线下场景中广泛应用,为商家提供了便捷的收款解决方案,同时也...

    js微信分享API

    * 微信内置浏览器的Javascript API,功能包括: * * 1、分享到微信朋友圈 * 2、分享给微信好友 * 3、分享到腾讯微博 * 4、隐藏/显示右上角的菜单入口 * 5、隐藏/显示底部浏览器工具栏 * 6、获取当前的网络...

    html5 web微信聊天窗口界面模板

    总之,HTML5 Web微信聊天窗口界面模板是利用现代Web技术实现的一个高度交互和个性化的网页应用示例,它展示了HTML5、CSS3和JavaScript的综合运用能力,同时也对开发者提出了在兼容性、性能、用户体验和安全性等方面...

    企业微信点餐系统

    - 引入必要的依赖库,如Spring Boot Starter Web、MyBatis等。 2. **前端设计** - 设计简洁美观的UI界面,确保良好的用户体验。 - 利用Thymeleaf或Vue.js等前端技术实现动态页面展示。 3. **后端逻辑开发** - ...

    微信开发bootstrap手机网页案例-元宵灯谜

    - **JSSDK(JavaScript SDK)**:微信提供的JS库,可以让网页与微信客户端进行交互,如分享、授权登录等。在这个案例中,可能集成微信分享功能,让用户方便地将灯谜活动分享到朋友圈。 - **微信支付**:如果活动...

Global site tag (gtag.js) - Google Analytics