微信开放平台开发系列之第三方授权登陆(一)

2021-04-24
来源:网络整理

有关微信开放平台开发的系列文章:

微信开放平台开发第三方授权登录(一):初步开发准备

微信开放平台开发第三方授权登录(二):PC网页

微信开放平台开发第三方授权登录(三):客户端

微信开放平台开发第三方授权登录(四):微信官方账号

微信开放平台开发第三方授权登录(五):微信小程序

内容

要开发一个小型程序,您需要在公共平台上注册一个小型程序帐户,然后获取该小型程序的总和。您可以进行第三方登录授权开发。

一、要求

具有第三方微信登录功能并获取用户信息。

二、开发过程

小程序:

1.微信小程序使用wx。登录以获取代码的API。由于无法将金额透露给用户,因此需要在服务器端完成代码获取,因此需要将代码发送到服务器端

(服务器),并带来授权临时票证代码参数;

2.服务器通过代码总和获得总和。服务器需要将自定义登录状态返回到前端,因此无法返回

3.前端保存自定义登录状态,并在获取用户信息时将自定义登录状态携带到后端。

获取过程

三、已开发和使用的技术和工具

1、。后端是使用

开发的

2、前端使用微信开发人员工具V 1. 02进行开发

3、用于处理json数据

四、具体实施步骤

1.前端(小程序)

目录结构如下:

1)自定义全局变量

globalData: {     userInfo: null,     sessionkey:null   }

自定义存储用户信息

用于存储服务器发送回客户端的信息

2)加载时登录

用户登录后,服务器将向客户端返回一个以进行保存。如果为空,则表示您尚未登录小程序登录授权开发,需要调用wx。登录。

调用wx。后,微信将向小程序返回一个代码。小程序需要将此代码发送到其自己的服务器以获取信息。

onLoad: function() {     var serverUrl = app.serverUrl;     // 加载时,检查当前用户信息是否登录     if (app.globalData.sessionkey != null) { // 已经登录了       // 是否授权       wx.getSetting({         success: function(res) {           if (res.authSetting['scope.userInfo']) {             // 已经授权,可以直接调用 getUserInfo 获取头像昵称             wx.getUserInfo({               success: function(res) {                 app.globalData.userInfo = JSON.parse(res.rawData);               }             })           } else {             // 还没有授权,则需要授权             wx.redirectTo({               url: '../authorization/authorization'             })           }         }       })     } else { // 还没有登录       // 提示用户登录授权       wx.login({         success: res => {           // 发送 res.code 到后台换取 openId, sessionKey, unionId           if (res.code) {             // 发送请求,服务端能获取到openid和unionid,之前登录过则可以获取到之前的用户信息。             wx.request({               url: serverUrl + '/miniprogram/login/' + res.code, //请求路径               method: "GET",               success: function(res) {                 app.globalData.sessionkey = res.data;                 // 进入授权                 wx.redirectTo({                   url: '../authorization/authorization'                 })               }             })           }         }       })     } },

成功登录后,重定向到授权页面

3)授权页面。wxml

        允许微信授权后,可体验更多功能       授权登录     返回首页     您的微信版本过低,请升级后再次体验

设置开放类型后,单击属性配置后将调用该功能,并同时获取基本用户信息(不包括等)。

4)用户信息发送到后端

// 授权登录按钮   bindGetUserInfo: function(e) {     let that = this;     var serverUrl = app.serverUrl;     console.log(e.detail.userInfo)     if (e.detail.userInfo) {  // 成功获取到信息       app.globalData.userInfo = e.detail.userInfo       // 这里可以将用户信息发送给后台       // 获取到sessionkey       if (app.globalData.sessionkey!=null){         wx.request({           url: serverUrl + '/miniprogram/userinfo', //请求路径,           method: "GET",           data: {             // openid: this.openid,             // unionid: this.unionid,             key: app.globalData.sessionkey,             nickname: app.globalData.userInfo.nickName, //获取昵称             gender: app.globalData.userInfo.gender, //获取性别             province: app.globalData.userInfo.province, //获取省份             city: app.globalData.userInfo.city, //获取城市             country: app.globalData.userInfo.country, //获取国家             avatarUrl: app.globalData.userInfo.avatarUrl, //这些是用户的基本信息             language: app.globalData.userInfo.language           },           success: function (res) {             if (res.data.code == 0) {  // 请求成功               debugger               app.globalData.userInfo = res.data.data; // 以数据库中返回的数据为准               // 获取用户信息成功               wx.switchTab({                 url: '../mine/mine'               })             }           }         })       }else{         this.showZanTopTips('错误:SessionKey为null');       }     } else {       this.showZanTopTips('您拒绝了微信授权');     }   }, }));

成功获取用户信息后,页面跳转到我的页面,以显示用户详细信息

5)用户详细信息页面mine.wxml

          {{userInfo.nickName}}           性别:{{userInfo.gender === 1 ? '男':'女'}}           城市:{{userInfo.city}}           省份:{{userInfo.province}}           国家:{{userInfo.country}}           使用语言:{{userInfo.language}}  

2.服务器(Java)

服务器需要做的是:接受前端发送的请求,根据发送的代码将请求发送到微信服务器,并保存服务器保存的总和,得到总和,然后关联两者并将其保存到内存中(),将键值返回到前端。

接受小程序发送的密钥和基本用户信息,从密钥中获取它,然后查询数据库。如果有数据,它将被封装并返回到前端。如果没有信息,数据将被插入数据库并返回到前端。

1)。将与小程序相关的配置添加到配置文件中

.. =

.. =

2)获取并

@ResponseBody     @RequestMapping("/login/{code}")     public String login(@PathVariable("code") String code) {         String url = "https://api.weixin.qq.com/sns/jscode2session?" +                 "appid=" +                 env.getProperty("wechat.miniprogram.appid") +                 "&secret=" +                 env.getProperty("wechat.miniprogram.appsecret") +                 "&js_code=" +                 code +                 "&grant_type=authorization_code";         JSONObject object = HttpClientUtils.httpGet(url);         // 请求,获取openid或unionid         // 从数据库中查询是否存储         // 成功获取         String unionid = (String) object.get("unionid");         String openid = (String) object.get("openid");//用户唯一标识         // 会话密钥session_key 是对用户数据进行加密签名的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。         String session_key = (String) object.get("session_key");         String key = "wechatminiprogramkey-" + UUID.randomUUID().toString().replaceAll("-", "");         RedisPoolUtil.setEx(key, openid + "---" + session_key, 9600);         return key; }

3)。获取用户信息:

小程序可以获取基本的用户信息,但不包含此类信息。它仅具有基本的昵称和其他信息。它需要通过后端发送的密钥作为标识符发送到前端,然后找到对应的密钥来获取。

@ResponseBody @RequestMapping(value = "/userinfo", method = RequestMethod.GET) // 获取用户信息 public Result getOpenId(String key, MiniProgramBaseUserInfo miniProgramBaseUserInfo) {         MiniProgramBaseUserInfo result = null;         String value = RedisPoolUtil.get(key);         if (value != null) {             String values[] = value.split("---");             String openid = values[0];             // 从数据库中查询是否存储(根据openid查询)             result = null; // TODO: 这里是查数据库操作             if (result == null){ // 数据库中没有数据                 // TODO: 向数据库中执行插入操作                 // insert  weChatUserInfo                 result = miniProgramBaseUserInfo;             }             return Result.success(result);         return Result.error(SESSION_KEY_OVER_TIME); // SessionKey失效     }

分享