微信开发者工具登录授权_微信开发者工具调试微信网页授权,点击‘登录’按钮无效 - CSDN
  • 本篇将帮助读者实现基于 微信开发者工具 & C#环境 下的用户在小程序上的授权登陆。     准备: 微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html ...

    本篇将帮助读者实现基于 微信开发者工具 & C#环境 下的用户在小程序上的授权登陆。

     

     

    准备:

    微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/index.html

     

    开发:

    在开发之初,我们需要先明确微信方已经制定好的授权登陆流程,参看 官方API - 登陆接口

    你会看到微信方为开发者制定好的登陆授权流程:

     

     

    如图,即为一个顺向的用户登陆授权的流程。

    为什么说它是一个顺向的流程呢?因为在真正的小程序开发中,我们并不确定用户何时需要起调如上的登陆流程(如:用户在某些特定场景下的凭证丢失,但Ta并没有退出小程序而是在小程序内部做跳转等相关操作,即有可能导致一些预期之外的异常),所以,我们需要在这个顺向的流程之外,加一层检测机制,来解决这些异常场景,而官方API中,wx.checkSession 刚好可以一定程度上解决这个问题。

    那么,我们的认证流程其实应该是:

    - 小程序 wx.checkSession 校验登陆态为失效

     

        - success :接口调用成功的回调函数,session_key未过期,流程结束;    

        - fail :接口调用失败的回调函数,session_key已过期

            -》 小程序端 wx.login 获取code 并 wx.request 提交code给己方服务器

            -》 己方服务器 提交Appid + appSecret + code 到微信方服务器 获取 session_key & openid

            -》 己方服务器 根据 session_key & openid  生成 3rd_session(微信方提出的基于安全性的考虑,建议开发者不要将openid等关键性信息进行数据传输) 并返回 3rd_session 到小程序端

            -》 小程序端 wx.setStorage 存储 3rd_session ( 在后续用户操作需要凭证时 附带该参数 )

            -》 小程序端 wx.getUserInfo 获取用户信息 + wx.getStorage 获取 3rd_session 数据后,一并 wx.request 提交给己方服务器

             -》 己方服务器 SQL用户数据信息更新,流程结束;

     

    思路整理完毕,接下来实现流程

    小程序端:

    在小程序中,新建一个通用的JS做基础支持

    并在一些需要引用的页面进行引用

    var common = require("../Common/Common.js")

    接着,在Common.js 中实现逻辑

    //用户登陆
    function userLogin() {
      wx.checkSession({
        success: function () {
          //存在登陆态
        },
        fail: function () {
          //不存在登陆态
          onLogin()
        }
      })
    }
    
    function onLogin() {
      wx.login({
        success: function (res) {
          if (res.code) {
            //发起网络请求
            wx.request({
              url: 'Our Server ApiUrl',
              data: {
                code: res.code
              },
              success: function (res) {
                const self = this
                if (逻辑成功) {
                  //获取到用户凭证 存儲 3rd_session 
                  var json = JSON.parse(res.data.Data)
                  wx.setStorage({
                    key: "third_Session", 
                    data: json.third_Session
                  })
                  getUserInfo()
                }
                else {
    
                }
              },
              fail: function (res) {
    
              }
            })
          }
        },
        fail: function (res) {
      
        }
      })
    
    }
    
    function getUserInfo() {
      wx.getUserInfo({
        success: function (res) {
          var userInfo = res.userInfo
          userInfoSetInSQL(userInfo)
        },
        fail: function () {
          userAccess()
        }
      })
    }
    
    function userInfoSetInSQL(userInfo) {
      wx.getStorage({
        key: 'third_Session',
        success: function (res) {
          wx.request({
            url: 'Our Server ApiUrl',
            data: {
              third_Session: res.data,
              nickName: userInfo.nickName,
              avatarUrl: userInfo.avatarUrl,
              gender: userInfo.gender,
              province: userInfo.province,
              city: userInfo.city,
              country: userInfo.country
            },
            success: function (res) {
              if (逻辑成功) {
                //SQL更新用户数据成功
              }
              else {
                //SQL更新用户数据失败
              }
            }
          })
        }
      })
    }

    至此,小程序端的流程基本实现完毕,接着实现己方服务API

    Login 接口逻辑范例

     if (dicRequestData.ContainsKey("CODE"))
            {
                string apiUrl = string.Format("https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type=authorization_code", ProUtil.SmartAppID, ProUtil.SmartSecret, dicRequestData["CODE"]);
            
                HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(apiUrl);
                myRequest.Method = "GET";
                HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse();
                StreamReader reader = new StreamReader(myResponse.GetResponseStream(), Encoding.UTF8);
                string content = reader.ReadToEnd();
                myResponse.Close();
                reader.Close();
                reader.Dispose();
    
                //解析
                userModel ReMsg = JSONUtil.JsonDeserialize<userModel>(content); //解析
                if ((!string.IsNullOrWhiteSpace(ReMsg.openid)) && (!string.IsNullOrWhiteSpace(ReMsg.session_key)))
                {
                    // 成功 自定义生成3rd_session与openid&session_key绑定并返回3rd_session
    
                }
                else
                {
                    // 错误 未获取到用户openid 或 session
                }
            }
            else
            {
                // 错误 未获取到用户凭证code
            }

    UserInfoUpdate 接口在此不加赘述,用户根据自身情况对数据进行操作即可,微信方调用成功时返回的相关参数信息如下

    至此,完成了小程序基本的授权登陆及用户信息的获取。

    最后的最后,是从别人那里学来的赚零钱小套路~ 赏点小钱鼓励一下我吧 ! ! ! (๑•̀ㅂ•́)و✧

    认真看完以上所有后

    有啥不懂的 欢迎留言提问~

    注:以上内容有所删减,仅保留通用内容。在具体项目中必定存在部分逻辑需要调整,引鉴的同学请注意

     

     

     

     

    展开全文
  • 微信开发者工具调试微信网页授权,点击‘登录’按钮无效 问题描述 h5页面需要获取微信用户信息,参考微信开发者文档: 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,...

    微信开发者工具调试微信网页授权,点击‘登录’按钮无效

    问题描述

    h5页面需要获取微信用户信息,参考 微信开发者文档,一步步走到用开发者工具调试页面,却发现点击登录按钮没有反应!如下
    微信授权页面
    看日志信息
    在这里插入图片描述
    好吧,说这个图片路径是http,而应该是https,可是这是微信自己的页面啊,怎么改???
    然鹅不是这个原因,偶然发现点击按钮上边缘是有效的,点击之后重定向页面,跟文档描述的一模一样。为什么点击上边缘有效,而点击按钮无效?如果你也是这样,那么请打开电脑设置—字体大小–看看是不是125%???
    现在,把字体设置成100%,重新打开微信开发者工具,再去调试上面的页面,你会惊喜地发现,点按钮可以了。

    原因

    电脑设置的字体大小(非100%)的时候,会影响微信开发者工具dom节点事件绑定的位置,根据表现来看,并不影响渲染。

    补充一下

    过程中call_me_small_pure的博客 给了很大帮助,感谢!

    展开全文
  • 使用微信开发者工具, 选择微信网页授权, 微信团队为广大的开发者提供了一个测试账号。该帐号无需公众账号,快速申请接口测试,直接体验和测试公众平台所有高级接口。这么好用的功能,只需要要你有一个手机,手机上...

    转:https://www.jianshu.com/p/9ced1a297c95

    1.使用localhost本地调试

    1. 使用微信开发者工具, 选择微信网页授权, 微信团队为广大的开发者提供了一个测试账号。该帐号无需公众账号,快速申请接口测试,直接体验和测试公众平台所有高级接口。这么好用的功能,只需要要你有一个手机,手机上安装了一个微信即可。
      地址:
      https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
      登录后,会得到一个微信号,和测试好的相关信息。appID,appsecret。
    2. 扫描测试号二维码, 并关注公众号.在网页服务的网页账号中点击修改,填入127.0.0.1:8080(没有http)
    3. 组装授权Url.
      https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
      把参数替换成自己的参数, appid填入测试号的appid, REDIRECT_URI填入 经过encodeURIComponent()的参数,SCOPE填入snsapi_userinfo, state=#wechat_redirect即可 eg:https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef450dbeb79f6c72&redirect_uri=http://5ed286c2.ngrok.io/wx/mp&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect
    4. 把组装后的url填入微信开发者工具地址栏中就可以发起授权弹窗了

    2.使用ngrok映射本机ip使外网可以访问.

    1. 申请ngrok账号(https://ngrok.com), 经过官网四步后,生成一个可在外网访问的域名
    2. 在测试账号的域名中添加自己生成的域名(不要加http和端口)
    3. 组装url 访问调试



    作者:sologuy
    链接:https://www.jianshu.com/p/9ced1a297c95
    来源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    展开全文
  • 1.将安装好的 微开发者工具移动到没有中文路径的地址,然后将 微信开发者工具.exe 更改为英文名字,然后发送到桌面快捷方式 2,按照谷歌配置可跨域的方法配置 配置方法(配置的时候请保证 你的软件在关闭状态) ...

    1.将安装好的 微开发者工具移动到没有中文路径的地址,然后将   微信开发者工具.exe 更改为英文名字,然后发送到桌面快捷方式

    2,按照谷歌配置可跨域的方法配置

     

    配置方法(配置的时候请保证 你的软件在关闭状态)

    邮件你发送到桌面的快捷方式,然后更改  目标

    后面加上 这一句话

    --args --disable-web-security --user-data-dir

    然后通过这个快捷方式进行打开 微信开发者工具就支持跨域了

    转载于:https://www.cnblogs.com/MainActivity/p/9928913.html

    展开全文
  • 等着把代码从微信开发者工具导进去就好了 2、开发者工具初始化本地仓库 打开微信开发者工具想要共同开发的那个项目,点击版本管理,点击弹出的框中的确定,就可以初始化完毕了。 3、连接gitee仓库和微信开发者工具 ...
  • 最近在做企业微信开发,碰到一个很蛋疼的问题,企业微信后台怎么设置,在微信开发者工具上始终提示“未绑定企业号开发者”,百度了一圈也没找到解决的答案,最后问企业微信客服才解决,在此再次感谢为我解答问题的小...
  • 解决微信开发者工具”当前系统代理不是安全代理” . 故障1) 你有设置开启代理吗? 如果不需要,你点左上角的“代理”选项,关闭代理即可 故障2) 使用emedit工具,点击搜索,在文件中查找 在微信开发者工具的...
  • 强调一下:微信开发者工具可以调试企业微信的自建应用,暂时还不支持调试第三方应用。调试第三方应用时同样也会提示未绑定企业号开发者。 下面将针对如何调试自建应用出现的企业号未绑定问题。 1、首先,将自己...
  • 第一次接触微信小程序开发,接手项目后,发现自己的小程序AddID在开发者工具授权登录失败,使用测试账号也不行,自己的微信已经注册过小程序了,后来问了大佬才知道问题所在; 这里config.js文件里面的appID需要...
  • 然后用该服务号或公众号登录微信公众平台,[在公众平台的 开发–基本配置可以查到开发者ID(AppID)和开发者密码(AppSecret)] 然后在 开发–开发者工具–web开发工具中可以 邀请登录微信开发者工具的微信 成为该小...
  • 准备工作 ...微信开发者工具中配置git 打开微信开发者工具中的版本管理 点击设置 先要把通用这里改成你github上的用户名和邮箱 3.修改网络认证 按提示找到你生成的ssh 路径填上去就ok了 到这里...
  • 微信开发者工具在咱们开发微信小程序和微信公众号时会使用上,之前遇到一个问题就是在微信的授权页面点击不生效,其实不是点击不生效,是点击的位置偏移,最后找到问题所在是因为win10有缩放大小的问题(按照下面的...
  • 有时候,我们在使用微信开发者工具导入别人开发好的项目时会提示:登录用户不是该小程序的开发者。如下图所示: 这时候,找到“project.config.json”文件,我们需要修改项目中的“project.config.json”文件。 ...
  • 更改本机默认localhost域名来进行微信开发者工具调试等 1、打开C:\Windows\System32\drivers\etc下的hosts文件 2、然后更改对应的域名即可 例子: 3、对于vue项目:在vue项目里的vue.config.js文件里的devServer...
  • 即刻下载使用==》微信web开发者工具下载 2、调试微信网页授权,具体操作步骤为: 1)开发者可以在调试器中点击“登录”,使用手机微信扫码登录,从而使用真实的用户身份来开发和调试微信网页授权。请确认手机登录页...
  • 1、获取微信开发者ID: 登录微信公众平台,在“开发”模块,点击“基本配置”,即可以看下对应的开发者ID; 2、微信授权目录配置 点击“微信支付”模块,打开“开发配置”,进行设置支付授权目录 注意: 一个...
  • 自从更新了这个工具“wechat_devtools_1.01.170913_x64.exe”,经常遇到这个问题,网上方法都用遍了, 偶尔重启能解决和重装工具能解决,,,,今天意外发现,居然要点上面那快区域,能进入。 就是因为分辨率的...
  • 一、前言 这次的项目主要是关于微信...在开发过程中会设计到微信接口的调测,这里使用的微信公众号中提供的开发者工具中的在线接口调测和公众平台测试账号。注:微信支付功能不能使用公众平台测试账号测试,必须部署...
  • 微信小程序官方提供了比较完整的开发文档,也提供了官方的开发工具。但是本人还是习惯于用vscode,同时,可以安装vscode中的插件来辅助开发。 1. vsode插件 (1) Live Sass Compile——实时将sass打包为wxss wxss的...
  • 微信公众号的开发者配置中的微信开发工具中明明已经正确绑定开发者账号,但微信开发者工具还是弹出“未绑定网页开发者”,坑了好久,记录下 原因: 1.微信公众号的开发者配置中的微信开发工具中没有绑定开发者...
1 2 3 4 5 ... 20
收藏数 10,936
精华内容 4,374
关键字:

微信开发者工具登录授权