WebApp微信集成登录

刺骨的言语ヽ痛彻心扉 2022-07-12 13:28 270阅读 0赞

把一个WebApp发布在微信公众号上，并且想使用微信用户的信息，以求达到微信集成登录的目的。官方文档讲的也很详细，然而在做的过程中还是遇到很多坑，分享出来希望能对有需要的人有所帮助。实现效果如下：

![Center][]

**[微信][Link 1]****浏览器授权的前提**：

1.拥有微信公众号，即有APPID，APPSecret，并设置了授权回调域   
2.必须在手机端的微信浏览器打开方可，目测现在windows PC端的微信浏览器打开也可通过授权。   
3.以上条件都具备后参照微信开放文档进行开发。

文档参考：网页授权获取用户基本信息

[http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html][http_mp.weixin.qq.com_wiki_17_c0f37d5704f0b64713d5d2c37b468d75.html]

weixin.js

var weixin = {
        config: {
            url:'https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri='+encodeURIComponent("https://...")+'&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect',
            userInfo:JSON.parse(localStorage.getItem('MY_USER_INFO'))
        },
        isweixin: function() {
            var ua = window.navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i) == 'micromessenger'){
                return true;
            } else {
                return false;
            }
        },
        getQueryString: function(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
            var r = window.location.search.substr(1).match(reg);
            if (r!=null) return unescape(r[2]); return null;
        },
        getUser : function(code) {
            $.ajax({
                type: 'get',
                url: "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=APP_SECRET&code="+code+"&grant_type=authorization_code",
                cache:false,
                async: false,
                dataType: 'jsonp',
                jsonp: 'jsonpcallback',
                success: function(json){
                    localStorage.setItem('MY_USER_INFO',JSON.stringify(json));
                    // document.write("<div>"+JSON.stringify(json)+"</div>");
                    $("#test").html(json[0].openid);
                },
                error: function(err) {
                    // console.log(err);
                    $("#error").html(JSON.stringify(err));
                }
            })
        },
        getUserInfo:function(){
            if(weixin.config.userInfo != null){
                return JSON.parse(localStorage.getItem('MY_USER_INFO'));
            }else{
                if(weixin.getQueryString('code') != null){ 
                    weixin.getUser(weixin.getQueryString('code'));
                    return JSON.parse(localStorage.getItem('MY_USER_INFO'));
                }else{
                    window.location.href = weixin.config.url;
                }
            }
        }
    }

ps：只能在微信中打开调试，无法看到控制台，需要把接收到的数据输出到页面上查看。

[Center]: /images/20220710/e9ac0f9999fb4a06bdcf3b95312c5acd.png
[Link 1]: http://lib.csdn.net/base/wechat
[http_mp.weixin.qq.com_wiki_17_c0f37d5704f0b64713d5d2c37b468d75.html]: http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html

发表评论取消回复

表情：

评论列表（有 0 条评论，270人围观）

还没有评论，来说两句吧...

相关阅读

相关微信登录接口

1.流程图 ![667d73db6d0c48c4b452f7921ad0eb86.png][] 本地认证服务需要：定义接口，接受微信下发的授权码受到授

港控/mmm°/ 2024年03月26日 15:20/ 0 赞/ 100 阅读

相关 SpringBoot 集成第三方登录（微信、支付宝）

SpringBoot 集成第三方登录微信 1. 登录微信开发平台 1.在微信开发平台里面获取我们需要的AppID、AppSecre

我会带着你远行/ 2023年10月03日 13:23/ 0 赞/ 24 阅读

相关微信小程序 vant webapp开发

一、简介 vant 官网 [https://youzan.github.io/vant-weapp/\/home][https_youzan.github.io_vant

墨蓝/ 2023年10月03日 12:04/ 0 赞/ 37 阅读

相关微信登录

Page({ / 页面的初始数据 / data: { canIUse: wx.canIUse('button.o

àì夳堔傛蜴生んèń/ 2023年07月19日 05:49/ 0 赞/ 37 阅读

相关微信登录

一，流程： 1，用户请求微信登录 2，第三方应用请求微信开放平台，获取code，传参中就有回调url 3，用户确认登录第三方应用

ゞ浴缸里的玫瑰/ 2023年03月04日 06:34/ 0 赞/ 29 阅读

相关 WebApp微信集成登录

把一个WebApp发布在微信公众号上，并且想使用微信用户的信息，以求达到微信集成登录的目的。官方文档讲的也很详细，然而在做的过程中还是遇到很多坑，分享出来希望能对有需要的人有所

刺骨的言语ヽ痛彻心扉/ 2022年07月12日 13:28/ 0 赞/ 271 阅读

相关 android 微信登录与分享集成

android 微信登录与分享 android微信登录与分享这两个功能是很常用的，尤其是现在微信用户日益剧增，qq虽然很经典但是感觉大多数用来办公每个写andr

淩亂°似流年/ 2022年05月31日 04:15/ 0 赞/ 352 阅读

相关模拟微信登录

模拟微信登录 use LWP::UserAgent; use File::Temp qw/tempfile/; use AE;

向右看齐/ 2022年05月27日 14:11/ 0 赞/ 346 阅读

相关 .net core identity集成微信授权登录

最快的方式是直接nuget安装AspNetCore.Authentication.WeChat包。想要知道是如何实现的，可以看下面github上面的源码。源码

秒速五厘米/ 2022年01月06日 15:01/ 0 赞/ 424 阅读

相关微信小程序微信登录

![image.png][] 开发接口登录 wx.login wx.checkSession 签名加密小程序登录小程序可以通过微信官方提供的登录能

Dear 丶/ 2021年09月29日 13:12/ 0 赞/ 709 阅读