• 1、OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用...每一个令牌授权一个特定的网站(例如,视频编辑网站)在特定的时段(例如,接下来的2小时内)内访问特定的资源(例如仅仅是某一相册中的视...

    1、OAuth2.0

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

      允许用户提供一个令牌而不是用户名和密码来访问他们存放在特定服务提供者的数据。每一个令牌授权一个特定的网站(例如,视频编辑网站)在特定的时段(例如,接下来的2小时内)内访问特定的资源(例如仅仅是某一相册中的视频)。这样,OAuth允许用户授权第三方网站访问他们存储在另外的服务提供者上的信息,而不需要分享他们的访问许可或他们数据的所有内容。
    2、目标
      我们这里主要模拟使用OAuth2.0,用户通过扫描我们网页应用的二维码并进行授权登录来获取用户的基本信息的过程。详细的接口相关信息可以在微信开放平台上查看:https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&lang=zh_CN
    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.comhttp://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参数

    redirect_uri?state=STATE

    5.2、事例:

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

    https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.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去获取用户的基本信息的请求链接是一样的。
    • 在开发公众号授权登录的过程中,我发现了有测试账号的提供,足以满足我们的测试和开发,但在开发网页扫码时,暂时未发现哪里能获取测试账号,我是通过申请获取的。(希望知道哪里有测试账号的请求高手赐教)。

     公众账号授权登录:http://www.cnblogs.com/0201zcr/p/5131602.html

    微信公众号群发消息:http://www.cnblogs.com/0201zcr/p/5866296.html

       致谢:感谢您的阅读!
    展开全文
  • 微信开发者平台 1.移动应用的创建 (1)填写基本信息(应用的基本内容、应用的App图标等) (2)填写平台信息(应用的官网、应用的平台(ios、android、wp8应用))其中要有应用签名、应用报名填写 (3)...

    微信开发者平台
    1.移动应用的创建
    (1)填写基本信息(应用的基本内容、应用的App图标等)
    (2)填写平台信息(应用的官网、应用的平台(ios、android、wp8应用))其中要有应用签名、应用报名填写
    (3)提交成功
    这里写图片描述

    2.提交成功之后可以进行查询填写的资料,会有7天的待审核时间,如下图:
    这里写图片描述

    3.申请通过的界面如下图(其中获得了朋友圈分享以及微信好友):
    这里写图片描述
    4.现在完成了应用创建,那么接下来就可以在你的android项目中继承你的微信朋友圈和微信好友的分享了。

    展开全文
  • 之前下载了微信开发者工具,最近一直提示下载更新。因为嫌麻烦,就没有更新。结果今天微信开发者工具竟然打不开了!好吧!以后还是经常更新比较好!  遇到了微信开发者工具打不开的问题,就重新下载了最新版的微信...

           之前下载了微信开发者工具,最近一直提示下载更新。因为嫌麻烦,就没有更新。结果今天微信开发者工具竟然打不开了!好吧!以后还是经常更新比较好!

      遇到了微信开发者工具打不开的问题,就重新下载了最新版的微信开发者工具!但是下载完了以后,却发现打不上汉字,我的天呀!网上搜索还是微信开发者工具自身的bug,需要重新启动一下才可以使用。好吧,我又关了重新启动了一下,才可以正常使用。

       经验教训:1.需要经常更新微信开发者工具,别等到有了问题,如打不开,进不去编辑页面,才重新下载!会影响工作效率。不过如果是更新了,依然会出现这个问题,那就只能重新下载了!

           2.重新更新了以后,会出现打不上中文汉字的问题,只能输入英文,输入中文就会闪一下没了。解决方案:关闭微信开发者工具,再重新打开!

    什么时候我写文章也能如此就好了!老话说:“读书破问卷,下笔如有神”,想来我读书还是没有读到位呀!

    展开全文
  • 微信开发者工具使用教程 如何上传、发布、审核等 2020年3月31日录 - 微信开发者工具使用教程 01-微信开发者工具的下载和安装 02-微信小程序账号的注册、登录、appid的获取 03-微信小程序开发和公众号开发模式的切换 ...
  • 因为是别的小伙伴的项目,所以,要换一个appID,可以换成自己的,HbuilderX运行在微信开发者工具,打不开,只会跳转到导入项目界面,不会打开这个项目,报错: 解决方法: 然后,关闭微信开发者工具,在...

    因为是别的小伙伴的项目,所以,要换一个appID,可以换成自己的,HbuilderX运行在微信开发者工具,打不开,只会跳转到导入项目界面,不会打开这个项目,报错:

     

    解决方法:

    然后,关闭微信开发者工具,在HbuilderX重新运行项目,到微信开发者工具,即可,注意,有时不会直接打开,如果跳转到微信开发者工具导入项目界面,留意一下项目列表中是否有你要打开的项目,有就手动点击打开就可以了

    展开全文
  • 于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下: 第一步:打断点,我们必须在我们想要它停下来的...

    由于小程序的火爆,于是去开源中国接了个私活,开发一个小程序。于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下:

    第一步:打断点,我们必须在我们想要它停下来的地方打上调试断点,点击微信开发者工具的左侧的“调试”tab,然后选择中间窗口中的”Sources”Tab,在Sources页中点开”Top”根节点,层层打开,找到自己想要调试的js文件,一般是打那种.js后面带[sm],如index.js[sm],非index.js,当然这里之后想修改内容不能在”调试”模式下修改,而要转到”编辑”模式,之前我老容易犯这个错误,打开index.js[sm]文件后,点击左边的行上的数字,就会由灰色背景变成蓝色背景,这样断点就打好了,(如果不想要了,也可以点击就会取消)如下图所示:

     

    第二步:运行,首先点击编译上面的那个运行小图标(或者快捷键ctrl+b),然后操作到你想要的那个界面或者触发某个动作,程序自动会跑到断点处代码,如下图所示:

     

    第三步:单步调试,按调试器窗口(debugger)的向下箭头(step into nextfunction call),一步步的可以往下调试,如果想跳到下一个断点,就按调试器窗口的类似于播放的小按钮,英文叫resume script execution,快捷键为F8或者Ctrl+\,如下图所示

     

    如果想看调试中变量的运行值怎么办?有许多办法,这里以查看上个界面传来的options变量值为例

    办法1:让鼠标指针放在变量上,他会有提示框,框内就是变量值,如下图所示

     

    办法2:使用console.log(options);打印出来,在console窗口可以查看,如下图所示

     

    方法3:在调试器窗口,点开Scope标签,然后再点开相应变量,如下图所示

     

    如果我们的断点过多或者不想它们调试了,怎么让它们失效呢?

    办法就是点击调试器窗口中的图标,英文叫deactive breakpoints(或者快捷键:Ctrl+F8)

    展开全文
  • 在使用 微信开发者工具 时,我经常会碰到忘记标签名称,这时候我都会用 代码提示 的快捷键,问题来了,微信开发者工具 的 代码提示 快捷键是 Ctrl+空格,即使按下 Ctrl+空格也没有提示,反而输入法切换了 中/英文。...
  • 假设我用vue开发了一个web应用,需要在手机微信里访问并调试, 可以按照本文介绍的步骤,使用微信开发者工具来调试. 假设我的web应用的访问入口是如下公众号菜单的"预约"按钮: 那么为了能够在微信开发者工具里调试,...
  • 微信开发者工具集成git,实现多人协调开发,下面就拿GitHub举例,一一说明。 一、在GitHub创建远程仓库。这里忽略,网上很多。 二、在微信开发者工具中配置Git,并实现文件上传。 1.点击开发者工具右上角的...
  • 首先这个问题是微信开发者工具代理的使用问题,我们要着手通过修改代理配置进行修改,其他网络教程列如修改注册表,重新安装系统、还有修改微信开发者工具配置文件的教程都是乱用药,大家千万不要尝试。 解决方法: ...
  • 2.(不想重启时)在任务管理器中结束微信开发者工具的所有进程,然后以管理者身份运行,等待差不多有一分钟(期间任务管理器中的微信开发者工具的进程不断变化)打开成功。 上周微信开发者工具一直没有办法...
  • 打开微信开发者工具 创建第一个小程序 步骤: 打开微信开发者工具 使用微信扫码登录 点击小程序-创建小程序 项目名 项目路径 appid 不使用云服务器 语言: javascript...
  • 1.将安装好的 微开发者工具移动到没有中文路径的地址,然后将 微信开发者工具.exe 更改为英文名字,然后发送到桌面快捷方式 2,按照谷歌配置可跨域的方法配置 配置方法(配置的时候请保证 你的软件在关闭状态) ...
  • 上一篇文章中https://blog.csdn.net/u014650759/article/details/90701866,我们已经安装好了微信开发者工具,并导入了一个Demo项目,这篇文章,将就开发者工具进行简单的介绍,方便你开发实用编译器,更好的开发小...
  • 微信开发者工具开发微信小程序1、下载工具2、工具使用3、增删改查a:使用云开发数据库以查询为例b:调用本地springboot接口以查询为例 1、下载工具 进入微信公众平台:微信公众平台. 由于我已经注册过,所以提供文档...
  • 运行uni-app在微信开发者工具
  • 在微信公众平台|小程序中下载微信开发者工具申请微信公众号,进入微信公众平台|小程序 首页 点击 “文档”进入微信小程序介绍的界面在微信小程序界面的菜单中 选中“开发”,点击“小程序开发”弹出:选中 “工具”...
  • 确保微信开发者工具-设置-安全-服务端口开启;且已获得小程序项目的开发者角色。 1、打开Git Bash 克隆小程序项目。克隆完成后。 2、打开HBuilder,点击菜单“文件”下的“打开目录”,选择已克隆的小程序项目。...
  • h5页面需要获取微信用户信息,参考微信开发者文档: 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: 全新的界面设计 ,...
  • 解决微信开发者工具”当前系统代理不是安全代理” . 故障1) 你有设置开启代理吗? 如果不需要,你点左上角的“代理”选项,关闭代理即可 故障2) 使用emedit工具,点击搜索,在文件中查找 在微信开发者工具的...
1 2 3 4 5 ... 20
收藏数 116,679
精华内容 46,671