百摩网
当前位置: 首页 生活百科

微信html5授权登录界面(微信开放平台开发--网页微信扫码登录)

时间:2023-05-31 作者: 小编 阅读量: 2 栏目名: 生活百科

微信OAuth2.0授权登录目前支持authorization_code模式,适用于拥有server端的应用授权。假如用户同意授权,这里就获得了微信返回的code参数了。appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code参数说明参数是否必须appid是应用唯一标识,在微信开放平台

1、OAuth2.0

OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用。

允许用户提供一个令牌,而不是用户名和密码来访问他们存放在特定服务提供者的数据。每一个令牌授权一个特定的网站(例如,视频编辑网站)在特定的时段(例如,接下来的2小时内)内访问特定的资源(例如仅仅是某一相册中的视频)。这样,OAuth允许用户授权第三方网站访问他们存储在另外的服务提供者上的信息,而不需要分享他们的访问许可或他们数据的所有内容。

2、目标

3、前期准备(获取微信开发者权限)

我们这里主要讲的是网站(Web)应用,网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统(即上面的协议)。在微信客户端授权登录(获取用户信息)的可以查看:http://www.cnblogs.com/0201zcr/p/5131602.html

在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程。

3.1、注册开发者账号

可以在https://open.weixin.qq.com/这里申请开发的账号。由于是腾讯的网页,这里可以直接通过 QQ号进行登录。

3.2、提交网站应用审核

在已经登录的界面中选择“管理中心”——》网站应用——》创建网站应用

将会弹出下面的界面

填写过后,还有有一个页面需要填写,提交一份纸质版申请书扫描件(会提供模板,我们下载再来填写后,需盖章,签名),配置回调域名(扫码登录后会跳转的页面)等。

之后提交审核即可,等微信审核通过,我们即可获得我们需要的网页应用的appid和AppSecret,并配置后回调的域名了(这三样是我们开发所必须的)。

3.3、开发者资质认证

由于我们这里要使用微信登录的接口,所以我们还需要向微信提出认证,只有认证了才能使用微信那些高级的接口。未认证的如下图所示

认证之后是这样子的:

我现在暂时没有找到可以向公众账号那样子的测试账号的申请。如果有知道怎么可以申请到测试账号的高手,希望能赐教一下。

接下来,我们就可以开始我们的网页微信扫码登录开发了。

4、授权流程说明

微信OAuth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站,在微信用户授权登录已接入微信OAuth2.0的第三方应用后,第三方可以获取到用户的接口调用凭证(access_token),通过access_token可以进行微信开放平台授权关系接口调用,从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。

微信OAuth2.0授权登录目前支持authorization_code模式,适用于拥有server端的应用授权。该模式整体流程为:

1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数;2. 通过code参数加上AppID和AppSecret等,通过API换取access_token;3. 通过access_token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。

获取access_token时序图:

5、获取网页的二维码

当我们通过微信的认证,获取到了appid和AppSecret,并配置了回调的域名。我们就已经可以获取属于我们网页的二维码了,获取的方式很简单,只需打开一个微信的链接,加上我们的appid和回调域名即可在网页上面打开二维码,用户用微信客户端扫码并授权登录之后即会跳转到我们配置的回调域名下。

注意:

1、这里填写的是域名(是一个字符串),而不是URL,因此请勿加http://等协议头;2、授权回调域名配置规范为全域名,比如需要网页授权的域名为: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鉴权

5.1、请求url说明

第三方使用网站应用授权登录前请注意已获取相应网页授权作用域(scope=snsapi_login),则可以通过在PC端打开以下链接:

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

参数说明

参数是否必须
appid应用唯一标识(前面认证网页应用中获得)
redirect_uri重定向地址,需要进行UrlEncode(前面认证网页应用中获得)
response_type填code
scope应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi_login即可
state用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验

返回说明

用户允许授权后,将会重定向到redirect_uri的网址上,并且带上code和state参数

redirect_uri?code=CODE&state=STATE

若用户禁止授权,则重定向后不会带上code参数,仅会带上state参数

5.2、事例:

一号店的微信二维码链接如下:

https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https://passport.yhd.com/wechat/callback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect

将其复制到浏览器中打开即可获得一号店的二维码,二维码页面如下:

通过使用微信客户端的扫一扫功能,扫描该二维码,即会跳转到上面填写redirect_uri所在的地址上。假如用户同意授权,这里就获得了微信返回的code参数了。

6、获取用户信息

假如前面已经获得code。我们可以通过code参数去获取用户openid和access_token,进而获得用户的信息。

6.1、通过code参数获取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

正确的返回:

{ "access_token":"ACCESS_TOKEN", "expires_in":7200, "refresh_token":"REFRESH_TOKEN","openid":"OPENID", "scope":"SCOPE","unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"}

参数
access_token接口调用凭证
expires_inaccess_token接口调用凭证超时时间,单位(秒)
refresh_token用户刷新access_token
openid授权用户唯一标识
scope用户授权的作用域,使用逗号(,)分隔
unionid当且仅当该网站应用已获得该用户的userinfo授权时,才会出现该字段。

错误返回样例:

{"errcode":40029,"errmsg":"invalid code"}

注意:

  • code参数的超时时间是5分钟,且每次请求的code参数的值都不一样。
  • access_token的超时时间是32分钟。

6.2、通过access_token获取用户的基本信息

获取的前提条件

  • access_token有效且为超时;
  • 微信用户已授权给第三方应用账号相应接口作用域(scope)【在二维码生成连接那里填写】

对于接口作用域(scope),能调用的接口有以下:

授权作用域(scope)接口
snsapi_base/sns/oauth2/access_token通过code换取access_token、refresh_token和已授权scope
/sns/oauth2/refresh_token刷新或续期access_token使用
/sns/auth检查access_token有效性
snsapi_userinfo/sns/userinfo获取用户个人信息

使用snsapi_base作用域的授权是扫码之后无需用户点击授权,扫码后直接跳转,用户感觉不到授权了,但这种授权方式能获取的数据量有限,这里我们要获取用户的基本信息,我们需要使用snsapi_userinfo授权。使用snsapi_userinfo授权,扫码后出现类似于下面的授权界面

此接口用于获取用户个人信息。开发者可通过OpenID来获取用户基本信息。特别需要注意的是,如果开发者拥有多个移动应用、网站应用和公众帐号,可通过获取用户基本信息中的unionid来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号,用户的unionid是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,unionid是相同的。请注意,在用户修改微信头像后,旧的微信头像URL将会失效,因此开发者应该自己在获取用户信息后,将头像图片保存下来,避免微信头像URL失效后的异常情况。

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

参数说明

参数是否必须
access_token调用凭证(上一个请求中获得)
openid普通用户的标识,对当前开发者帐号唯一(上一个请求中获得)
lang国家地区语言版本,zh_CN 简体,zh_TW 繁体,en 英语,默认为zh-CN

正确的Json返回结果:

{ "openid":"OPENID","nickname":"NICKNAME","sex":1,"province":"PROVINCE","city":"CITY","country":"COUNTRY","headimgurl": "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0","privilege":["PRIVILEGE1", "PRIVILEGE2"],"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"}

参数
openid普通用户的标识,对当前开发者帐号唯一
nickname普通用户昵称
sex普通用户性别,1为男性,2为女性
province普通用户个人资料填写的省份
city普通用户个人资料填写的城市
country国家,如中国为CN
headimgurl用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空
privilege用户特权信息,json数组,如微信沃卡用户为(chinaunicom)
unionid用户统一标识。针对一个微信开放平台帐号下的应用,同一用户的unionid是唯一的。

错误的Json返回示例:

{ "errcode":40003,"errmsg":"invalid openid"}

7、总结

最近着手开发了微信网页扫码登录和公众号授权登录收获颇丰,两者的开发很类似。以下是我个人摸索过程中发现的两者的异同:

  • 两者都可以通过微信客户端扫码授权的方式,让第三方页面获得微信用户的一些基本信息(昵称、性别、所在地、在微信唯一标示等……)。他们都是通过提供一个链接让用户授权的方式。但网页版需要在页面打开二维码之后授权,而公众号则需要用户先关注了我们的公众号,然后点开公众号里面的链接,确认授权即可。
  • 网页扫码登录需要将授权的链接(二维码链接)在网页中打开、而公众号授权登录的链接必须要微信客户端中打开。
  • 无论网页扫码登录还是在公众号中授权登录,都是通过授权的方式获得一个code参数,之后通过code参数获取access_token和openid和通过access_token和openid去获取用户的基本信息的请求链接是一样的。
  • 在开发公众号授权登录的过程中,我发现了有测试账号的提供,足以满足我们的测试和开发,但在开发网页扫码时,暂时未发现哪里能获取测试账号,我是通过申请获取的。(希望知道哪里有测试账号的请求高手赐教)。

致谢:感谢您的阅读!

    推荐阅读
  • 教师资格证面试成绩查询入口官网 教师资格证合格证明查询

    2022下半年教师资格证考试面试成绩查询查询时间:2023年3月1日9时查询入口:中小学教师资格考试网拓展阅读:咨询教师资格考试问题的主要途径有以下两种方式:网络咨询。通过江苏教育网“网上办事”栏目、江苏省教育考试院“咨询信箱”栏目咨询、江苏省教育考试院微信公众号:jszsksb电话咨询。认定政策咨询电话:025-83335135;考试考务工作咨询电话:025-83235921、83235911。

  • 曲酒是什么酒(曲酒相关介绍)

    跟着小编一起来看一看吧!曲酒是指由霉菌发酵而来的酒,所有的白酒都需要经过曲酒发酵才能酿造出来,其中“曲”指的是酿造过程中的粮化发酵剂,一般是小麦制成。曲酒的起源已不可考,关于酒曲的最早文字可能就是周朝著作《书经·说命篇》中的“若作酒醴,尔惟曲蘖”。从科学原理加以分析,酒曲实际上是从发霉的谷物演变来的。

  • 钢铁直男的几个特征是什么(这样的都是钢铁直男)

    总之一句话,在小樱迷恋佐助的情况下,鸣人能结婚生子,多亏了我们的雏田女神。(二)《海贼王》单细胞吃货—路飞作为一个吃货,路飞很成功,但作为一个男人,我觉得路飞缺少了点什么。路飞不像悟空那么傻,路飞似乎知道结婚意味着什么,他要做海贼王,所以他拒绝和女帝结婚。我可以说路飞是直男,毕竟,拒绝别人的结婚请求后还能抱住别人的男人是真的直。

  • 家常肉末蒸蛋(做肉末蒸蛋的步骤)

    家常肉末蒸蛋将瘦猪肉清洗干净后,在砧板上剁成肉末,如果家里有小型绞肉机的话,会更方便。将剁碎的瘦猪肉放入到一个盘子里,再均匀的撒上一些食盐。将去除蛋壳的鸡蛋倒在之前肉末中间掏出的洞中。这时,蛋清会自动的流向四周猪肉末上面,然后再向鸡蛋上撒上少许的食盐。出锅之后再淋上味极鲜或者少许的生抽,在加入芝麻油就可以食用了。

  • lol版本更新之后多久才能转区(新增多个可转入大区)

    目前除了1区,祖安,诺克萨斯,班德尔城,皮尔特沃夫,战争学院,巨神峰都可以转入了。其中班德尔城和战争学院,可以说是人气很火爆的大区了,尤其小编这种注册的时候乱选区的玩家,终于可以去战争学院找小伙伴一起玩耍了。如果B区原本就已经注册了ID,那么转过去之后就会变成B区的ID。防止出现资产转移失败的情况。符文页数量上限还是20。6级成就补偿一个对应英雄碎片,7级补偿两个英雄碎片。

  • 盆底肌是哪个部位(简介盆底肌是哪个部位)

    盆底肌是哪个部位底肌从字面理解就是在骨盆底部的肌肉组织,是指封闭骨盆底的肌肉群。盆底肌可以维持膀胱、阴道、子宫、直肠、尿道等脏器的正常位置和功能。如果盆底肌的弹性变差,会使盆底内的器官改变原有位置,进而出现相应的功能障碍,比如大小便失禁、盆腔脏器脱垂等。多数出现盆底功能障碍的女性,常由于多次怀孕生产、长期慢性咳嗽、便秘等导致腹腔内压力增加,盆底肌肉承受过大压力,长期以往会导致盆底肌肉松弛。

  • 猪口蹄疫的症状及诊断 猪口蹄疫症状

    猪口蹄疫临床症状:口蹄疫自然感染的潜伏期为24~96小时,人工感染的潜伏期为18~72小时。若蹄部严沉痾损则需3周以上才干康复。妊娠母猪感染可发作流产。或接种灵敏细胞,可呈现细胞病变。阻断夹心ELISA已用于进出口动物血清的检查。

  • 苏东坡简介(苏东坡介绍)

    苏东坡简介苏轼,字子瞻、和仲,号铁冠道人、东坡居士,世称苏东坡、苏仙,汉族,眉州眉山人,祖籍河北栾城,北宋著名文学家、书法家、画家,历史治水名人。宋神宗时在凤翔、杭州、密州、徐州、湖州等地任职。宋徽宗时获大赦北还,途中于常州病逝。苏轼是北宋中期文坛领袖,在诗、词、散文、书、画等方面取得很高成就。作品有《东坡七集》《东坡易传》《东坡乐府》《潇湘竹石图卷》《枯木怪石图卷》等。

  • 主持人介绍新人发言主持词(主持人台词主持人开场白)

    在主持人台词及主持人串词的编写过程中,搜会网的专业人员建议您在无形中映射主题及开场中心思想。对于主办单位的祝愿也是必要的。男:2009新的一年已经到来,时光的车轮又留下了一道深深的印痕。男:2009年元宵联欢晚会现在开始。

  • 女生暗黑系穿搭推荐(女生暗黑系穿搭分享)

    款式简约的工装衬衫,剪栽不会过于宽松,多口袋的设计,穿上就是最“酷”小姐姐。旗袍是气质、古典的代名词。