微信浏览器内静默授权登录

特别注意

  • 浏览器直接打开地址,scope只支持snsapi_base,如需使用snsapi_userinfo,需要在公众号内打开。
  • openId对于同一账号,同一个应用来说,是唯一的,可以当唯一标识。同一个微信号,在不同的应用下,openId不一样。同一账号不同应用下,需要统一用户标识的,需要使用unionId。官网链接:

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

准备工作

  • 需要申请微信开放平台或者在微信公众平台的账号,获取AppId 和 AppSecret。
  • 开发工具:HBuilderX或者VS Code等均可,以下代码以uniapp为例,工具使用HBuilderX。

正式开始

  • 拼接微信固定格式字符串,打开后微信会在我们自定义的url后面加上code参数,以便获取用户的openId。redirect_uri后面对应的url需要进行encodeURIComponent编码
//固定拼接,替换掉appId和url。redirect_uri后面对应的url需要进行encodeURIComponent编码
"https://open.weixin.qq.com/connect/oauth2/authorize?appid=appId&redirect_uri=url&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect"
  • 通过code后台去查询openId,前端保存。
  • 为了方便,将拼好的地址转换成二维码,便于测试。

优化地址

地址太长,难免看着不舒服,我们可以将地址进行优化。具体步骤如下:
1.打开url 例如 https://xxx.xxx.xxx/xxx
2.加载时,判断本地是否有用户的openId,如果有,则不进行下面的操作。
3.如果没有openId,那就是首次进入,则加载上面拼接的字符串。这时微信会在链接后面拼接code参数,我们获取一下。
4.拿到code,传给后台去微信请求openId即可,前端拿到返回的openId存储起来,此时url里是有code的。
5.再次刷新界面,地址和第一步一样 https://xxx.xxx.xxx/xxx,因为本地已经有了缓存,所以逻辑正常进行即可。
6.再次刷新界面是为了让地址简洁,因为地址里有code,我不想让他暴露出去。
7.我们把最初的地址生成一个二维码即可。

具体代码如下:

//初始化时调用
this.checkUser();
//检测是否获取过openId
checkUser(){
    //获取本地存储的openId
    var openId = uni.getStorageSync("openId");
    if (openId == undefined || openId == "") { //没有缓存用户数据
        //如果微信给我们返回了code
        var code = this.getParam(location.href,"code");
        if(code != "" && code.length > 0){
            this.loadUserInfo(code);
        }else{
            var url = "按微信要求拼接好的字符串";
            //加载链接后微信会返回code
            window.location.href = url;
        }
    }else{
        //用户登录成功,本地已经有了用户openId
    }
},
//用微信code换用户标识
loadUserInfo(wxCode){
    //从后台获取openId的网络请求,此处省略……
    //获取到openId后,存本地
    uni.setStorageSync("openId",openId);
    var url = "最初的地址"
    window.location.href = url;     
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,402评论 6 499
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,377评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,483评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,165评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,176评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,146评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,032评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,896评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,311评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,413评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,008评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2 353

推荐阅读更多精彩内容